Match GL capsule navbar and simplify canvas/card layering
This commit is contained in:
Ruslan Bakiev
@@ -6,7 +6,7 @@ const isLoginPage = computed(() => route.path === '/login');
|
|||||||
<template>
|
<template>
|
||||||
<div class="lk-shell" data-theme="aqua">
|
<div class="lk-shell" data-theme="aqua">
|
||||||
<UiAppHeader v-if="!isLoginPage" />
|
<UiAppHeader v-if="!isLoginPage" />
|
||||||
<main class="mx-auto w-full max-w-[1440px] p-4 pt-[92px] md:p-6 md:pt-[96px] lg:p-8 lg:pt-[96px]">
|
<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]">
|
||||||
<div class="lk-content-canvas">
|
<div class="lk-content-canvas">
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -94,24 +94,19 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.lk-content-canvas {
|
.lk-content-canvas {
|
||||||
border: 1px solid rgba(255, 255, 255, 0.52);
|
border: 0;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
background:
|
background: color-mix(in oklab, var(--color-base-200) 78%, white);
|
||||||
linear-gradient(160deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.36));
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 22px 60px rgba(16, 73, 44, 0.16),
|
0 22px 60px rgba(16, 73, 44, 0.12),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||||||
-webkit-backdrop-filter: blur(16px) saturate(170%);
|
|
||||||
backdrop-filter: blur(16px) saturate(170%);
|
|
||||||
padding: clamp(1rem, 1.2vw, 1.5rem);
|
padding: clamp(1rem, 1.2vw, 1.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.surface-card {
|
.surface-card {
|
||||||
border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, white);
|
border: 0;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: #fff;
|
||||||
box-shadow:
|
box-shadow: 0 14px 32px rgba(24, 66, 44, 0.08);
|
||||||
0 16px 36px rgba(24, 66, 44, 0.1),
|
|
||||||
0 1px 0 rgba(255, 255, 255, 0.62) inset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fregat-header-glass {
|
.fregat-header-glass {
|
||||||
@@ -134,7 +129,8 @@ body {
|
|||||||
.fregat-header-row {
|
.fregat-header-row {
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
--fregat-pill-shell-px: 0.5rem;
|
--fregat-pill-shell-px: 0.5rem;
|
||||||
--fregat-pill-shell-py: 0.5rem;
|
--fregat-pill-shell-py: 0.625rem;
|
||||||
|
min-height: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fregat-pill-shell {
|
.fregat-pill-shell {
|
||||||
@@ -189,6 +185,12 @@ body {
|
|||||||
.lk-nav-link {
|
.lk-nav-link {
|
||||||
@apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200;
|
@apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200;
|
||||||
color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
|
color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lk-pill-divider {
|
||||||
|
background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
|
||||||
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lk-nav-link:hover {
|
.lk-nav-link:hover {
|
||||||
@@ -204,8 +206,9 @@ body {
|
|||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.fregat-header-row {
|
.fregat-header-row {
|
||||||
min-height: 3rem;
|
min-height: 3.75rem;
|
||||||
--fregat-pill-shell-px: 0.75rem;
|
--fregat-pill-shell-px: 0.875rem;
|
||||||
|
--fregat-pill-shell-py: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fregat-pill-brand,
|
.fregat-pill-brand,
|
||||||
@@ -222,7 +225,7 @@ body {
|
|||||||
.fregat-pill-center {
|
.fregat-pill-center {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
max-width: min(54vw, 900px);
|
max-width: min(62vw, 1020px);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -233,12 +236,12 @@ body {
|
|||||||
|
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
.fregat-pill-brand {
|
.fregat-pill-brand {
|
||||||
padding-inline: 0.75rem;
|
padding-inline: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lk-nav-link {
|
.lk-nav-link {
|
||||||
padding-inline: 0.7rem;
|
padding-inline: 0.8rem;
|
||||||
padding-block: 0.5rem;
|
padding-block: 0.55rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,20 +2,19 @@
|
|||||||
type NavItem = {
|
type NavItem = {
|
||||||
to: string;
|
to: string;
|
||||||
label: string;
|
label: string;
|
||||||
icon: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { totalItems } = useClientCart();
|
const { totalItems } = useClientCart();
|
||||||
|
|
||||||
const centerCapsule: NavItem[] = [
|
const centerCapsule: NavItem[] = [
|
||||||
{ to: '/products', label: 'Каталог', icon: 'grid' },
|
{ to: '/products', label: 'Каталог' },
|
||||||
{ to: '/orders', label: 'Мои заказы', icon: 'stack' },
|
{ to: '/orders', label: 'Мои заказы' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const rightCapsule: NavItem[] = [
|
const rightCapsule: NavItem[] = [
|
||||||
{ to: '/cart', label: 'Корзина', icon: 'cart' },
|
{ to: '/cart', label: 'Корзина' },
|
||||||
{ to: '/profile', label: 'Профиль', icon: 'user' },
|
{ to: '/profile', label: 'Профиль' },
|
||||||
];
|
];
|
||||||
|
|
||||||
function isActive(path: string) {
|
function isActive(path: string) {
|
||||||
@@ -30,52 +29,52 @@ function isActive(path: string) {
|
|||||||
<header class="fregat-header-glass fixed inset-x-0 top-0 z-50 border-0">
|
<header class="fregat-header-glass fixed inset-x-0 top-0 z-50 border-0">
|
||||||
<div class="fregat-header-backdrop" aria-hidden="true" />
|
<div class="fregat-header-backdrop" aria-hidden="true" />
|
||||||
|
|
||||||
<div class="relative mx-auto max-w-[2200px] px-4 py-2 md:px-6">
|
<div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
|
||||||
<div class="fregat-header-row relative flex min-h-[3rem] items-center">
|
<div class="fregat-header-row relative flex items-center">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/"
|
to="/"
|
||||||
class="fregat-pill-glass fregat-pill-shell fregat-pill-brand inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-extrabold text-base-content"
|
class="fregat-pill-glass fregat-pill-shell fregat-pill-brand inline-flex items-center justify-center rounded-full px-5 text-base font-extrabold tracking-[0.03em] text-base-content"
|
||||||
>
|
>
|
||||||
<span class="inline-flex h-2.5 w-2.5 rounded-full bg-[#139957]" />
|
|
||||||
Fregat
|
Fregat
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<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">
|
<nav class="fregat-pill-glass fregat-pill-shell fregat-pill-center flex min-w-0 flex-1 items-center rounded-full p-1 lg:absolute lg:left-1/2 lg:w-auto lg:-translate-x-1/2">
|
||||||
<NuxtLink
|
<template v-for="(item, index) in centerCapsule" :key="item.to">
|
||||||
v-for="item in centerCapsule"
|
<NuxtLink
|
||||||
:key="item.to"
|
:to="item.to"
|
||||||
:to="item.to"
|
:class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
|
||||||
:class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
|
>
|
||||||
>
|
{{ item.label }}
|
||||||
<svg v-if="item.icon === 'grid'" class="h-4 w-4" viewBox="0 0 24 24" fill="none">
|
</NuxtLink>
|
||||||
<path d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z" fill="currentColor" />
|
<div
|
||||||
</svg>
|
v-if="index < centerCapsule.length - 1"
|
||||||
<svg v-else class="h-4 w-4" viewBox="0 0 24 24" fill="none">
|
class="lk-pill-divider mx-1 h-6 w-px shrink-0"
|
||||||
<path d="M5 5h14v3H5V5Zm0 5h14v3H5v-3Zm0 5h14v4H5v-4Z" fill="currentColor" />
|
aria-hidden="true"
|
||||||
</svg>
|
/>
|
||||||
{{ item.label }}
|
</template>
|
||||||
</NuxtLink>
|
</nav>
|
||||||
</div>
|
|
||||||
|
|
||||||
<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">
|
<nav class="fregat-pill-glass fregat-pill-shell fregat-pill-right flex min-w-0 items-center rounded-full p-1 lg:absolute lg:right-0 lg:w-auto">
|
||||||
<NuxtLink
|
<template v-for="(item, index) in rightCapsule" :key="item.to">
|
||||||
v-for="item in rightCapsule"
|
<NuxtLink
|
||||||
:key="item.to"
|
:to="item.to"
|
||||||
:to="item.to"
|
:class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
|
||||||
:class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
|
>
|
||||||
>
|
<span>{{ item.label }}</span>
|
||||||
<svg v-if="item.icon === 'cart'" class="h-4 w-4" viewBox="0 0 24 24" fill="none">
|
<span
|
||||||
<path d="M7 4h-2l-1 2v2h1l2.2 9h10.6l2.2-7H8.3L7.8 8H21V6h-12l-1-2Zm2 16a2 2 0 1 0 0 .01V20Zm8 0a2 2 0 1 0 0 .01V20Z" fill="currentColor" />
|
v-if="item.to === '/cart' && totalItems > 0"
|
||||||
</svg>
|
class="badge badge-sm border-0 bg-[#139957] text-white"
|
||||||
<svg v-else 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" />
|
{{ totalItems }}
|
||||||
</svg>
|
</span>
|
||||||
<span class="hidden sm:inline">{{ item.label }}</span>
|
</NuxtLink>
|
||||||
<span v-if="item.to === '/cart' && totalItems > 0" class="badge badge-sm border-0 bg-[#139957] text-white">
|
<div
|
||||||
{{ totalItems }}
|
v-if="index < rightCapsule.length - 1"
|
||||||
</span>
|
class="lk-pill-divider mx-1 h-6 w-px shrink-0"
|
||||||
</NuxtLink>
|
aria-hidden="true"
|
||||||
</div>
|
/>
|
||||||
|
</template>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Reference in New Issue
Block a user