[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH] Improved collapsible sidebar behavior

luci pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
6f65c5a2 by Moïse Nturubika at 2026-03-11T11:28:52+00:00
[ENH] Improved collapsible sidebar behavior
---
* [ENH][UI] Fix mobile content padding, center search icon, and expand sidebar on preference filters click

* [FIX] Fix typo and empty spaces

* [UI] Expand sidebar when clicking search icon in narrow mode

* [ENH] Improved collapsible sidebar behavior

See merge request tikiwiki/tiki!9698

- - - - -


2 changed files:

- lib/jquery_tiki/tiki-admin.js
- themes/base_files/css/feature/adminui.scss


Changes:

=====================================
lib/jquery_tiki/tiki-admin.js
=====================================
@@ -263,8 +263,7 @@
     $(function () {
         var $body = $("body"),
             $targets = $(".admin-nav .offcanvas, .admin-nav .navbar-wrapper"),
-            storageKey = "tiki_admin_sidebar_collapsed",
-            hoverTimeout;
+            storageKey = "tiki_admin_sidebar_collapsed";
 
         function setCollapsed(state) {
             $body.toggleClass("sidebar_collapsed", state);
@@ -282,33 +281,38 @@
             }
         }
 
-        // Events
+        // Toggle collapse on button click
         $(document).on("click", ".admin-menu-collapse-btn", function (e) {
             e.preventDefault();
             setCollapsed(!$body.hasClass("sidebar_collapsed"));
         });
 
+        // Handle search icon click in narrow mode (expand instead of submit)
+        $(document).on("click", ".search-preferences button[type='submit']", function (e) {
+            if ($body.hasClass("sidebar_collapsed")) {
+                e.preventDefault();
+                setCollapsed(false);
+                $(".search-preferences input[name='lm_criteria']").focus();
+            }
+        });
+
+        // Handle preference filters icon click in narrow mode (expand sidebar)
+        $(document).on("click", "#flush-heading-preference-filters > button", function (e) {
+            if ($body.hasClass("sidebar_collapsed")) {
+                e.preventDefault();
+                setCollapsed(false);
+            }
+        });
+
         // Ensure icon is correct on load immediately
         $(function () {
             var collapsed = $body.hasClass("sidebar_collapsed");
-            // Double check storage if class isn't there yet but should be (though PHP might have set it, body class is usually reliable if set by server)
             if (!collapsed && (localStorage.getItem(storageKey) === "y" || getCookie("sidebar_collapsed") === "y")) {
                 collapsed = true;
             }
             setCollapsed(collapsed);
         });
 
-        $(document).on("mouseenter mouseleave", ".admin-nav .offcanvas, .admin-nav .navbar-wrapper", function (e) {
-            if (!$body.hasClass("sidebar_collapsed")) return;
-
-            clearTimeout(hoverTimeout);
-            if (e.type === "mouseenter") {
-                $targets.removeClass("narrow");
-            } else {
-                hoverTimeout = setTimeout(function () { $targets.addClass("narrow"); }, 300);
-            }
-        });
-
         // Initialize (check storage)
         try {
             if (localStorage.getItem(storageKey) === "y" || getCookie("sidebar_collapsed") === "y") {


=====================================
themes/base_files/css/feature/adminui.scss
=====================================
@@ -322,6 +322,7 @@ body.tiki-admin {
 
 @media (min-width: 992px) {
 
+    // When the sidebar is collapsed (narrow mode)
     .tiki-admin aside.admin-nav .offcanvas.narrow,
     .tiki-admin aside.admin-nav .navbar-wrapper.narrow {
         max-width: 80px !important;
@@ -330,9 +331,21 @@ body.tiki-admin {
         min-height: calc(100vh - var(--tiki-admin-top-modules-height)) !important;
         display: flex !important;
         flex-direction: column !important;
+        overflow-x: hidden !important; // Hide any horizontal scrolling
+
+        // Ensure all items inside fit the narrow width
+        * {
+            max-width: 100% !important;
+        }
     }
 
-    // Ensure collapsed sidebar inner content expands to full height
+    // This part sits between the wrapper and offcanvas
+    .tiki-admin aside.admin-nav .navbar-wrapper.narrow>.navbar {
+        max-width: 100% !important;
+        overflow-x: hidden !important;
+    }
+
+    // Make sure the body takes full height
     .tiki-admin aside.admin-nav .offcanvas.narrow .offcanvas-body,
     .tiki-admin aside.admin-nav .navbar-wrapper.narrow .offcanvas-body {
         height: 100% !important;
@@ -340,6 +353,7 @@ body.tiki-admin {
         flex-direction: column !important;
     }
 
+    // Main inner container for sidebar items
     .tiki-admin aside.admin-nav .offcanvas.narrow .offcanvas-body>div,
     .tiki-admin aside.admin-nav .navbar-wrapper.narrow>div {
         height: 100% !important;
@@ -348,11 +362,20 @@ body.tiki-admin {
         flex: 1 !important;
     }
 
+    // The accordion holds the menu sections
     .tiki-admin aside.admin-nav .offcanvas.narrow .accordion,
     .tiki-admin aside.admin-nav .navbar-wrapper.narrow .accordion {
         flex: 1 !important;
         display: flex !important;
         flex-direction: column !important;
+        overflow-x: hidden !important; // Critical fix: prevents the horizontal scrollbar
+    }
+
+    // Center the search icon form
+    .tiki-admin aside.admin-nav .navbar-wrapper.narrow .search-preferences form {
+        text-align: center;
+        display: flex;
+        justify-content: center;
     }
 
     // Keep the collapse button at the bottom
@@ -434,6 +457,11 @@ body.tiki-admin {
         display: none !important;
     }
 
+
+    .tiki-admin aside.admin-nav .offcanvas.narrow .accordion-body {
+        padding: 0 !important;
+    }
+
     .tiki-admin aside.admin-nav .offcanvas.narrow .accordion-button .icon {
         margin: 0 !important;
         font-size: 1.2rem;
@@ -655,13 +683,10 @@ body.sidebar_collapsed .admin-menu-collapser .expand-text {
     border-color: rgba(0, 0, 0, 0.1);
 }
 
-// Prevent accordion collapse when sidebar is collapsed and showing popover
+// Allow accordion buttons to be clickable in narrow mode
 .tiki-admin aside.admin-nav .offcanvas.narrow .accordion-button {
     pointer-events: auto;
-}
-
-.tiki-admin aside.admin-nav .offcanvas.narrow .accordion-button[data-bs-toggle="collapse"] {
-    pointer-events: none;
+    cursor: pointer;
 }
 
 .tiki-admin aside.admin-nav .offcanvas.narrow .admin-menu-trigger {
@@ -730,12 +755,15 @@ body.sidebar_collapsed .admin-menu-collapser .expand-text {
     }
 }
 
-// Adjust content padding when sidebar is collapsed
-body.sidebar_collapsed.tiki-admin.uab #tikifeedback,
-body.sidebar_collapsed.tiki-admin.uab .admin-content,
-body.sidebar_collapsed.tiki-admin.uab .errors-wrapper,
-body.sidebar_collapsed.tiki-admin.uab .bottom_modules {
-    padding-left: 80px !important;
+// Adjust content padding when sidebar is collapsed (Desktop only, mobile has offcanvas)
+@media (min-width: 992px) {
+
+    body.sidebar_collapsed.tiki-admin.uab #tikifeedback,
+    body.sidebar_collapsed.tiki-admin.uab .admin-content,
+    body.sidebar_collapsed.tiki-admin.uab .errors-wrapper,
+    body.sidebar_collapsed.tiki-admin.uab .bottom_modules {
+        padding-left: 80px !important;
+    }
 }
 
 body.tiki-admin .container.container-std {



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/6f65c5a29fca2b43cec68de1648617f28bb5043d

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/6f65c5a29fca2b43cec68de1648617f28bb5043d
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs