pin sidebar btn

apps/home/static/home/css/sidebar.css

@@ -195,6 +195,7 @@
 
 .sidebar .sidebar-footer {
     padding: 0 1rem 1rem 1rem;
+    display: flex;
 }
 
 .sidebar .sidebar-footer .sidebar-menu-btn {
@@ -208,7 +209,8 @@
     background-color: inherit;
 }
 
-.sidebar .sidebar-footer .sidebar-menu-btn:hover {
+.sidebar .sidebar-footer .sidebar-menu-btn:hover,
+.sidebar .sidebar-footer .sidebar-menu-btn.active {
     background-color: var(--bs-body-bg);
 }
 

apps/home/static/home/js/index.js

@@ -260,27 +260,50 @@ function logError(error) {
 // region Sidebar Visibility
 
 var _sidebarVisible = $(".sidebar").hasClass("visible");  // Applicable for smaller screens ONLY
+const getSidebarVisibility = () => _sidebarVisible;
+const setSidebarVisibility = show => {
+    // Must always show if the sidebar is pinned
+    show = getSidebarPinned() ? true : show;
 
-function getSidebarVisibility() {
-    return _sidebarVisible;
-}
-
-function setSidebarVisibility(show) {
     _sidebarVisible = show;
     if (show) {
         $(".sidebar").addClass("visible");
         $(".sidebar-backdrop").show();
         return;
     }
-
+    
     $(".sidebar").removeClass("visible");
     $(".sidebar-backdrop").hide();
 }
+const toggleSidebarVisibility = () => setSidebarVisibility(!getSidebarVisibility());
 
-function toggleSidebarVisibility() {
-    setSidebarVisibility(!getSidebarVisibility());
-}
+// Trigger an update to set the backdrop
+$(document).ready(() => setSidebarVisibility(getSidebarVisibility()));
 
+// User controls for sidebar visibility
 $(".reveal-sidebar-btn").on("click", toggleSidebarVisibility);
 $(".sidebar .btn-close").on("click", () => setSidebarVisibility(false));
 $(".sidebar-backdrop").on("click", () => setSidebarVisibility(false));
+
+// Prevent sidebar from opening if the screen becomes larger then smaller again, while it's visible
+$(window).on('resize', () => {
+    // Can't pass conditional directly, causes flickering effect
+    if (getSidebarVisibility() && $(window).width() > 992) {
+        setSidebarVisibility(false);
+    }
+});
+
+
+// region Sidebar Pin
+
+var _sidebarPinned = $(".sidebar .pin-sidebar-btn").hasClass("active");
+const getSidebarPinned = () => _sidebarPinned;
+const setSidebarPinned = pin => {
+    _sidebarPinned = pin;
+    const btn = $(".sidebar .pin-sidebar-btn");
+    pin ? btn.addClass("active") : btn.removeClass("active");
+}
+const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned());
+
+// User controls for pinning the sidebar
+$(".sidebar .pin-sidebar-btn").on("click", toggleSidebarPinned);

apps/home/templates/home/sidebar.html

@@ -30,6 +30,9 @@
             <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">
+            <i class="bi bi-pin-angle"></i>
+        </button>
         <ul class="sidebar-menu dropdown-menu">
             <li class="dropend">
                 <button type="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">