From b8ff2ae303c93edcfb109f21aa965d271f500490 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Thu, 10 Oct 2024 16:44:20 +0100
Subject: [PATCH] nicer pin btn size, and disable sidebar toggle btns when
 pinned

---
 apps/home/static/home/css/sidebar.css | 2 +-
 apps/home/static/home/js/index.js     | 5 +++++
 apps/home/templates/home/sidebar.html | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/home/static/home/css/sidebar.css b/apps/home/static/home/css/sidebar.css
index 381e978..1909bfe 100644
--- a/apps/home/static/home/css/sidebar.css
+++ b/apps/home/static/home/css/sidebar.css
@@ -201,7 +201,7 @@
 .sidebar .sidebar-footer .sidebar-menu-btn {
     display: flex;
     align-items: center;
-    width: 100%;
+    width: auto;
     padding: 0.5rem;
     border: none;
     border-radius: var(--bs-border-radius-sm);
diff --git a/apps/home/static/home/js/index.js b/apps/home/static/home/js/index.js
index 27067d3..678f3e9 100644
--- a/apps/home/static/home/js/index.js
+++ b/apps/home/static/home/js/index.js
@@ -300,8 +300,13 @@ var _sidebarPinned = $(".sidebar .pin-sidebar-btn").hasClass("active");
 const getSidebarPinned = () => _sidebarPinned;
 const setSidebarPinned = pin => {
     _sidebarPinned = pin;
+
+    // Show button as active or not
     const btn = $(".sidebar .pin-sidebar-btn");
     pin ? btn.addClass("active") : btn.removeClass("active");
+
+    $(".sidebar .btn-close").prop("disabled", pin);
+    $(".reveal-sidebar-btn").prop("disabled", pin);
 }
 const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned());
 
diff --git a/apps/home/templates/home/sidebar.html b/apps/home/templates/home/sidebar.html
index 8dd28b9..11b6219 100644
--- a/apps/home/templates/home/sidebar.html
+++ b/apps/home/templates/home/sidebar.html
@@ -26,11 +26,11 @@
     </ul>
     <hr class="sidebar-divider">
     <div class="sidebar-footer dropdown">
-        <button type="button" class="sidebar-menu-btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+        <button type="button" class="sidebar-menu-btn dropdown-toggle flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
             <img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
             <strong>{{ request.user.global_name }}</strong>
         </button>
-        <button type="button" class="pin-sidebar-btn sidebar-menu-btn justify-content-center d-flex d-lg-none">
+        <button type="button" class="pin-sidebar-btn sidebar-menu-btn justify-content-center d-flex d-lg-none flex-grow-0 px-3">
             <i class="bi bi-pin-angle"></i>
         </button>
         <ul class="sidebar-menu dropdown-menu">