Mobile navbar redesign

Author: mskrasnov

css/styles.css

@@ -305,51 +305,87 @@ footer {
 
 /* Responsive */
 @media (max-width: 768px) {
+
+    /* Стили для гамбургера */
     .hamburger {
         display: block;
+        transition: transform 0.3s ease;
+        z-index: 101;
+        /* Чтобы кнопка была над меню */
+    }
+
+    .hamburger.active {
+        transform: rotate(90deg);
     }
 
+    /* Контейнер меню (изначально за экраном) */
     nav {
-        display: none;
-        position: absolute;
+        position: fixed;
         top: 80px;
-        right: 20px;
-        /* Сдвигаем меню к правому краю */
-        left: auto;
-        /* Отключаем левое позиционирование */
-        width: auto;
-        /* Ширина по содержимому */
-        min-width: 200px;
-        /* Минимальная ширина */
+        right: -300px;
+        width: 280px;
+        height: calc(100vh - 80px);
         background-color: var(--bg);
         flex-direction: column;
         padding: 1rem;
-        border-radius: 8px;
-        border: 1px solid var(--bg-light);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        border-left: 1px solid var(--bg-light);
+        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
         text-align: right;
-        /* Выравнивание текста по правому краю */
+        transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        z-index: 100;
+        overflow-y: auto;
     }
 
+    /* Меню "выезжает" при активации */
     nav.active {
-        display: flex;
+        right: 0;
+    }
+
+    /* Оверлей для фона */
+    .nav-overlay {
+        position: fixed;
+        top: 80px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease;
+        z-index: 99;
     }
 
+    .nav-overlay.active {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    /* Анимация пунктов меню */
     nav a {
-        padding: 0.5rem 1rem;
-        white-space: nowrap;
-        /* Запрет переноса текста */
+        padding: 0.8rem 1rem;
+        margin: 0.25rem 0;
+        border-radius: 4px;
+        transition: all 0.2s ease 0.1s;
+        /* Задержка для каскадного эффекта */
+        transform: translateX(20px);
+        opacity: 0;
+    }
+
+    nav.active a {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    nav a:hover {
+        background-color: var(--bg-light);
+        color: var(--yellow);
+        text-decoration: none;
     }
 
-    /* Дополнительно можно добавить стрелку к меню */
-    nav::before {
-        content: "";
-        position: absolute;
-        top: -10px;
-        right: 15px;
-        border-left: 10px solid transparent;
-        border-right: 10px solid transparent;
-        border-bottom: 10px solid var(--bg);
+    nav a:hover::after {
+        content: "←";
+        margin-left: 8px;
+        color: var(--yellow);
     }
 
     .hero h2 {

donate.html

@@ -81,6 +81,7 @@ <h2>Другие способы помочь</h2>
         </div>
     </footer>
 
+    <div class="nav-overlay" id="nav-overlay"></div>
     <script src="header.js"></script>
 </body>
 

download.html

@@ -130,6 +130,7 @@ <h2>Предыдущие версии</h2>
         </div>
     </footer>
 
+    <div class="nav-overlay" id="nav-overlay"></div>
     <script src="header.js"></script>
 </body>
 

header.js

@@ -1,6 +1,15 @@
 // Mobile menu toggle
 document.getElementById('hamburger').addEventListener('click', function () {
+    this.classList.toggle('active');
     document.getElementById('main-nav').classList.toggle('active');
+    document.getElementById('nav-overlay').classList.toggle('active');
+});
+
+// Закрытие меню при клике на оверлей
+document.getElementById('nav-overlay').addEventListener('click', function () {
+    document.getElementById('hamburger').classList.remove('active');
+    document.getElementById('main-nav').classList.remove('active');
+    this.classList.remove('active');
 });
 
 // Detect OS and update download button

index.html

@@ -90,6 +90,7 @@ <h3>Экономит ресурсы</h3>
         </div>
     </footer>
 
+    <div class="nav-overlay" id="nav-overlay"></div>
     <script src="header.js"></script>
 </body>
 

screenshots.html

@@ -98,6 +98,7 @@ <h3>Уведомления</h3>
         </div>
     </footer>
 
+    <div class="nav-overlay" id="nav-overlay"></div>
     <script src="header.js"></script>
 </body>