Let the sidebar collapse to an icon rail with a logo-and-profile cap.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/UiIcon.vue

@@ -57,7 +57,8 @@ defineProps<{
     | 'apps-plus'
     | 'crown'
     | 'gift'
-    | 'medal';
+    | 'medal'
+    | 'logout';
   size?: number;
 }>();
 </script>
@@ -340,6 +341,11 @@ defineProps<{
       <circle cx="12" cy="9" r="2.3" />
       <path d="m9.1 13.6-1.4 6.2 4.3-2.3 4.3 2.3-1.4-6.2" />
     </template>
+    <template v-else-if="name === 'logout'">
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <path d="M16 17l5-5-5-5" />
+      <path d="M21 12H9" />
+    </template>
   </svg>
 </template>
 

apps/web/src/layouts/AppLayout.vue

@@ -14,7 +14,7 @@ import type {
   NotificationsListDto,
 } from '@mento/shared';
 import { brand } from '@mento/shared';
-import { USER_ROLE_LABELS, canManageSettings, canViewAllRecords } from '@/lib/roles';
+import { canManageSettings, canViewAllRecords } from '@/lib/roles';
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -24,11 +24,12 @@ const canSettings = computed(() => canManageSettings(auth.user?.role));
 const showOwnRecordsBanner = computed(
   () => Boolean(auth.user?.role) && !canViewAllRecords(auth.user?.role),
 );
-const roleLabel = computed(() =>
-  auth.user?.role ? USER_ROLE_LABELS[auth.user.role] : '',
-);
 const todayLabel = computed(() => formatJalaliShort(new Date()));
 
+const SIDEBAR_KEY = 'mento_sidebar_collapsed';
+const collapsed = ref(false);
+const moreFlyout = ref(false);
+
 const salesOpen = ref(false);
 const moreOpen = ref(false);
 const settingsOpen = ref(false);
@@ -58,6 +59,21 @@ const salesActive = computed(() => pathIn(salesPaths));
 const moreActive = computed(() => pathIn(morePaths));
 const settingsActive = computed(() => pathIn(settingsPaths));
 const productsActive = computed(() => route.path.startsWith('/settings/products'));
+const extraActive = computed(() =>
+  pathIn([
+    '/quotes',
+    '/invoices',
+    '/sales/forecast',
+    '/notes',
+    '/tickets',
+    '/settings/automations',
+    '/settings/lead-forms',
+    '/settings/custom-fields',
+    '/settings/currencies',
+    '/settings/tahesab',
+    '/settings/faq',
+  ]) || moreActive.value,
+);
 
 watch(
   () => route.path,
@@ -88,6 +104,32 @@ 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 {
+    // ignore
+  }
+}
+
+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() {
@@ -189,24 +231,54 @@ watch(
 );
 
 onMounted(() => {
+  try {
+    collapsed.value = localStorage.getItem(SIDEBAR_KEY) === '1';
+  } catch {
+    collapsed.value = false;
+  }
   void refreshNotifs();
   void loadActivityBadge();
   pollTimer = setInterval(() => void refreshNotifs(), 45000);
+  document.addEventListener('click', onDocClick, true);
 });
 
 onUnmounted(() => {
   if (pollTimer) clearInterval(pollTimer);
+  document.removeEventListener('click', onDocClick, true);
   document.body.style.overflow = '';
 });
 </script>
 
 <template>
-  <div class="shell" :class="{ 'menu-open': menuOpen }">
+  <div class="shell" :class="{ 'menu-open': menuOpen, collapsed }">
     <div v-if="menuOpen" class="backdrop" aria-hidden="true" @click="closeMenu" />
 
-    <aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen }">
+    <aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen, collapsed }">
       <div class="brand-row">
-        <MentoLogo :size="40" />
+        <div class="brand-cluster">
+          <MentoLogo class="sidebar-logo" :size="32" />
+          <RouterLink
+            class="profile-card"
+            :to="{ name: 'profile' }"
+            :title="auth.user?.fullName || 'پروفایل'"
+            @click="closeMenu"
+          >
+            <span class="avatar-wrap">
+              <span class="avatar">
+                <img
+                  src="/brand/user-avatar.png"
+                  :alt="auth.user?.fullName || 'کاربر'"
+                  width="36"
+                  height="36"
+                />
+              </span>
+              <i class="online-dot" title="آنلاین" aria-hidden="true" />
+            </span>
+            <span class="profile-meta">
+              <strong>{{ auth.user?.fullName }}</strong>
+            </span>
+          </RouterLink>
+        </div>
         <button
           class="icon-btn ghost mobile-only"
           type="button"
@@ -217,23 +289,25 @@ onUnmounted(() => {
         </button>
       </div>
 
+      <div class="rail-stem">
       <nav class="side-nav">
         <div class="nav-primary">
-          <RouterLink to="/" class="nav-item" @click="closeMenu">
-            <UiIcon name="home" :size="18" />
+          <RouterLink to="/" class="nav-item" title="داشبورد" @click="closeMenu">
+            <UiIcon name="home" :size="collapsed ? 20 : 18" />
             <span>داشبورد</span>
           </RouterLink>
-          <RouterLink to="/contacts" class="nav-item" @click="closeMenu">
-            <UiIcon name="users" :size="18" />
+          <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" @click="closeMenu">
-            <UiIcon name="briefcase" :size="18" />
+          <RouterLink to="/pipeline" class="nav-item" title="معاملات" @click="closeMenu">
+            <UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
             <span>معاملات</span>
           </RouterLink>
           <RouterLink
             to="/activities"
             class="nav-item"
+            title="فعالیت‌ها"
             active-class=""
             exact-active-class=""
             :class="{
@@ -245,35 +319,51 @@ onUnmounted(() => {
             }"
             @click="closeMenu"
           >
-            <UiIcon name="check" :size="18" />
+            <UiIcon name="check" :size="collapsed ? 20 : 18" />
             <span>فعالیت‌ها</span>
             <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
           </RouterLink>
           <RouterLink
             to="/settings/products"
             class="nav-item"
+            title="محصولات"
             :class="{ 'router-link-active': productsActive }"
             @click="closeMenu"
           >
-            <UiIcon name="box" :size="18" />
+            <UiIcon name="box" :size="collapsed ? 20 : 18" />
             <span>محصولات</span>
           </RouterLink>
-          <RouterLink to="/reports" class="nav-item" @click="closeMenu">
-            <UiIcon name="chart" :size="18" />
+          <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="18" />
+            <UiIcon name="settings" :size="collapsed ? 20 : 18" />
             <span>تنظیمات</span>
           </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-group" :class="{ open: salesOpen, active: salesActive }">
           <button
             class="nav-group-btn"
@@ -344,24 +434,6 @@ onUnmounted(() => {
       </p>
 
       <div class="sidebar-foot">
-        <RouterLink
-          class="profile-card"
-          :to="{ name: 'profile' }"
-          @click="closeMenu"
-        >
-          <span class="avatar">
-            <img src="/brand/user-avatar.png" :alt="auth.user?.fullName || 'کاربر'" width="48" height="48" />
-          </span>
-          <div class="profile-meta">
-            <strong>{{ auth.user?.fullName }}</strong>
-            <span>{{ roleLabel || 'کاربر' }}</span>
-            <span class="online-label">
-              <i class="online-dot" />
-              آنلاین
-            </span>
-          </div>
-        </RouterLink>
-
         <div class="promo-card">
           <span class="promo-icons" aria-hidden="true">
             <UiIcon name="send" :size="20" />
@@ -373,7 +445,45 @@ onUnmounted(() => {
           </p>
         </div>
 
-        <button class="logout-link" type="button" @click="onLogout">خروج از حساب</button>
+        <button class="logout-link" type="button" title="خروج از حساب" @click="onLogout">
+          <UiIcon name="logout" :size="18" />
+          <span>خروج از حساب</span>
+        </button>
+        <button
+          class="collapse-btn desktop-only"
+          type="button"
+          :aria-pressed="collapsed"
+          :aria-label="collapsed ? 'باز کردن منو' : 'جمع کردن منو'"
+          @click="toggleCollapsed"
+        >
+          <UiIcon name="chevron" :size="16" />
+        </button>
+      </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="/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/automations" @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>
+        </template>
       </div>
     </aside>
 
@@ -469,18 +579,24 @@ onUnmounted(() => {
 
 <style scoped>
 .shell {
+  --sidebar-card: 220px;
+  --sidebar-gutter-start: 14px;
+  --sidebar-gutter-end: 10px;
   display: grid;
-  grid-template-columns: 268px minmax(0, 1fr);
+  grid-template-columns: calc(var(--sidebar-card) + var(--sidebar-gutter-start) + var(--sidebar-gutter-end)) minmax(0, 1fr);
   min-height: 100vh;
   min-height: 100dvh;
   background: #eef2f6;
   gap: 0;
+  transition: grid-template-columns 0.2s ease;
 }
 
 .workspace {
   min-width: 0;
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: 1;
 }
 
 .backdrop,
@@ -502,7 +618,7 @@ onUnmounted(() => {
   background: #fff;
   border: 0;
   border-radius: 28px;
-  padding: 1.55rem 1.05rem 1.2rem;
+  padding: 0.35rem 0.85rem 1.1rem;
   display: flex;
   flex-direction: column;
   gap: 1.35rem;
@@ -511,15 +627,47 @@ onUnmounted(() => {
   box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
 }
 
+.rail-stem {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: inherit;
+}
+
 .brand-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.15rem 0.45rem 0.35rem;
+  gap: 0.45rem;
+  padding: 0.1rem 0.2rem 0.2rem;
   flex-shrink: 0;
 }
 
+.brand-cluster {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.brand-cluster :deep(.brand-logo.full) {
+  gap: 0.35rem;
+  min-width: 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;
+}
+
 .side-nav {
   display: grid;
   gap: 0.45rem;
@@ -660,13 +808,17 @@ onUnmounted(() => {
 
 .profile-card {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.85rem 0.9rem;
-  border-radius: 18px;
-  background: #f8fafc;
+  gap: 0.22rem;
+  padding: 0.15rem 0.2rem;
+  border-radius: 12px;
+  background: transparent;
   color: inherit;
+  text-decoration: none;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 4.8rem;
 }
 
 .profile-card:hover {
@@ -677,14 +829,20 @@ onUnmounted(() => {
   background: #ecfdf5;
 }
 
-.avatar {
+.avatar-wrap {
   position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 999px;
+  width: 36px;
+  height: 36px;
   flex-shrink: 0;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
   overflow: hidden;
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
+  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
+  display: block;
 }
 
 .avatar img {
@@ -696,39 +854,30 @@ onUnmounted(() => {
 
 .profile-meta {
   min-width: 0;
-  flex: 1;
+  width: 100%;
   display: grid;
-  gap: 0.12rem;
-  text-align: right;
+  text-align: center;
 }
 
 .profile-meta strong {
-  font-size: 0.9rem;
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.profile-meta > span {
-  color: #94a3b8;
-  font-size: 0.76rem;
-}
-
-.online-label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.35rem;
-  color: #64748b !important;
-  font-size: 0.74rem !important;
-}
-
 .online-dot {
-  width: 8px;
-  height: 8px;
+  position: absolute;
+  bottom: 0;
+  inset-inline-start: 0;
+  width: 10px;
+  height: 10px;
   border-radius: 999px;
   background: #22c55e;
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
+  border: 2px solid #fff;
+  box-sizing: border-box;
 }
 
 .promo-card {
@@ -768,6 +917,9 @@ onUnmounted(() => {
 }
 
 .logout-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   border: 0;
   background: transparent;
   color: #94a3b8;
@@ -778,13 +930,311 @@ onUnmounted(() => {
   padding: 0 0.45rem 0.15rem;
 }
 
+.collapse-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  width: 100%;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #64748b;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 700;
+  cursor: pointer;
+  border-radius: 12px;
+  min-height: 36px;
+  padding: 0.35rem 0.5rem;
+}
+
+.collapse-btn :deep(.ico) {
+  transition: transform 0.15s ease;
+  transform: scaleX(-1);
+}
+
+.more-btn {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.more-flyout {
+  position: absolute;
+  top: 4.6rem;
+  inset-inline-start: calc(100% + 8px);
+  inset-inline-end: auto;
+  width: 13.5rem;
+  max-height: min(70vh, 28rem);
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #e8eef3;
+  border-radius: 16px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
+  padding: 0.55rem;
+  display: grid;
+  gap: 0.15rem;
+  z-index: 40;
+}
+
+.more-flyout p {
+  margin: 0.35rem 0 0.15rem;
+  padding: 0 0.55rem;
+  color: #94a3b8;
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.more-flyout p:first-child {
+  margin-top: 0;
+}
+
+.more-flyout a {
+  display: block;
+  padding: 0.48rem 0.55rem;
+  border-radius: 10px;
+  color: #334155;
+  text-decoration: none;
+  font-size: 0.84rem;
+}
+
+.more-flyout a.router-link-active {
+  background: #ecfdf8;
+  color: #0f766e;
+  font-weight: 700;
+}
+
+@media (min-width: 901px) {
+  .shell.collapsed {
+    grid-template-columns: 80px minmax(0, 1fr);
+  }
+
+  .sidebar.collapsed {
+    width: 64px;
+    margin-inline: 8px;
+    padding: 0;
+    gap: 0;
+    align-items: flex-start;
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    z-index: 24;
+  }
+
+  .sidebar.collapsed .brand-row {
+    width: max-content;
+    max-width: none;
+    height: 49px;
+    box-sizing: border-box;
+    align-self: flex-start;
+    align-items: center;
+    justify-content: flex-start;
+    z-index: 3;
+    padding: 0.25rem 0.55rem;
+    background: #fff;
+    border-radius: 18px;
+    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
+  }
+
+  .sidebar.collapsed .brand-cluster {
+    flex: 0 0 auto;
+    width: max-content;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .sidebar.collapsed .sidebar-logo,
+  .sidebar.collapsed .brand-cluster :deep(.brand-logo) {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .sidebar.collapsed .brand-cluster :deep(.mark) {
+    width: 28px !important;
+    height: 28px !important;
+  }
+
+  .sidebar.collapsed .brand-cluster :deep(.text strong) {
+    font-size: 0.82rem;
+    line-height: 1.05;
+  }
+
+  .sidebar.collapsed .brand-cluster :deep(.text small) {
+    font-size: 0.58rem;
+    line-height: 1;
+  }
+
+  .sidebar.collapsed .profile-card {
+    flex-direction: column;
+    align-items: center;
+    max-width: 4.8rem;
+    flex: 0 0 auto;
+    gap: 0.05rem;
+    padding: 0;
+  }
+
+  .sidebar.collapsed .profile-meta {
+    text-align: center;
+  }
+
+  .sidebar.collapsed .profile-meta strong {
+    font-size: 0.62rem;
+    line-height: 1.1;
+    white-space: nowrap;
+  }
+
+  .sidebar.collapsed .avatar-wrap,
+  .sidebar.collapsed .avatar {
+    width: 28px;
+    height: 28px;
+  }
+
+  .sidebar.collapsed .online-dot {
+    width: 8px;
+    height: 8px;
+    border-width: 1.5px;
+  }
+
+  .shell.collapsed .desktop-topbar {
+    padding-inline-start: 8rem;
+  }
+
+  .shell.collapsed .global-search {
+    margin-inline-start: 0;
+  }
+
+  .sidebar.collapsed .rail-stem {
+    width: 64px;
+    align-self: flex-start;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+    margin-top: 8px;
+    padding: 0.7rem 0.2rem 0.3rem;
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
+    gap: 0.1rem;
+    z-index: 1;
+  }
+
+  .sidebar.collapsed .side-nav {
+    overflow-x: hidden;
+    overflow-y: auto;
+    min-height: 0;
+    flex: 1 1 0;
+    gap: 0.08rem;
+    padding-inline: 0;
+    scrollbar-width: none;
+  }
+
+  .sidebar.collapsed .nav-primary,
+  .sidebar.collapsed .nav-more {
+    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-item {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    min-height: 42px;
+    height: 42px;
+    padding: 0;
+    border-radius: 12px;
+    position: relative;
+  }
+
+  .sidebar.collapsed .nav-item :deep(.ico) {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  .sidebar.collapsed .nav-item > span:not(.nav-badge) {
+    display: none;
+  }
+
+  .sidebar.collapsed .nav-item.router-link-active {
+    background: #d8faf3;
+    color: #0f766e;
+  }
+
+  .sidebar.collapsed .nav-badge {
+    position: absolute;
+    top: 0.18rem;
+    inset-inline-end: 0.1rem;
+    margin: 0;
+    min-width: 0.95rem;
+    height: 0.95rem;
+    font-size: 0.58rem;
+  }
+
+  .sidebar.collapsed .nav-group,
+  .sidebar.collapsed .promo-card,
+  .sidebar.collapsed .scope-banner {
+    display: none;
+  }
+
+  .sidebar.collapsed .sidebar-foot {
+    margin-top: 0.15rem;
+    padding-top: 0;
+    gap: 0.1rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar.collapsed .logout-link {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    min-height: 42px;
+    padding: 0;
+    border-radius: 12px;
+    color: #94a3b8;
+  }
+
+  .sidebar.collapsed .logout-link:hover {
+    background: #f8fafc;
+    color: #0f172a;
+  }
+
+  .sidebar.collapsed .logout-link span {
+    display: none;
+  }
+
+  .sidebar.collapsed .collapse-btn {
+    min-height: 32px;
+    font-size: 0.7rem;
+    padding: 0.15rem;
+    border-radius: 10px;
+  }
+
+  .sidebar.collapsed .collapse-btn :deep(.ico) {
+    transform: none;
+  }
+}
+
 .global-search {
   width: min(100%, 420px);
   max-width: 420px;
+  min-width: 0;
   justify-self: start;
-  /* هم‌تراز با عنوان هیرو: padding هیرو + آواتار خوش‌آمد + فاصله */
-  margin-inline-start: calc(1.4rem + 48px + 0.8rem);
-  margin-inline-end: 0;
+  margin: 0;
   display: flex;
   align-items: center;
   gap: 0.7rem;
@@ -793,6 +1243,7 @@ onUnmounted(() => {
   padding: 0.7rem 1.05rem;
   border: 1px solid transparent;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  box-sizing: border-box;
 }
 
 .desktop-topbar {
@@ -800,6 +1251,7 @@ onUnmounted(() => {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: start;
   gap: 1rem;
+  min-width: 0;
   /* همان فاصله بالای سایدبار شناور (14px) */
   padding: 14px 1.5rem 0.85rem;
   position: sticky;
@@ -813,6 +1265,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
   /* مرکز عمودی نسبت به ارتفاع جستجو (~49px) */
   min-height: 49px;
 }
@@ -827,6 +1280,7 @@ onUnmounted(() => {
   border: 0;
   background: transparent;
   width: 100%;
+  min-width: 0;
   outline: none;
   font-size: 0.92rem;
   color: #0f172a;
@@ -1004,6 +1458,14 @@ onUnmounted(() => {
   .content {
     padding-inline: 1rem;
   }
+
+  .desktop-topbar {
+    padding-inline: 1rem;
+  }
+
+  .global-search kbd {
+    display: none;
+  }
 }
 
 .burger {