НДобавлена линия скроллинÐÐга в ÐHeader

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

@@ -5,19 +5,17 @@ import Navbar from './Navbar.astro';
 import MobileMenu from './MobileMenu.astro';
 ---
 
-<header class="header-wrapper">
+<header class="header-wrapper" id="header">
-    <div class="site-container header-container">
+    <div class="header-progress-container">
-        <!-- Логотип -->
+        <div class="header-progress-bar" id="progress-bar"></div>
-        <Logo />
+    </div>
 
-        <!-- Навигация -->
+    <div class="site-container 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>
@@ -35,7 +33,58 @@ import MobileMenu from './MobileMenu.astro';
         const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
         const mobileMenuClose = document.getElementById('mobile-menu-close');
         const mobileNavLinks = mobileMenuOverlay?.querySelectorAll('.mobile-nav-link');
+        const progressBar = document.getElementById('progress-bar');
+        const header = document.getElementById('header');
 
+        // Обработка прогресса скролла
+        function updateProgressBar() {
+            if (!progressBar) return;
+
+            // Получаем высоту документа и окна
+            const scrollTop = window.scrollY || document.documentElement.scrollTop;
+            const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
+            // Избегаем деления на ноль
+            if (docHeight <= 0) {
+                progressBar.style.width = '0%';
+                return;
+            }
+
+            // Вычисляем процент прокрутки (0-100)
+            const scrollPercent = (scrollTop / docHeight) * 100;
+
+            // Ограничиваем значения от 0 до 100
+            const clampedPercent = Math.min(100, Math.max(0, scrollPercent));
+
+            // Применяем ширину
+            progressBar.style.width = `${clampedPercent}%`;
+
+            // Добавляем/убираем класс visible для дополнительных эффектов
+            if (scrollTop > 5) {
+                header?.classList.add('scrolled');
+            } else {
+                header?.classList.remove('scrolled');
+            }
+        }
+
+        // Оптимизация через requestAnimationFrame
+        let ticking = false;
+        function handleScroll() {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    updateProgressBar();
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        }
+
+        // Инициализация и слушатели
+        updateProgressBar();
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', updateProgressBar);
+
+        // Мобильное меню
         function openMenu() {
             mobileMenuOverlay?.classList.add('active');
             document.body.style.overflow = 'hidden';
@@ -48,25 +97,17 @@ import MobileMenu from './MobileMenu.astro';
             burgerBtn?.classList.remove('active');
         }
 
-        // Открытие меню
         burgerBtn?.addEventListener('click', openMenu);
-
-        // Закрытие по крестику
         mobileMenuClose?.addEventListener('click', closeMenu);
 
-        // Закрытие по клику вне меню
         mobileMenuOverlay?.addEventListener('click', (e) => {
-            if (e.target === mobileMenuOverlay) {
+            if (e.target === mobileMenuOverlay) closeMenu();
-                closeMenu();
-            }
         });
 
-        // Закрытие по клику на ссылку
         mobileNavLinks?.forEach(link => {
             link.addEventListener('click', closeMenu);
         });
 
-        // Закрытие по Escape
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Escape' && mobileMenuOverlay?.classList.contains('active')) {
                 closeMenu();
@@ -76,42 +117,67 @@ import MobileMenu from './MobileMenu.astro';
 </script>
 
 <style>
-    /* Общая обертка хедера (фон и скругления как на скриншоте) */
     .header-wrapper {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
-        background-color: #d1d9e4; /* Серо-голубой фон */
+        background-color: #d1d9e4;
-        border-top-left-radius: 8px; /* Скругления из макета */
-        border-top-right-radius: 8px;
-        padding: 1.2rem 0;
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         z-index: 1000;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    /* Контейнер прогресс-бара */
+    .header-progress-container {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background: rgba(212, 175, 55, 0.1);
+        overflow: hidden;
+    }
+
+    /* Сама линия прогресса */
+    .header-progress-bar {
+        height: 100%;
+        width: 0%;
+        background: linear-gradient(90deg, #d4af37 0%, #e8c547 50%, #d4af37 100%);
+        background-size: 200% 100%;
+        transition: width 0.1s linear;
+        box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
+        animation: shimmer 2s infinite linear;
+    }
+
+    /* Эффект мерцания градиента */
+    @keyframes shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+    }
+
+    /* Состояние при скролле */
+    .header-wrapper.scrolled {
+        background-color: rgba(209, 217, 228, 0.95);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     }
 
-    /* Контейнер для выравнивания контента */
     .header-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding: 1.2rem 0;
+        position: relative;
     }
 
-    /* Блок с телефоном и кнопкой */
     .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;
@@ -136,15 +202,6 @@ import MobileMenu from './MobileMenu.astro';
         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);
     }
@@ -159,19 +216,10 @@ import MobileMenu from './MobileMenu.astro';
     }
 
     @media (max-width: 992px) {
-        .nav {
-            display: none;
-        }
-
         .burger-btn {
             display: flex;
         }
 
-        .contact-block {
-            gap: 0.5rem;
-        }
-
-        /* Скрываем кнопку входа на мобильных */
         .login-btn {
             display: none;
         }