147 lines
3.9 KiB
Plaintext
147 lines
3.9 KiB
Plaintext
---
|
||
import { fetchMenu } from '@api/menu';
|
||
|
||
interface Props {
|
||
menuId: number;
|
||
}
|
||
|
||
const { menuId } = Astro.props;
|
||
|
||
// Получаем меню по ID
|
||
const menu = await fetchMenu({ id: menuId });
|
||
|
||
if (!menu) {
|
||
return;
|
||
}
|
||
|
||
// Создаем градиент для верхней линии
|
||
const totalItems = menu.menuItems.nodes.length;
|
||
const gradientStops = menu.menuItems.nodes.map((item, index) => {
|
||
const colorClass = item.menuItemColor || 'black';
|
||
const startPercent = (index / totalItems) * 100;
|
||
const endPercent = ((index + 1) / totalItems) * 100;
|
||
return `var(--color-${colorClass}) ${startPercent}%, var(--color-${colorClass}) ${endPercent}%`;
|
||
}).join(', ');
|
||
---
|
||
|
||
<nav class="primary-nav" aria-label="Main navigation">
|
||
<div class="primary-nav__content">
|
||
<button class="primary-nav__burger" aria-label="Toggle menu"></button>
|
||
<ul class="primary-nav__list">
|
||
{menu.menuItems.nodes.map(item => {
|
||
const colorClass = item.menuItemColor ? `color-${item.menuItemColor}` : '';
|
||
return (
|
||
<li class="primary-nav__item" key={item.id}>
|
||
<a
|
||
href={item.url}
|
||
class={`primary-nav__link ${colorClass}`}
|
||
target={item.target || '_self'}
|
||
>
|
||
{item.label}
|
||
</a>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<style>
|
||
.primary-nav {
|
||
margin: 12px 0;
|
||
position: relative;
|
||
border-bottom: 1px solid black;
|
||
}
|
||
|
||
.primary-nav::before,
|
||
.primary-nav::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background-color: #000;
|
||
}
|
||
|
||
|
||
.primary-nav__content {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.primary-nav__burger {
|
||
width: 60px;
|
||
height: 48px;
|
||
border-right: 1px solid silver;
|
||
margin: .4rem 0;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition: opacity 0.2s ease;
|
||
background-image: url('data:image/svg+xml;utf8,<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H23V2H0V0Z" fill="%23000000"/><path d="M0 7H23V9H0V7Z" fill="%23000000"/><path d="M0 14H23V16H0V14Z" fill="%23000000"/></svg>');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 23px 16px;
|
||
}
|
||
|
||
.primary-nav__burger:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.primary-nav__list {
|
||
display: none;
|
||
flex: 1;
|
||
font-size: .875rem;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
gap: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
align-items: center;
|
||
}
|
||
|
||
.primary-nav__item {
|
||
flex: 0 0 auto;
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
|
||
.primary-nav__link {
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding: 0 1rem;
|
||
transition: border-top 0.2s ease;
|
||
border-top: 3px solid transparent;
|
||
position: relative;
|
||
}
|
||
|
||
.primary-nav__link:hover {
|
||
border-top-color: currentColor;
|
||
}
|
||
|
||
/* Десктоп */
|
||
@media (min-width: 768px) {
|
||
.primary-nav__list {
|
||
display: flex;
|
||
}
|
||
|
||
.primary-nav__link::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -3px; /* Выровнено с верхней границей навигации */
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background-color: inherit;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.primary-nav__link:hover::before {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style> |