first commit

frontend/src/components/layout/header/Header.astro

@@ -0,0 +1,189 @@
+---
+import Logo from './Logo.astro';
+import LoginButton from './LoginButton.astro';
+import Navbar from './Navbar.astro';
+import MobileMenu from './MobileMenu.astro';
+---
+
+<header class="header-wrapper">
+    <div class="header-container">
+        <!-- Логотип -->
+        <Logo />
+
+        <!-- Навигация -->
+        <Navbar />
+
+        <!-- Блок контактов (Кнопка входа + Гамбургер) -->
+        <div class="contact-block">
+            <LoginButton />
+
+            <!-- Кнопка гамбургера -->
+            <button class="burger-btn" id="burger-btn" aria-label="Открыть меню">
+                <span class="burger-line"></span>
+                <span class="burger-line"></span>
+                <span class="burger-line"></span>
+            </button>
+        </div>
+    </div>
+</header>
+
+<MobileMenu />
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const burgerBtn = document.getElementById('burger-btn');
+        const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
+        const mobileMenuClose = document.getElementById('mobile-menu-close');
+        const mobileNavLinks = mobileMenuOverlay?.querySelectorAll('.mobile-nav-link');
+
+        function openMenu() {
+            mobileMenuOverlay?.classList.add('active');
+            document.body.style.overflow = 'hidden';
+            burgerBtn?.classList.add('active');
+        }
+
+        function closeMenu() {
+            mobileMenuOverlay?.classList.remove('active');
+            document.body.style.overflow = '';
+            burgerBtn?.classList.remove('active');
+        }
+
+        // Открытие меню
+        burgerBtn?.addEventListener('click', openMenu);
+
+        // Закрытие по крестику
+        mobileMenuClose?.addEventListener('click', closeMenu);
+
+        // Закрытие по клику вне меню
+        mobileMenuOverlay?.addEventListener('click', (e) => {
+            if (e.target === mobileMenuOverlay) {
+                closeMenu();
+            }
+        });
+
+        // Закрытие по клику на ссылку
+        mobileNavLinks?.forEach(link => {
+            link.addEventListener('click', closeMenu);
+        });
+
+        // Закрытие по Escape
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && mobileMenuOverlay?.classList.contains('active')) {
+                closeMenu();
+            }
+        });
+    });
+</script>
+
+<style>
+    /* Общая обертка хедера (фон и скругления как на скриншоте) */
+    .header-wrapper {
+        background-color: #d1d9e4; /* Серо-голубой фон */
+        border-top-left-radius: 8px; /* Скругления из макета */
+        border-top-right-radius: 8px;
+        padding: 1.2rem 2rem;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    /* Контейнер для выравнивания контента */
+    .header-container {
+        width: 100%;
+        max-width: var(--site-max-width);
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 2rem;
+    }
+
+    /* Блок с телефоном и кнопкой */
+    .contact-block {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .phone-number {
+        color: #1e3050;
+        font-weight: 700;
+        text-decoration: none;
+        font-size: 1rem;
+    }
+
+    /* Кнопка гамбургера */
+    .burger-btn {
+        display: none;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 30px;
+        height: 21px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        z-index: 1001;
+        margin-left: 1rem;
+    }
+
+    .burger-line {
+        width: 100%;
+        height: 3px;
+        background: linear-gradient(90deg, #1e3050 0%, #2a4266 100%);
+        border-radius: 2px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        transform-origin: center;
+    }
+
+    .burger-line:nth-child(1) {
+        transform-origin: top center;
+    }
+
+    .burger-line:nth-child(3) {
+        transform-origin: bottom center;
+    }
+
+    /* Анимация гамбургера в крестик */
+    .burger-btn.active .burger-line:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px);
+    }
+
+    .burger-btn.active .burger-line:nth-child(2) {
+        opacity: 0;
+        transform: scaleX(0);
+    }
+
+    .burger-btn.active .burger-line:nth-child(3) {
+        transform: rotate(-45deg) translate(5px, -5px);
+    }
+
+    @media (max-width: 992px) {
+        .nav {
+            display: none;
+        }
+
+        .burger-btn {
+            display: flex;
+        }
+
+        .contact-block {
+            gap: 0.5rem;
+        }
+
+        /* Скрываем кнопку входа на мобильных */
+        .login-btn {
+            display: none;
+        }
+    }
+
+    @media (max-width: 576px) {
+        .contact-block {
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 0.5rem;
+        }
+
+        .header-container {
+            padding: 0 1rem;
+        }
+    }
+</style>