feat(ui): align top navigation capsules with GL glass header
This commit is contained in:
Ruslan Bakiev
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user