65 lines
1.5 KiB
Text
65 lines
1.5 KiB
Text
|
---
|
||
|
|
export interface Props {
|
||
|
|
links?: Array<{ name: string; url: string }>;
|
||
|
|
class?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const defaultLinks = [
|
||
|
|
{ name: 'Услуги', url: '/services' },
|
||
|
|
{ name: 'Кейсы', url: '/cases' },
|
||
|
|
{ name: 'Блог', url: '/blog' },
|
||
|
|
{ name: 'Отзывы', url: '/reviews' },
|
||
|
|
{ name: 'Контакты', url: '/contacts' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const {
|
||
|
|
links = defaultLinks,
|
||
|
|
class: className = '',
|
||
|
|
}: Props = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<nav class={className}>
|
||
|
|
<ul class="nav-list">
|
||
|
|
{links.map((link) => (
|
||
|
|
<li>
|
||
|
|
<a href={link.url} class="nav-link">{link.name}</a>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.nav-list {
|
||
|
|
display: flex;
|
||
|
|
gap: 2.5rem;
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link {
|
||
|
|
color: #535e6c;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
transition: color 0.2s ease, background-position 0.3s ease;
|
||
|
|
background-image: linear-gradient(to right, #1e3050 0%, #1e3050 100%);
|
||
|
|
background-size: 0% 2px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: left bottom;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link:hover {
|
||
|
|
color: #1e3050;
|
||
|
|
background-size: 100% 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Адаптив: скрываем меню на мобильных */
|
||
|
|
@media (max-width: 992px) {
|
||
|
|
.nav-list {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|