Update

public/index.html

@@ -35,7 +35,6 @@
     <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
 
     <!-- Custom styles for this template -->
-    <link href="assets/css/offcanvas.css" rel="stylesheet">
     <link href="assets/css/carousel.css" rel="stylesheet">
     <link href="assets/css/blog.css" rel="stylesheet">
     <link href="assets/css/style.css" rel="stylesheet">
@@ -69,47 +68,45 @@
 
     <header class="mb-auto">
 
-      <nav class="navbar navbar-dark bg-dark fixed-top border-bottom">
+      <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
         <div class="container-fluid">
 
-          <div class="justify-content-center align-items-end text-decoration-none">
           <a class="navbar-brand justify-content-center float-md-start mb-0" href="/">
             <img src="assets/ico/logo.svg" alt="Melawy Linux" width="96" height="48" class="d-inline-block align-text-top">
           </a>
-          </div>
 
-          <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
+          <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
+            aria-controls="offcanvasNavbar">
             <span class="navbar-toggler-icon"></span>
           </button>
 
-          <div class="justify-content-center align-items-end text-decoration-none navbar-collapse offcanvas-collapse">
+          <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar"
-            <nav class="nav nav-underline justify-content-center align-items-center">
+            aria-labelledby="offcanvasNavbarLabel">
-              <a href="news" class="menu nav-link">
+            <div class="offcanvas-header">
-                Новости
+              <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Меню</h5>
-              </a>
+              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body">
+              <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+                <li class="nav-item">
+                  <a class="nav-link" aria-current="news" href="#">Новости</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="overview">О дистрибутиве</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="about">Об авторе</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="cooperation">Сотрудничество</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="donate">Поддержать проект</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="download">Скачать</a>
+                </li>
 
-              <a href="overview" class="menu nav-link">
-                О дистрибутиве
-              </a>
-
-              <a href="about" class="menu nav-link">
-                Об авторе
-              </a>
-
-              <a href="cooperation" class="menu nav-link">
-                Сотрудничество
-              </a>
-
-              <a href="download" class="menu nav-link">
-                Скачать
-              </a>
-
-              <a href="donate" target="_blank" class="menu nav-link">
-                Поддержать проект
-              </a>
-            </nav>
-
-            <ul class="nav list-unstyled">
                 <li class="nav-item">
                   <a class="nav-link" href="https://discord.gg/725zXx7RhJ" target="_blank" data-bs-toggle="tooltip"
                     data-bs-placement="bottom" data-bs-title="Сообщество">
@@ -153,7 +150,7 @@
                 </li>
               </ul>
             </div>
-
+          </div>
         </div>
       </nav>
 
@@ -245,8 +242,6 @@
 
     <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-    <script src="assets/js/offcanvas.js"></script>
-
     <script src="node_modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
 
     <script src="assets/js/script.js"></script>