Tighten sidebar chrome: hide nav scrollbar, icon notifications, compact user row.

Move alerts next to the brand and merge name with role to free foot space.

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

apps/web/src/layouts/AppLayout.vue

@@ -221,12 +221,23 @@ onUnmounted(() => {
     />
 
     <aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen }">
-      <div class="brand desktop-only">
-        <span class="mark">M</span>
-        <div>
-          <strong>منتو</strong>
-          <small>Mento CRM</small>
+      <div class="brand-row desktop-only">
+        <div class="brand">
+          <span class="mark">M</span>
+          <div>
+            <strong>منتو</strong>
+            <small>Mento CRM</small>
+          </div>
         </div>
+        <button
+          class="notif-icon-btn"
+          type="button"
+          aria-label="اعلان‌ها"
+          @click="toggleNotif"
+        >
+          <span class="bell" aria-hidden="true" />
+          <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
+        </button>
       </div>
 
       <div class="drawer-head mobile-only">
@@ -332,14 +343,10 @@ onUnmounted(() => {
       </p>
 
       <div class="sidebar-foot">
-        <div class="notif-wrap desktop-only">
-          <button class="notif-btn" type="button" @click="toggleNotif">
-            اعلان‌ها
-            <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
-          </button>
-        </div>
-        <p>{{ auth.user?.fullName }}</p>
-        <p v-if="roleLabel" class="role-line">{{ roleLabel }}</p>
+        <p class="user-line">
+          <span class="user-name">{{ auth.user?.fullName }}</span>
+          <span v-if="roleLabel" class="role-pill">{{ roleLabel }}</span>
+        </p>
         <button class="btn btn-ghost logout" type="button" @click="onLogout">خروج</button>
       </div>
     </aside>
@@ -421,10 +428,18 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
+.brand-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
 .brand {
   display: flex;
   align-items: center;
   gap: 0.8rem;
+  min-width: 0;
 }
 
 .mark {
@@ -443,6 +458,69 @@ onUnmounted(() => {
   color: #9fb3aa;
 }
 
+.notif-icon-btn {
+  position: relative;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  color: #edf5f1;
+  padding: 0;
+}
+
+.notif-icon-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.bell {
+  width: 16px;
+  height: 16px;
+  border: 1.7px solid currentColor;
+  border-radius: 50% 50% 45% 45%;
+  border-bottom: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.bell::before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: 50%;
+  width: 4px;
+  height: 4px;
+  border: 1.5px solid currentColor;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+}
+
+.bell::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  width: 10px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 2px;
+  transform: translateX(-50%);
+}
+
+.notif-icon-btn .badge {
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  font-size: 0.68rem;
+}
+
 nav,
 .side-nav {
   display: grid;
@@ -452,6 +530,14 @@ nav,
   flex: 1;
   padding-left: 0.15rem;
   margin-left: -0.15rem;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.side-nav::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
 }
 
 .nav-primary,
@@ -556,17 +642,36 @@ nav a.router-link-active {
 .sidebar-foot {
   margin-top: auto;
   display: grid;
-  gap: 0.75rem;
+  gap: 0.65rem;
 }
 
-.sidebar-foot p {
+.user-line {
   margin: 0;
-  color: #b7c8c0;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+  min-width: 0;
 }
 
-.role-line {
-  font-size: 0.8rem;
-  color: #8fa399 !important;
+.user-name {
+  color: #d7e4de;
+  font-size: 0.92rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.role-pill {
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  color: #9fb3aa;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  padding: 0.12rem 0.45rem;
+  line-height: 1.3;
 }
 
 .logout {
@@ -574,20 +679,6 @@ nav a.router-link-active {
   border-color: rgba(255, 255, 255, 0.18);
 }
 
-.notif-btn {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.06);
-  color: #edf5f1;
-  border-radius: 10px;
-  padding: 0.65rem 0.85rem;
-  cursor: pointer;
-  font: inherit;
-}
-
 .badge {
   min-width: 1.4rem;
   height: 1.4rem;