SMS0098

src/layouts/AdminLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <AppShell>
     <header
-      class="sticky top-0 z-10 flex items-center justify-between border-b border-brand-500/30 bg-surface/95 px-4 py-3 backdrop-blur"
+      class="sticky top-0 z-10 flex items-center justify-between border-b border-brand-500/30 bg-surface/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-surface/80"
     >
       <RouterLink :to="{ name: 'dashboard' }" class="min-w-0">
         <p class="font-bold text-text">منتایم</p>
@@ -26,17 +26,19 @@
       </div>
     </header>
 
-    <main class="flex-1 space-y-4 px-4 py-4">
+    <main class="flex-1 space-y-4 px-4 py-4 pb-6">
       <slot />
     </main>
 
-    <nav class="sticky bottom-0 border-t border-border bg-surface/95 px-1 py-2">
-      <div class="grid grid-cols-3 gap-0.5 sm:grid-cols-6">
+    <nav
+      class="sticky bottom-0 z-10 shrink-0 border-t border-border bg-surface/95 px-1 py-2 backdrop-blur supports-[backdrop-filter]:bg-surface/80"
+    >
+      <div class="flex gap-0.5">
         <RouterLink
           v-for="item in items"
           :key="item.to"
           :to="item.to"
-          class="flex flex-col items-center rounded-xl py-1.5 text-[9px] leading-tight sm:py-2 sm:text-xs"
+          class="flex min-w-0 flex-1 flex-col items-center rounded-xl px-0.5 py-1.5 text-[9px] leading-tight sm:py-2 sm:text-xs"
           :class="
             route.name === item.name
               ? 'bg-brand-500/15 text-brand-700 dark:text-brand-500'
@@ -44,7 +46,7 @@
           "
         >
           <span class="text-base sm:text-lg">{{ item.icon }}</span>
-          {{ item.label }}
+          <span class="w-full truncate text-center">{{ item.label }}</span>
         </RouterLink>
       </div>
     </nav>