Group the sidebar by sales, tools, and settings, and keep commissions under sales.

apps/web/src/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
@@ -28,25 +28,17 @@ const todayLabel = computed(() => formatJalaliShort(new Date()));
 
 const SIDEBAR_KEY = 'mento_sidebar_collapsed';
 const collapsed = ref(false);
-const moreFlyout = ref(false);
 
+const customersOpen = ref(false);
 const salesOpen = ref(false);
-const moreOpen = ref(false);
+const activitiesOpen = ref(false);
+const supportOpen = ref(false);
+const toolsOpen = ref(false);
 const settingsOpen = ref(false);
 const globalSearch = ref('');
 const activityBadge = ref(0);
 
-const salesPaths = ['/quotes', '/invoices', '/inventory', '/cheques', '/commissions', '/sales/forecast', '/reports', '/notes', '/tickets'];
-const morePaths = ['/activities/calendar', '/projects', '/project-cards', '/loyalty'];
-const settingsPaths = [
-  '/settings/team',
-  '/settings/lead-forms',
-  '/settings/custom-fields',
-  '/settings/products',
-  '/settings/currencies',
-  '/settings/tahesab',
-  '/settings/faq',
-];
+type FoldKey = 'customers' | 'sales' | 'activities' | 'support' | 'tools' | 'settings';
 
 function pathIn(prefixes: string[]) {
   return prefixes.some(
@@ -54,45 +46,108 @@ function pathIn(prefixes: string[]) {
   );
 }
 
-const salesActive = computed(() => pathIn(salesPaths));
-const moreActive = computed(() => pathIn(morePaths));
-const settingsActive = computed(() => pathIn(settingsPaths));
-const productsActive = computed(() => route.path.startsWith('/settings/products'));
+const customersActive = computed(() => pathIn(['/contacts']));
+const salesActive = computed(() =>
+  pathIn(['/pipeline', '/deals', '/quotes', '/invoices', '/commissions', '/sales/forecast', '/settings/products']),
+);
+const activitiesActive = computed(() => pathIn(['/activities']));
+const notesActive = computed(() => route.path === '/notes' || route.path.startsWith('/notes/'));
+const supportActive = computed(() => pathIn(['/tickets']));
+const loyaltyActive = computed(() => pathIn(['/loyalty']));
+const reportsActive = computed(() => pathIn(['/reports']));
 const automationsActive = computed(() => route.path.startsWith('/settings/automations'));
-const extraActive = computed(() =>
+const toolsActive = computed(() =>
+  pathIn(['/settings/lead-forms', '/projects', '/project-cards', '/inventory', '/cheques', '/attachments']),
+);
+const settingsActive = computed(() =>
   pathIn([
-    '/quotes',
-    '/invoices',
-    '/inventory',
-    '/cheques',
-    '/commissions',
-    '/sales/forecast',
-    '/notes',
-    '/tickets',
-    '/settings/lead-forms',
+    '/settings/team',
     '/settings/custom-fields',
     '/settings/currencies',
     '/settings/tahesab',
     '/settings/faq',
-  ]) || moreActive.value,
+  ]),
 );
+const peopleContactsActive = computed(
+  () => customersActive.value && route.query.tab !== 'companies',
+);
+const companyContactsActive = computed(
+  () => customersActive.value && route.query.tab === 'companies',
+);
+const myActivitiesActive = computed(
+  () =>
+    route.path === '/activities' ||
+    route.path.startsWith('/activities/new') ||
+    (route.path.startsWith('/activities/') && !route.path.startsWith('/activities/calendar')),
+);
+
+function givenName(fullName: string): string {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length <= 1) return fullName.trim();
+  return parts.slice(0, -1).join(' ');
+}
+
+const profileNameEl = ref<HTMLElement | null>(null);
+const useShortProfileName = ref(false);
+const profileFullName = computed(() => auth.user?.fullName?.trim() || '');
+const profileDisplayName = computed(() => {
+  if (!profileFullName.value) return '';
+  return useShortProfileName.value
+    ? givenName(profileFullName.value)
+    : profileFullName.value;
+});
+
+async function fitProfileName() {
+  if (collapsed.value) {
+    useShortProfileName.value = false;
+    return;
+  }
+  useShortProfileName.value = false;
+  await nextTick();
+  const el = profileNameEl.value;
+  if (!el) return;
+  if (el.scrollWidth > el.clientWidth + 1) {
+    useShortProfileName.value = true;
+  }
+}
+
+let profileNameObserver: ResizeObserver | null = null;
+
+watch([profileFullName, collapsed], () => {
+  void fitProfileName();
+});
 
 watch(
   () => route.path,
   () => {
+    if (customersActive.value) customersOpen.value = true;
     if (salesActive.value) salesOpen.value = true;
-    if (moreActive.value) moreOpen.value = true;
+    if (activitiesActive.value) activitiesOpen.value = true;
+    if (supportActive.value) supportOpen.value = true;
+    if (toolsActive.value) toolsOpen.value = true;
     if (settingsActive.value) settingsOpen.value = true;
   },
   { immediate: true },
 );
 
