nicer pin btn size, and disable sidebar toggle btns when pinned

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);

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());
 

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">