From 42a90cd2dcb62a6a6e6f9c35eac390190c4c3eaa Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 2 Apr 2026 16:56:20 +0700
Subject: [PATCH] feat(ui): align top navigation capsules with GL glass header

---
 app/app.vue                     |   2 +-
 app/assets/css/main.css         | 118 +++++++++++++++++++++++++++++---
 app/components/ui/AppHeader.vue |  37 +++++-----
 3 files changed, 127 insertions(+), 30 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 61d6682..1599eec 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -6,7 +6,7 @@ const isLoginPage = computed(() => route.path === '/login');
 <template>
   <div class="lk-shell" data-theme="aqua">
     <AppHeader v-if="!isLoginPage" />
-    <main class="mx-auto w-full max-w-7xl p-4 md:p-6 lg:p-8">
+    <main class="mx-auto w-full max-w-7xl p-4 pt-[92px] md:p-6 md:pt-[96px] lg:p-8 lg:pt-[96px]">
       <NuxtPage />
     </main>
   </div>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 0c7fdd4..c88d492 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -69,27 +69,123 @@ body {
   box-shadow: 0 20px 48px color-mix(in oklab, var(--color-primary) 14%, transparent);
 }
 
-.glass-capsule {
-  border: 1px solid rgba(255, 255, 255, 0.42);
-  background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
-  backdrop-filter: blur(10px);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+.fregat-header-glass {
+  background: transparent;
+}
+
+.fregat-header-backdrop {
+  position: absolute;
+  inset: 0;
+  height: 300%;
+  background: rgba(255, 255, 255, 0.06);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 22%, rgba(0, 0, 0, 0.35) 46%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 0%, black 22%, rgba(0, 0, 0, 0.35) 46%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.fregat-header-row {
+  gap: 0.5rem;
+  --fregat-pill-shell-px: 0.5rem;
+  --fregat-pill-shell-py: 0.5rem;
+}
+
+.fregat-pill-shell {
+  padding-inline: var(--fregat-pill-shell-px);
+  padding-block: var(--fregat-pill-shell-py);
+}
+
+.fregat-pill-glass {
+  position: relative;
+  isolation: isolate;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  backdrop-filter: blur(20px) saturate(180%);
+  box-shadow:
+    0 8px 32px rgba(31, 38, 135, 0.16),
+    inset 0 4px 20px rgba(255, 255, 255, 0.2);
+}
+
+.fregat-pill-glass::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  background: rgba(255, 255, 255, 0.12);
+  box-shadow:
+    inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
+    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
+  opacity: 0.35;
+  filter: blur(1px) brightness(112%);
+  pointer-events: none;
+}
+
+.fregat-pill-glass > * {
+  position: relative;
+  z-index: 1;
+}
+
+.fregat-pill-left,
+.fregat-pill-right {
+  flex: 0 0 auto;
+}
+
+.fregat-pill-center {
+  min-width: 0;
 }
 
 .lk-nav-link {
   @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200;
-  color: rgba(255, 255, 255, 0.85);
+  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
 }
 
 .lk-nav-link:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
+  background: rgba(255, 255, 255, 0.44);
+  color: var(--color-base-content);
 }
 
 .lk-nav-link-active {
-  background: #ffffff;
-  color: var(--brand-primary-deep);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
+  background: color-mix(in oklab, var(--color-primary) 86%, white);
+  color: var(--color-primary-content);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11);
+}
+
+@media (min-width: 1024px) {
+  .fregat-header-row {
+    min-height: 3rem;
+    --fregat-pill-shell-px: 0.75rem;
+  }
+
+  .fregat-pill-brand,
+  .fregat-pill-left,
+  .fregat-pill-center,
+  .fregat-pill-right {
+    position: absolute;
+    top: 0;
+  }
+
+  .fregat-pill-brand {
+    left: 0;
+  }
+
+  .fregat-pill-left {
+    left: 7.25rem;
+  }
+
+  .fregat-pill-center {
+    left: 50%;
+    width: max-content;
+    max-width: min(58vw, 900px);
+    transform: translateX(-50%);
+  }
+
+  .fregat-pill-right {
+    right: 0;
+  }
 }
 
 .product-card-anim {
diff --git a/app/components/ui/AppHeader.vue b/app/components/ui/AppHeader.vue
index 1ade4f3..a3c7384 100644
--- a/app/components/ui/AppHeader.vue
+++ b/app/components/ui/AppHeader.vue
@@ -9,7 +9,6 @@ const route = useRoute();
 
 const leftCapsule: NavItem[] = [
   { to: '/profile', label: 'Профиль', icon: 'user' },
-  { to: '/notifications', label: 'Каналы', icon: 'bell' },
 ];
 
 const centerCapsule: NavItem[] = [
@@ -22,39 +21,41 @@ const rightCapsule: NavItem[] = [
 ];
 
 function isActive(path: string) {
+  if (path === '/orders') {
+    return route.path === '/orders' || route.path.startsWith('/orders/');
+  }
   return route.path === path;
 }
 </script>
 
 <template>
-  <header class="sticky top-0 z-20 border-b border-white/35 bg-[#0d854a]/90 backdrop-blur-xl">
-    <div class="mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:px-6">
-      <div class="flex items-center justify-between">
-        <NuxtLink to="/" class="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm font-bold text-white">
-          <span class="h-2.5 w-2.5 rounded-full bg-[#ff5600]" />
-          Fregat LK
-        </NuxtLink>
-      </div>
+  <header class="fregat-header-glass fixed inset-x-0 top-0 z-50 border-0">
+    <div class="fregat-header-backdrop" aria-hidden="true" />
 
-      <nav class="flex flex-wrap items-center justify-between gap-2 md:flex-nowrap md:gap-4">
-        <div class="glass-capsule flex w-full items-center gap-1 rounded-full p-1 md:w-auto">
+    <div class="relative mx-auto max-w-[2200px] px-4 py-2 md:px-6">
+      <div class="fregat-header-row relative flex min-h-[3rem] items-center">
+        <NuxtLink
+          to="/"
+          class="fregat-pill-glass fregat-pill-shell fregat-pill-brand hidden items-center rounded-full px-4 py-2 text-sm font-extrabold text-base-content lg:inline-flex"
+        >
+          Fregat
+        </NuxtLink>
+
+        <div class="fregat-pill-glass fregat-pill-shell fregat-pill-left flex min-w-0 items-center gap-1 rounded-full p-1 lg:absolute lg:left-0 lg:w-auto">
           <NuxtLink
             v-for="item in leftCapsule"
             :key="item.to"
             :to="item.to"
             :class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
           >
-            <svg v-if="item.icon === 'user'" class="h-4 w-4" viewBox="0 0 24 24" fill="none">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none">
               <path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" fill="currentColor" />
             </svg>
-            <svg v-else class="h-4 w-4" viewBox="0 0 24 24" fill="none">
-              <path d="M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z" fill="currentColor" />
-            </svg>
             {{ item.label }}
           </NuxtLink>
         </div>
 
-        <div class="glass-capsule flex w-full items-center gap-1 rounded-full p-1 md:w-auto">
+        <div class="fregat-pill-glass fregat-pill-shell fregat-pill-center flex min-w-0 flex-1 items-center gap-1 rounded-full p-1 lg:absolute lg:left-1/2 lg:w-auto lg:-translate-x-1/2">
           <NuxtLink
             v-for="item in centerCapsule"
             :key="item.to"
@@ -71,7 +72,7 @@ function isActive(path: string) {
           </NuxtLink>
         </div>
 
-        <div class="glass-capsule flex w-full items-center gap-1 rounded-full p-1 md:w-auto">
+        <div class="fregat-pill-glass fregat-pill-shell fregat-pill-right flex min-w-0 items-center gap-1 rounded-full p-1 lg:absolute lg:right-0 lg:w-auto">
           <NuxtLink
             v-for="item in rightCapsule"
             :key="item.to"
@@ -84,7 +85,7 @@ function isActive(path: string) {
             {{ item.label }}
           </NuxtLink>
         </div>
-      </nav>
+      </div>
     </div>
   </header>
 </template>