-function toggleGroup(key: 'sales' | 'more' | 'settings', event: Event) {
+function toggleFold(key: FoldKey) {
+  if (key === 'customers') customersOpen.value = !customersOpen.value;
+  if (key === 'sales') salesOpen.value = !salesOpen.value;
+  if (key === 'activities') activitiesOpen.value = !activitiesOpen.value;
+  if (key === 'support') supportOpen.value = !supportOpen.value;
+  if (key === 'tools') toolsOpen.value = !toolsOpen.value;
+  if (key === 'settings') settingsOpen.value = !settingsOpen.value;
+}
+
+function onFoldClick(key: FoldKey, fallback: string, event: Event) {
   event.preventDefault();
   event.stopPropagation();
-  if (key === 'sales') salesOpen.value = !salesOpen.value;
-  if (key === 'more') moreOpen.value = !moreOpen.value;
-  if (key === 'settings') settingsOpen.value = !settingsOpen.value;
+  if (collapsed.value) {
+    void router.push(fallback);
+    closeMenu();
+    return;
+  }
+  toggleFold(key);
 }
 
 const menuOpen = ref(false);
@@ -106,12 +161,10 @@ const hasUnread = computed(() => unreadCount.value > 0);
 
 function closeMenu() {
   menuOpen.value = false;
-  moreFlyout.value = false;
 }
 
 function toggleCollapsed() {
   collapsed.value = !collapsed.value;
-  moreFlyout.value = false;
   try {
     localStorage.setItem(SIDEBAR_KEY, collapsed.value ? '1' : '0');
   } catch {
@@ -119,21 +172,6 @@ function toggleCollapsed() {
   }
 }
 
-const moreBtnRef = ref<HTMLElement | null>(null);
-const flyoutRef = ref<HTMLElement | null>(null);
-
-function toggleMoreFlyout() {
-  moreFlyout.value = !moreFlyout.value;
-}
-
-function onDocClick(event: MouseEvent) {
-  if (!moreFlyout.value) return;
-  const target = event.target;
-  if (!(target instanceof Node)) return;
-  if (moreBtnRef.value?.contains(target) || flyoutRef.value?.contains(target)) return;
-  moreFlyout.value = false;
-}
-
 function closeNotif() {
   notifOpen.value = false;
 }
@@ -241,13 +279,20 @@ onMounted(() => {
   void refreshNotifs();
   void loadActivityBadge();
   pollTimer = setInterval(() => void refreshNotifs(), 45000);
-  document.addEventListener('click', onDocClick, true);
+  void fitProfileName();
+  if (typeof ResizeObserver !== 'undefined') {
+    profileNameObserver = new ResizeObserver(() => {
+      void fitProfileName();
+    });
+    const meta = profileNameEl.value?.parentElement;
+    if (meta) profileNameObserver.observe(meta);
+  }
 });
 
 onUnmounted(() => {
   if (pollTimer) clearInterval(pollTimer);
-  document.removeEventListener('click', onDocClick, true);
   document.body.style.overflow = '';
+  profileNameObserver?.disconnect();
 });
 </script>
 
@@ -277,7 +322,7 @@ onUnmounted(() => {
               <i class="online-dot" title="آنلاین" aria-hidden="true" />
             </span>
             <span class="profile-meta">
-              <strong>{{ auth.user?.fullName }}</strong>
+              <strong ref="profileNameEl">{{ profileDisplayName }}</strong>
             </span>
           </RouterLink>
         </div>
@@ -298,58 +343,126 @@ onUnmounted(() => {
             <UiIcon name="home" :size="collapsed ? 20 : 18" />
             <span>داشبورد</span>
           </RouterLink>
-          <RouterLink to="/contacts" class="nav-item" title="مشتریان" @click="closeMenu">
-            <UiIcon name="users" :size="collapsed ? 20 : 18" />
-            <span>مشتریان</span>
-          </RouterLink>
-          <RouterLink to="/pipeline" class="nav-item" title="معاملات" @click="closeMenu">
-            <UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
-            <span>معاملات</span>
-          </RouterLink>
+
+          <div class="nav-fold" :class="{ open: customersOpen, active: customersActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="مشتریان"
+              :class="{ 'router-link-active': customersActive }"
+              :aria-expanded="customersOpen"
+              @click="onFoldClick('customers', '/contacts', $event)"
+            >
+              <UiIcon name="users" :size="collapsed ? 20 : 18" />
+              <span>مشتریان</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="customersOpen" class="nav-sub">
+              <RouterLink
+                to="/contacts"
+                :class="{ 'router-link-active': peopleContactsActive }"
+                @click="closeMenu"
+              >اشخاص</RouterLink>
+              <RouterLink
+                to="/contacts?tab=companies"
+                :class="{ 'router-link-active': companyContactsActive }"
+                @click="closeMenu"
+              >شرکت‌ها</RouterLink>
+            </div>
+          </div>
+
+          <div class="nav-fold" :class="{ open: salesOpen, active: salesActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="فروش"
+              :class="{ 'router-link-active': salesActive }"
+              :aria-expanded="salesOpen"
+              @click="onFoldClick('sales', '/pipeline', $event)"
+            >
+              <UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
+              <span>فروش</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="salesOpen" class="nav-sub">
+              <RouterLink
+                to="/pipeline"
+                :class="{ 'router-link-active': pathIn(['/pipeline', '/deals']) }"
+                @click="closeMenu"
+              >کاریز فروش / معاملات</RouterLink>
+              <RouterLink to="/quotes" @click="closeMenu">پیش‌فاکتورها</RouterLink>
+              <RouterLink to="/invoices" @click="closeMenu">فاکتورها</RouterLink>
+              <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
+              <RouterLink
+                v-if="canSettings"
+                to="/settings/products"
+                @click="closeMenu"
+              >محصولات و خدمات</RouterLink>
+              <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
+            </div>
+          </div>
+
+          <div class="nav-fold" :class="{ open: activitiesOpen, active: activitiesActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="فعالیت‌ها"
+              :class="{ 'router-link-active': activitiesActive }"
+              :aria-expanded="activitiesOpen"
+              @click="onFoldClick('activities', '/activities', $event)"
+            >
+              <UiIcon name="check" :size="collapsed ? 20 : 18" />
+              <span>فعالیت‌ها</span>
+              <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="activitiesOpen" class="nav-sub">
+              <RouterLink
+                to="/activities"
+                :class="{ 'router-link-active': myActivitiesActive }"
+                @click="closeMenu"
+              >فعالیت‌های من</RouterLink>
+              <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
+            </div>
+          </div>
+
           <RouterLink
-            to="/activities"
+            to="/notes"
             class="nav-item"
-            title="فعالیت‌ها"
-            active-class=""
-            exact-active-class=""
-            :class="{
-              'router-link-active':
-                route.path === '/activities' ||
-                route.path.startsWith('/activities/new') ||
-                (route.path.startsWith('/activities/') &&
-                  !route.path.startsWith('/activities/calendar')),
-            }"
+            title="یادداشت‌ها"
+            :class="{ 'router-link-active': notesActive }"
             @click="closeMenu"
           >
-            <UiIcon name="check" :size="collapsed ? 20 : 18" />
-            <span>فعالیت‌ها</span>
-            <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
+            <UiIcon name="document" :size="collapsed ? 20 : 18" />
+            <span>یادداشت‌ها</span>
           </RouterLink>
-          <RouterLink
-            to="/settings/products"
-            class="nav-item"
-            title="محصولات"
-            :class="{ 'router-link-active': productsActive }"
-            @click="closeMenu"
-          >
-            <UiIcon name="box" :size="collapsed ? 20 : 18" />
-            <span>محصولات</span>
+
+          <div class="nav-fold" :class="{ open: supportOpen, active: supportActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="پشتیبانی"
+              :class="{ 'router-link-active': supportActive }"
+              :aria-expanded="supportOpen"
+              @click="onFoldClick('support', '/tickets', $event)"
+            >
+              <UiIcon name="chat" :size="collapsed ? 20 : 18" />
+              <span>پشتیبانی</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="supportOpen" class="nav-sub">
+              <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
+            </div>
+          </div>
+
+          <RouterLink to="/loyalty" class="nav-item" title="باشگاه مشتریان" @click="closeMenu">
+            <UiIcon name="gift" :size="collapsed ? 20 : 18" />
+            <span>باشگاه مشتریان</span>
           </RouterLink>
           <RouterLink to="/reports" class="nav-item" title="گزارش‌ها" @click="closeMenu">
             <UiIcon name="chart" :size="collapsed ? 20 : 18" />
             <span>گزارش‌ها</span>
           </RouterLink>
-          <RouterLink
-            v-if="canSettings"
-            to="/settings/team"
-            class="nav-item"
-            title="تنظیمات"
-            :class="{ 'router-link-active': settingsActive && !productsActive }"
-            @click="closeMenu"
-          >
-            <UiIcon name="settings" :size="collapsed ? 20 : 18" />
-            <span>تنظیمات</span>
-          </RouterLink>
           <RouterLink
             v-if="canSettings"
             to="/settings/automations"
@@ -363,83 +476,64 @@ onUnmounted(() => {
           </RouterLink>
         </div>
 
-        <div v-if="collapsed" ref="moreBtnRef" class="nav-more desktop-only">
-          <button
-            class="nav-item more-btn"
-            type="button"
-            title="بیشتر"
-            :class="{ 'router-link-active': extraActive }"
-            :aria-expanded="moreFlyout"
-            @click="toggleMoreFlyout"
-          >
-            <UiIcon name="dots" :size="20" />
-            <span>بیشتر</span>
-          </button>
-        </div>
+        <div class="nav-sep" aria-hidden="true" />
 
-        <div class="nav-group" :class="{ open: salesOpen, active: salesActive }">
-          <button
-            class="nav-group-btn"
-            type="button"
-            :aria-expanded="salesOpen"
-            @click="toggleGroup('sales', $event)"
-          >
-            <span>فروش و مالی</span>
-            <span class="chev" aria-hidden="true" />
-          </button>
-          <div v-show="salesOpen" class="nav-sub">
-            <RouterLink
-              to="/invoices"
-              :class="{ 'router-link-active': route.path.startsWith('/invoices') || route.path.startsWith('/quotes') }"
-              @click="closeMenu"
-            >فاکتورها</RouterLink>
-            <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
-            <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
-            <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
-            <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
-            <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
-            <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
+        <div class="nav-utility">
+          <div class="nav-fold" :class="{ open: toolsOpen, active: toolsActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="ابزارها"
+              :class="{ 'router-link-active': toolsActive }"
+              :aria-expanded="toolsOpen"
+              @click="onFoldClick('tools', canSettings ? '/settings/lead-forms' : '/projects', $event)"
+            >
+              <UiIcon name="apps-plus" :size="collapsed ? 20 : 18" />
+              <span>ابزارها</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="toolsOpen" class="nav-sub">
+              <RouterLink
+                v-if="canSettings"
+                to="/settings/lead-forms"
+                @click="closeMenu"
+              >فرم‌ساز سرنخ</RouterLink>
+              <RouterLink
+                to="/projects"
+                :class="{ 'router-link-active': pathIn(['/projects', '/project-cards']) }"
+                @click="closeMenu"
+              >کاریز پروژه</RouterLink>
+              <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
+              <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
+              <RouterLink to="/attachments" @click="closeMenu">پیوست‌ها</RouterLink>
+            </div>
           </div>
-        </div>
 
-        <div class="nav-group" :class="{ open: moreOpen, active: moreActive }">
-          <button
-            class="nav-group-btn"
-            type="button"
-            :aria-expanded="moreOpen"
-            @click="toggleGroup('more', $event)"
+          <div
+            v-if="canSettings"
+            class="nav-fold"
+            :class="{ open: settingsOpen, active: settingsActive }"
           >
-            <span>موارد بیشتر</span>
-            <span class="chev" aria-hidden="true" />
-          </button>
-          <div v-show="moreOpen" class="nav-sub">
-            <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
-            <RouterLink to="/projects" @click="closeMenu">کاریز پروژه</RouterLink>
-            <RouterLink to="/loyalty" @click="closeMenu">باشگاه مشتریان</RouterLink>
-          </div>
-        </div>
-
-        <div
-          v-if="canSettings"
-          class="nav-group"
-          :class="{ open: settingsOpen, active: settingsActive }"
-        >
-          <button
-            class="nav-group-btn"
-            type="button"
-            :aria-expanded="settingsOpen"
-            @click="toggleGroup('settings', $event)"
-          >
-            <span>جزئیات تنظیمات</span>
-            <span class="chev" aria-hidden="true" />
-          </button>
-          <div v-show="settingsOpen" class="nav-sub">
-            <RouterLink to="/settings/team" @click="closeMenu">تیم و نقش‌ها</RouterLink>
-            <RouterLink to="/settings/lead-forms" @click="closeMenu">فرم‌ساز سرنخ</RouterLink>
-            <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
-            <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
-            <RouterLink to="/settings/tahesab" @click="closeMenu">ته‌حساب</RouterLink>
-            <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="تنظیمات"
+              :class="{ 'router-link-active': settingsActive }"
+              :aria-expanded="settingsOpen"
+              @click="onFoldClick('settings', '/settings/team', $event)"
+            >
+              <UiIcon name="settings" :size="collapsed ? 20 : 18" />
+              <span>تنظیمات</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="settingsOpen" class="nav-sub">
+              <RouterLink to="/settings/team#settings-org" @click="closeMenu">تنظیمات عمومی</RouterLink>
+              <RouterLink to="/settings/team#settings-team" @click="closeMenu">تیم و نقش‌ها</RouterLink>
+              <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
+              <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
+              <RouterLink to="/settings/tahesab" @click="closeMenu">تنظیمات مالی / ته‌حساب</RouterLink>
+              <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
+            </div>
           </div>
         </div>
       </nav>
@@ -476,32 +570,6 @@ onUnmounted(() => {
       </div>
       </div>
 
-      <div v-if="collapsed && moreFlyout" ref="flyoutRef" class="more-flyout desktop-only">
-        <p>فروش و مالی</p>
-        <RouterLink
-          to="/invoices"
-          :class="{ 'router-link-active': route.path.startsWith('/invoices') || route.path.startsWith('/quotes') }"
-          @click="closeMenu"
-        >فاکتورها</RouterLink>
-        <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
-        <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
-        <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
-        <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
-        <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
-        <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
-        <p>موارد بیشتر</p>
-        <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
-        <RouterLink to="/projects" @click="closeMenu">کاریز پروژه</RouterLink>
-        <RouterLink to="/loyalty" @click="closeMenu">باشگاه مشتریان</RouterLink>
-        <template v-if="canSettings">
-          <p>تنظیمات</p>
-          <RouterLink to="/settings/lead-forms" @click="closeMenu">فرم‌ساز سرنخ</RouterLink>
-          <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
-          <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
-          <RouterLink to="/settings/tahesab" @click="closeMenu">ته‌حساب</RouterLink>
-          <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
-        </template>
-      </div>
     </aside>
 
     <div class="workspace">
@@ -670,18 +738,26 @@ onUnmounted(() => {
 
 .brand-cluster :deep(.brand-logo.full) {
   gap: 0.35rem;
-  min-width: 0;
+  flex-shrink: 0;
+  min-width: max-content;
+}
+
+.sidebar-logo {
+  flex-shrink: 0;
+}
+
+.brand-cluster :deep(.text) {
+  flex-shrink: 0;
 }
 
 .brand-cluster :deep(.text strong) {
   font-size: 0.92rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .brand-cluster :deep(.text small) {
   font-size: 0.62rem;
+  white-space: nowrap;
 }
 
 .side-nav {
@@ -750,27 +826,35 @@ onUnmounted(() => {
   color: #fff;
 }
 
-.nav-group {
-  margin-top: 0.55rem;
+.nav-fold {
+  display: grid;
+  gap: 0.15rem;
 }
 
-.nav-group-btn {
+.nav-fold-btn {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   border: 0;
   background: transparent;
-  color: #94a3b8;
-  font: inherit;
-  font-size: 0.78rem;
-  font-weight: 700;
-  padding: 0.55rem 1rem;
-  border-radius: 14px;
   cursor: pointer;
+  font: inherit;
   text-align: right;
 }
 
+.nav-fold-btn .chev {
+  margin-inline-start: auto;
+}
+
+.nav-sep {
+  height: 1px;
+  margin: 0.55rem 0.85rem;
+  background: #e8eef4;
+}
+
+.nav-utility {
+  display: grid;
+  gap: 0.35rem;
+}
+
 .chev {
   width: 0.42rem;
   height: 0.42rem;
@@ -778,9 +862,10 @@ onUnmounted(() => {
   border-bottom: 1.6px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s ease;
+  flex-shrink: 0;
 }
 
-.nav-group.open .chev {
+.nav-fold.open > .nav-fold-btn .chev {
   transform: rotate(-135deg);
 }
 
@@ -832,7 +917,7 @@ onUnmounted(() => {
   background: transparent;
   color: inherit;
   text-decoration: none;
-  flex-shrink: 0;
+  flex: 1 1 0;
   min-width: 0;
   max-width: 4.8rem;
 }
@@ -1146,19 +1231,23 @@ onUnmounted(() => {
   }
 
   .sidebar.collapsed .nav-primary,
-  .sidebar.collapsed .nav-more {
+  .sidebar.collapsed .nav-utility {
     display: grid;
     width: 100%;
     gap: 0.08rem;
   }
 
-  .sidebar.collapsed .more-btn {
-    width: 100%;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
+  .sidebar.collapsed .nav-sep {
+    margin: 0.25rem 0.55rem;
+  }
+
+  .sidebar.collapsed .nav-fold {
+    gap: 0;
+  }
+
+  .sidebar.collapsed .nav-sub,
+  .sidebar.collapsed .nav-fold-btn .chev {
+    display: none;
   }
 
   .sidebar.collapsed .nav-item {
@@ -1197,7 +1286,6 @@ onUnmounted(() => {
     font-size: 0.58rem;
   }
 
-  .sidebar.collapsed .nav-group,
   .sidebar.collapsed .promo-card,
   .sidebar.collapsed .scope-banner {
     display: none;