From 9d38c126a58ec01a3e1dd415fa9c4ad9766a8a8a Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 20 Apr 2026 17:24:01 +0000
Subject: [PATCH] update sidebar

---
 assets/css/custom.css | 23 +++++++++++++++++++++++
 includes/header.php   | 14 +++++++-------
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 0fdc9a2..8e59ccc 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -10,6 +10,7 @@ body {
 }
 #sidebar-wrapper {
   min-height: 100vh;
+  height: 100vh;
   margin-left: calc(-1 * var(--sidebar-width));
   transition: margin .25s ease-out;
   width: var(--sidebar-width);
@@ -17,6 +18,11 @@ body {
   top: 0;
   left: 0;
   z-index: 1000;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
   background: #343a40; /* Dark theme sidebar */
 }
 [dir="rtl"] #sidebar-wrapper {
@@ -25,6 +31,23 @@ body {
   left: auto;
   right: 0;
 }
+#sidebar-wrapper::-webkit-scrollbar {
+  width: 10px;
+}
+#sidebar-wrapper::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.06);
+}
+#sidebar-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+  border: 2px solid rgba(52, 58, 64, 0.9);
+}
+#sidebar-wrapper::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.42);
+}
+#sidebar-navigation {
+  padding-bottom: 1rem !important;
+}
 #wrapper.toggled #sidebar-wrapper {
   margin-left: 0;
 }
diff --git a/includes/header.php b/includes/header.php
index d8d72bb..1308962 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -66,7 +66,7 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
         <div class="text-white-50 small"><?= h(role_label($user['role'])) ?> · <?= h(branch_label($user['branch_code'])) ?></div>
       </div>
 
-      <div class="list-group list-group-flush my-3 pb-5">
+      <div class="list-group list-group-flush my-3 pb-5" id="sidebar-navigation">
         <a class="list-group-item list-group-item-action <?= $activeNav === 'dashboard' ? 'active' : '' ?>" href="<?= h(url_for('index.php')) ?>">
           <i class="bi bi-speedometer2"></i> <?= h(tr('لوحة التحكم', 'Dashboard')) ?>
         </a>
@@ -79,7 +79,7 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
             <i class="bi bi-chevron-down toggle-icon" style="transition: transform 0.2s;"></i>
           </div>
         </a>
-        <div class="collapse <?= in_array($activeNav, ['stock', 'categories', 'units']) ? 'show' : '' ?>" id="collapseStock">
+        <div class="collapse <?= in_array($activeNav, ['stock', 'categories', 'units']) ? 'show' : '' ?>" id="collapseStock" data-bs-parent="#sidebar-navigation">
           <div class="list-group list-group-flush" style="background-color: rgba(0,0,0,0.15);">
             <a class="list-group-item list-group-item-action <?= $activeNav === 'stock' ? 'active' : '' ?>" href="<?= h(url_for('stock.php')) ?>" style="padding-left: 2.5rem; padding-right: 2.5rem;">
               <i class="bi bi-dot"></i> <?= h(tr('قائمة الأصناف', 'Items List')) ?>
@@ -96,13 +96,13 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
 
         <?php if (has_permission('sales', 'show') || has_permission('normal_sale', 'show') || has_permission('pos', 'show')): ?>
 <!-- المبيعات (Sales) - Now Collapsible -->
-        <a class="list-group-item list-group-item-action <?= in_array($activeNav, ['sales', 'unpaid', 'normal', 'pos']) ? '' : 'collapsed' ?>" data-bs-toggle="collapse" href="#collapseSales" role="button" aria-expanded="<?= in_array($activeNav, ['sales', 'normal', 'pos']) ? 'true' : 'false' ?>" aria-controls="collapseSales">
+        <a class="list-group-item list-group-item-action <?= in_array($activeNav, ['sales', 'unpaid', 'normal', 'pos']) ? '' : 'collapsed' ?>" data-bs-toggle="collapse" href="#collapseSales" role="button" aria-expanded="<?= in_array($activeNav, ['sales', 'unpaid', 'normal', 'pos']) ? 'true' : 'false' ?>" aria-controls="collapseSales">
           <div class="d-flex justify-content-between align-items-center w-100">
             <span><i class="bi bi-cart"></i> <?= h(tr('المبيعات', 'Sales')) ?></span>
             <i class="bi bi-chevron-down toggle-icon" style="transition: transform 0.2s;"></i>
           </div>
         </a>
