Move manager navigation to bottom dock

app/app.vue

@@ -1,15 +1,27 @@
 <script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import { MeDocument } from '~/composables/graphql/generated';
+import { hasManagerAccess } from '~/utils/roles';
+
 const route = useRoute();
 const isLoginPage = computed(() => route.path === '/login');
+const meQuery = useQuery(MeDocument);
+const hasManagerDock = computed(() => (
+  !isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
+));
 </script>
 
 <template>
   <div class="lk-shell" data-theme="aqua">
     <UiAppHeader v-if="!isLoginPage" />
-    <main class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]">
+    <main
+      class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]"
+      :class="hasManagerDock ? 'pb-[116px] md:pb-[128px]' : ''"
+    >
       <div class="lk-content-canvas">
         <NuxtPage />
       </div>
     </main>
+    <UiAppManagerDock v-if="hasManagerDock" />
   </div>
 </template>

app/assets/css/main.css

@@ -231,6 +231,73 @@ body {
   color: #557562;
 }
 
+.manager-dock-shell {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 45;
+  display: flex;
+  justify-content: center;
+  padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
+  pointer-events: none;
+}
+
+.manager-dock {
+  pointer-events: auto;
+  display: grid;
+  width: min(100%, 26rem);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+  border-radius: 1.75rem;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow:
+    0 18px 40px rgba(18, 56, 36, 0.14),
+    0 4px 12px rgba(18, 56, 36, 0.08);
+  padding: 0.65rem;
+  -webkit-backdrop-filter: blur(18px) saturate(180%);
+  backdrop-filter: blur(18px) saturate(180%);
+}
+
+.manager-dock__item {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  border-radius: 1.2rem;
+  padding: 0.85rem 0.6rem;
+  color: #5e7a69;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    transform 0.18s ease;
+}
+
+.manager-dock__item:hover {
+  background: #f3faf6;
+  color: #123824;
+}
+
+.manager-dock__item--active {
+  background: #123824;
+  color: #fff;
+  transform: translateY(-1px);
+}
+
+.manager-dock__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.manager-dock__label {
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  text-align: center;
+}
+
 .fregat-header-glass {
   background: transparent;
 }

app/components/ui/AppHeader.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable';
-import { MeDocument } from '~/composables/graphql/generated';
-import { hasManagerAccess } from '~/utils/roles';
-
 type NavItem = {
   to: string;
   label: string;
@@ -10,24 +6,10 @@ type NavItem = {
 
 const route = useRoute();
 const { totalItems } = useClientCart();
-const meQuery = useQuery(MeDocument);
+const centerCapsule: NavItem[] = [
-
-const centerCapsule = computed<NavItem[]>(() => {
-  const items: NavItem[] = [
   { to: '/', label: 'Каталог' },
   { to: '/orders', label: 'Мои заказы' },
-  ];
+];
-
-  if (hasManagerAccess(meQuery.result.value?.me?.role)) {
-    items.push(
-      { to: '/clients', label: 'Пользователи' },
-      { to: '/client-orders', label: 'Заказы' },
-      { to: '/bonus-system', label: 'Бонусы' },
-    );
-  }
-
-  return items;
-});
 
 const rightCapsule: NavItem[] = [
   { to: '/cart', label: 'Корзина' },

app/components/ui/AppManagerDock.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+type DockItem = {
+  to: string;
+  label: string;
+  icon: 'orders' | 'clients' | 'bonus';
+};
+
+const route = useRoute();
+
+const dockItems: DockItem[] = [
+  { to: '/client-orders', label: 'Заказы', icon: 'orders' },
+  { to: '/clients', label: 'Клиенты', icon: 'clients' },
+  { to: '/bonus-system', label: 'Бонусы', icon: 'bonus' },
+];
+
+function isActive(path: string) {
+  if (path === '/client-orders') {
+    return route.path === '/client-orders' || route.path.startsWith('/client-orders/');
+  }
+  if (path === '/clients') {
+    return route.path === '/clients' || route.path.startsWith('/clients/');
+  }
+  if (path === '/bonus-system') {
+    return route.path === '/bonus-system' || route.path.startsWith('/bonus-system/');
+  }
+  return route.path === path;
+}
+</script>
+
+<template>
+  <nav class="manager-dock-shell" aria-label="Навигация менеджера">
+    <div class="manager-dock">
+      <NuxtLink
+        v-for="item in dockItems"
+        :key="item.to"
+        :to="item.to"
+        class="manager-dock__item"
+        :class="{ 'manager-dock__item--active': isActive(item.to) }"
+      >
+        <span class="manager-dock__icon" aria-hidden="true">
+          <svg v-if="item.icon === 'orders'" viewBox="0 0 24 24" fill="none" class="h-5 w-5">
+            <path d="M7 6.75H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+            <path d="M7 12H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+            <path d="M7 17.25H13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+            <rect x="4" y="4" width="16" height="16" rx="4" stroke="currentColor" stroke-width="1.8" />
+          </svg>
+          <svg v-else-if="item.icon === 'clients'" viewBox="0 0 24 24" fill="none" class="h-5 w-5">
+            <path d="M8.5 11.25C10.0188 11.25 11.25 10.0188 11.25 8.5C11.25 6.98122 10.0188 5.75 8.5 5.75C6.98122 5.75 5.75 6.98122 5.75 8.5C5.75 10.0188 6.98122 11.25 8.5 11.25Z" stroke="currentColor" stroke-width="1.8" />
+            <path d="M15.75 10.25C16.9926 10.25 18 9.24264 18 8C18 6.75736 16.9926 5.75 15.75 5.75" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+            <path d="M4.75 17.5C5.45774 15.4578 7.39669 14 9.75 14H10.25C12.6033 14 14.5423 15.4578 15.25 17.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+            <path d="M15.5 14.5C17.0401 14.7577 18.3497 15.7812 18.95 17.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+          </svg>
+          <svg v-else viewBox="0 0 24 24" fill="none" class="h-5 w-5">
+            <path d="M12 4.75L14.2401 9.28984L19.25 10.0172L15.625 13.5504L16.4802 18.5398L12 16.1848L7.51983 18.5398L8.375 13.5504L4.75 10.0172L9.75987 9.28984L12 4.75Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
+          </svg>
+        </span>
+        <span class="manager-dock__label">{{ item.label }}</span>
+      </NuxtLink>
+    </div>
+  </nav>
+</template>