454 lines
15 KiB
Plaintext
454 lines
15 KiB
Plaintext
---
|
|
// BurgerMenu.astro
|
|
import { fetchMenu } from '@api/menu';
|
|
|
|
interface Props {
|
|
colorMenuId: number;
|
|
standardMenuId: number;
|
|
submenuId: number;
|
|
}
|
|
|
|
const { colorMenuId, standardMenuId, submenuId } = Astro.props;
|
|
|
|
// Получаем все меню
|
|
const colorMenu = await fetchMenu({ id: colorMenuId });
|
|
const standardMenu = await fetchMenu({ id: standardMenuId });
|
|
const submenu = await fetchMenu({ id: submenuId });
|
|
---
|
|
|
|
<div class="burger-menu" id="burger-menu">
|
|
<div class="burger-menu__overlay" id="burger-overlay"></div>
|
|
<div class="burger-menu__wrapper">
|
|
<button class="burger-menu__close" id="burger-close" aria-label="Close menu"></button>
|
|
|
|
<div class="burger-menu__content">
|
|
{colorMenu && (
|
|
<div class="burger-menu__section">
|
|
<ul class="burger-menu__list">
|
|
{colorMenu.menuItems.nodes.map(item => {
|
|
const colorClass = item.menuItemColor ? `color-${item.menuItemColor}` : 'color-black';
|
|
return (
|
|
<li class="burger-menu__item" key={item.id}>
|
|
<a
|
|
href={item.url}
|
|
class={`burger-menu__link burger-menu__link--colored ${colorClass}`}
|
|
target={item.target || '_self'}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
|
|
<li class="burger-menu__item burger-menu__item--has-submenu">
|
|
<button
|
|
class="burger-menu__link burger-menu__link--colored burger-menu__link--submenu color-black"
|
|
id="submenu-trigger"
|
|
type="button"
|
|
>
|
|
Другие рубрики
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
<div class="burger-menu__divider"></div>
|
|
|
|
{standardMenu && (
|
|
<div class="burger-menu__section">
|
|
<ul class="burger-menu__list">
|
|
{standardMenu.menuItems.nodes.map(item => (
|
|
<li class="burger-menu__item" key={item.id}>
|
|
<a
|
|
href={item.url}
|
|
class="burger-menu__link burger-menu__link--standard"
|
|
target={item.target || '_self'}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="burger-menu__submenu" id="submenu-panel">
|
|
<button class="burger-menu__back" id="submenu-back" aria-label="Back to main menu"></button>
|
|
|
|
<div class="burger-menu__submenu-content">
|
|
{submenu && submenu.menuItems && submenu.menuItems.nodes ? (
|
|
<ul class="burger-menu__list">
|
|
{submenu.menuItems.nodes.map(item => (
|
|
<li class="burger-menu__item" key={item.id}>
|
|
<a
|
|
href={item.url}
|
|
class="burger-menu__link"
|
|
target={item.target || '_self'}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>Подменю не загружено</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function initBurgerMenu() {
|
|
const burger = document.querySelector('.primary-nav__burger');
|
|
const menu = document.getElementById('burger-menu');
|
|
const overlay = document.getElementById('burger-overlay');
|
|
const closeBtn = document.getElementById('burger-close');
|
|
const submenuTrigger = document.getElementById('submenu-trigger');
|
|
const submenuPanel = document.getElementById('submenu-panel');
|
|
const submenuBack = document.getElementById('submenu-back');
|
|
|
|
if (!burger || !menu || !overlay || !closeBtn) return;
|
|
|
|
const toggleMenu = () => {
|
|
menu.classList.toggle('is-open');
|
|
document.body.classList.toggle('burger-menu-open');
|
|
// Закрываем подменю при закрытии основного меню
|
|
if (!menu.classList.contains('is-open')) {
|
|
submenuPanel?.classList.remove('is-open');
|
|
submenuTrigger?.classList.remove('is-active');
|
|
}
|
|
};
|
|
|
|
const toggleSubmenu = () => {
|
|
submenuPanel?.classList.toggle('is-open');
|
|
submenuTrigger?.classList.toggle('is-active');
|
|
};
|
|
|
|
const closeSubmenu = () => {
|
|
submenuPanel?.classList.remove('is-open');
|
|
submenuTrigger?.classList.remove('is-active');
|
|
};
|
|
|
|
burger.addEventListener('click', toggleMenu);
|
|
overlay.addEventListener('click', toggleMenu);
|
|
closeBtn.addEventListener('click', toggleMenu);
|
|
|
|
// Управление подменю - toggle вместо открытия
|
|
if (submenuTrigger && submenuPanel) {
|
|
submenuTrigger.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
toggleSubmenu();
|
|
});
|
|
}
|
|
|
|
// Кнопка возврата
|
|
if (submenuBack) {
|
|
submenuBack.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
closeSubmenu();
|
|
});
|
|
}
|
|
|
|
// Закрытие по Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
if (submenuPanel && submenuPanel.classList.contains('is-open')) {
|
|
closeSubmenu();
|
|
} else if (menu.classList.contains('is-open')) {
|
|
toggleMenu();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Инициализация при загрузке
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initBurgerMenu);
|
|
} else {
|
|
initBurgerMenu();
|
|
}
|
|
|
|
// Реинициализация при навигации (если используете View Transitions)
|
|
document.addEventListener('astro:after-swap', initBurgerMenu);
|
|
</script>
|
|
|
|
<style is:global>
|
|
/* Классы цветов для border-left */
|
|
.burger-menu__link--colored.color-black { border-left-color: #000000; }
|
|
.burger-menu__link--colored.color-yellow { border-left-color: #ffc107; }
|
|
.burger-menu__link--colored.color-blue { border-left-color: #2196f3; }
|
|
.burger-menu__link--colored.color-green { border-left-color: #4caf50; }
|
|
.burger-menu__link--colored.color-red { border-left-color: #f44336; }
|
|
.burger-menu__link--colored.color-orange { border-left-color: #ff9800; }
|
|
.burger-menu__link--colored.color-gray { border-left-color: #9e9e9e; }
|
|
.burger-menu__link--colored.color-indigo { border-left-color: #3f51b5; }
|
|
.burger-menu__link--colored.color-purple { border-left-color: #9c27b0; }
|
|
.burger-menu__link--colored.color-pink { border-left-color: #e91e63; }
|
|
.burger-menu__link--colored.color-teal { border-left-color: #009688; }
|
|
.burger-menu__link--colored.color-cyan { border-left-color: #00bcd4; }
|
|
.burger-menu__link--colored.color-white { border-left-color: #ffffff; }
|
|
.burger-menu__link--colored.color-gray-dark { border-left-color: #424242; }
|
|
.burger-menu__link--colored.color-light { border-left-color: #f5f5f5; }
|
|
.burger-menu__link--colored.color-dark { border-left-color: #212121; }
|
|
</style>
|
|
|
|
<style>
|
|
.burger-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.burger-menu.is-open {
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
}
|
|
|
|
.burger-menu__overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
z-index: 999;
|
|
}
|
|
|
|
.burger-menu.is-open .burger-menu__overlay {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.burger-menu__wrapper {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: #f8f8f8;
|
|
z-index: 1001;
|
|
}
|
|
|
|
/* Крестик закрытия */
|
|
.burger-menu__close {
|
|
position: sticky;
|
|
top: 1rem;
|
|
left: auto;
|
|
right: 1rem;
|
|
margin-left: auto;
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background-color: #f8f8f8;
|
|
cursor: pointer;
|
|
color: #000000;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 10;
|
|
background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.burger-menu__close:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.burger-menu__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
height: calc(100% - 56px);
|
|
}
|
|
|
|
.burger-menu__section {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.burger-menu__divider {
|
|
height: 1px;
|
|
background-color: #e0e0e0;
|
|
margin: 0 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.burger-menu__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.burger-menu__item {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.burger-menu__item--has-submenu {
|
|
position: static;
|
|
}
|
|
|
|
.burger-menu__link {
|
|
display: block;
|
|
padding: 0.75rem 0;
|
|
text-decoration: none;
|
|
color: #000000;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
transition: background-color 0.2s ease, padding-left 0.2s ease;
|
|
border: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.burger-menu__link:hover {
|
|
background-color: #ececec;
|
|
}
|
|
|
|
.burger-menu__link--colored {
|
|
border-left: 3px solid #000000;
|
|
padding-left: 1rem;
|
|
transition: background-color 0.2s ease, border-left-width 0.2s ease, padding-left 0.2s ease;
|
|
}
|
|
|
|
.burger-menu__link--colored:hover {
|
|
border-left-width: 6px;
|
|
padding-left: calc(1rem - 3px);
|
|
}
|
|
|
|
.burger-menu__link--standard {
|
|
padding-left: calc(1rem + 3px);
|
|
}
|
|
|
|
.burger-menu__link--submenu {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Стрелка вправо (по умолчанию) */
|
|
.burger-menu__link--submenu::after {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
margin-left: 0.5rem;
|
|
background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 16px 16px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Стрелка влево (при открытом подменю) */
|
|
.burger-menu__link--submenu.is-active::after {
|
|
background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
|
|
}
|
|
|
|
/* Подменю */
|
|
.burger-menu__submenu {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 320px;
|
|
background-color: white;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
z-index: 1002;
|
|
box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
|
|
visibility: hidden;
|
|
}
|
|
|
|
.burger-menu__submenu.is-open {
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Кнопка возврата */
|
|
.burger-menu__back {
|
|
position: sticky;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
color: #000000;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 10;
|
|
display: none;
|
|
background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.burger-menu__back:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.burger-menu__submenu-content {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
/* Блокировка прокрутки body */
|
|
:global(body.burger-menu-open) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Десктоп */
|
|
@media (min-width: 768px) {
|
|
.burger-menu {
|
|
width: 320px;
|
|
}
|
|
|
|
.burger-menu__overlay {
|
|
display: none;
|
|
}
|
|
|
|
.burger-menu__wrapper {
|
|
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.burger-menu__submenu {
|
|
left: 320px;
|
|
}
|
|
|
|
.burger-menu__back {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Мобильные */
|
|
@media (max-width: 767px) {
|
|
.burger-menu__submenu {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.burger-menu__submenu.is-open .burger-menu__back {
|
|
display: block;
|
|
}
|
|
|
|
.burger-menu__submenu-content {
|
|
height: calc(100% - 56px);
|
|
}
|
|
}
|
|
</style>
|
|
|