-        <div class="collapse <?= in_array($activeNav, ['sales', 'unpaid', 'normal', 'pos']) ? 'show' : '' ?>" id="collapseSales">
+        <div class="collapse <?= in_array($activeNav, ['sales', 'unpaid', 'normal', 'pos']) ? 'show' : '' ?>" id="collapseSales" data-bs-parent="#sidebar-navigation">
           <div class="list-group list-group-flush" style="background-color: rgba(0,0,0,0.15);">
             <a class="list-group-item list-group-item-action <?= $activeNav === 'sales' ? 'active' : '' ?>" href="<?= h(url_for('sales.php')) ?>" style="padding-left: 2.5rem; padding-right: 2.5rem;">
               <i class="bi bi-dot"></i> <?= h(tr('قائمة الفواتير', 'Invoice list')) ?>
@@ -124,7 +124,7 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
             <i class="bi bi-chevron-down toggle-icon" style="transition: transform 0.2s;"></i>
           </div>
         </a>
-        <div class="collapse <?= in_array($activeNav, ['purchases', 'new_purchase']) ? 'show' : '' ?>" id="collapsePurchases">
+        <div class="collapse <?= in_array($activeNav, ['purchases', 'new_purchase']) ? 'show' : '' ?>" id="collapsePurchases" data-bs-parent="#sidebar-navigation">
           <div class="list-group list-group-flush" style="background-color: rgba(0,0,0,0.15);">
             <a class="list-group-item list-group-item-action <?= $activeNav === 'purchases' ? 'active' : '' ?>" href="<?= h(url_for('purchases.php')) ?>" style="padding-left: 2.5rem; padding-right: 2.5rem;">
               <i class="bi bi-dot"></i> <?= h(tr('قائمة المشتريات', 'Purchase list')) ?>
@@ -143,7 +143,7 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
             <i class="bi bi-chevron-down toggle-icon" style="transition: transform 0.2s;"></i>
           </div>
         </a>
-        <div class="collapse <?= in_array($activeNav, ['expenses', 'expense_categories']) ? 'show' : '' ?>" id="collapseExpenses">
+        <div class="collapse <?= in_array($activeNav, ['expenses', 'expense_categories']) ? 'show' : '' ?>" id="collapseExpenses" data-bs-parent="#sidebar-navigation">
           <div class="list-group list-group-flush" style="background-color: rgba(0,0,0,0.15);">
             <?php if (has_permission('expenses', 'show')): ?>
             <a class="list-group-item list-group-item-action <?= $activeNav === 'expenses' ? 'active' : '' ?>" href="<?= h(url_for('expenses.php')) ?>" style="padding-left: 2.5rem; padding-right: 2.5rem;">
@@ -189,7 +189,7 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
             <i class="bi bi-chevron-down toggle-icon" style="transition: transform 0.2s;"></i>
           </div>
         </a>
-        <div class="collapse <?= in_array($activeNav, ['outlets']) ? 'show' : '' ?>" id="collapseSettings">
+        <div class="collapse <?= in_array($activeNav, ['outlets']) ? 'show' : '' ?>" id="collapseSettings" data-bs-parent="#sidebar-navigation">
           <div class="list-group list-group-flush" style="background-color: rgba(0,0,0,0.15);">
             <a class="list-group-item list-group-item-action" href="#" data-bs-toggle="modal" data-bs-target="#settingsModal" style="padding-left: 2.5rem; padding-right: 2.5rem;">
               <i class="bi bi-dot"></i> <?= h(tr('إعدادات الشركة', 'App Settings')) ?>