delf/profile-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add components

Browse Source
This commit is contained in:
Profile Profile
2026-03-09 22:02:36 +03:00
parent 9fe0b453e6
commit 1b4be186a7
15 changed files with 2723 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

453
src/components/BurgerMenu.astro Normal file
View File

@@ -0,0 +1,453 @@
---
// 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>