Merge pull request #34 from Studio-Yandex-Practicum/feature/navbar_menu

Изменение логки работы боковой панели сайта
Studio-Yandex-Practicum · Nov 20, 2023 · 9e90988 · 9e90988
2 parents 9eab507 + 976f827
commit 9e90988
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 64 deletions.
diff --git a/adaptive_hockey_federation/templates/base.html b/adaptive_hockey_federation/templates/base.html
@@ -1,30 +1,60 @@
 <!DOCTYPE html>
 <html lang="ru">
-  <head>    
+  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+
     <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+        tailwind.config = {
+          prefix: "tw-",
+          corePlugins: {
+             preflight: false,
+          }
+        }
+      </script>
+
     <title>
-      {% block title %} 
-      Тут будет заголовок
+      {% block title %}
+        Тут будет заголовок
       {% endblock %}
     </title>
+
+  <style>
+
+.content {
+	min-height: calc(100vh - 162px);
+}
+</style>
   </head>
-  <body class="d-flex flex-column min-vh-100">
-    <header>
-      {% include 'includes/header.html' %}
-    </header>
-    <main class="container py-5 text-center text-2xl">
-    {% block content %}
-      Основной текст
-    {% endblock %}  
-    </main>
-    <footer class="mt-auto">
-      {% include 'includes/footer.html' %}
-    </footer>
-    {% include 'includes/drawer.html' %}
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+  <body class="d-flex flex-column ">
+    <div class="row g-0">
+        <div class="col-auto px-0">
+            {% include 'includes/drawer.html' %}
+        </div>
+        <div class="col px-0">
+            <header>
+              {% include 'includes/header.html' %}
+            </header>
+            <div class="content container-fluid text-center text-2xl">
+                <div class="row">
+                        <div class="col ps-md-2 pt-2">
+                            <div class="page-header pt-3">
+                            {% block content %}#}
+                                Основной текст
+                            {% endblock %}
+                            </div>
+                        </div>
+                </div>
+            </div>
+            <footer>
+                {% include 'includes/footer.html' %}
+            </footer>
+            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+        </div>
+    </div>
   </body>
 </html>
diff --git a/adaptive_hockey_federation/templates/includes/drawer.html b/adaptive_hockey_federation/templates/includes/drawer.html
@@ -1,41 +1,44 @@
-<div class="offcanvas offcanvas-start" style="background-color: #340061;" data-bs-backdrop="static" tabindex="-1" 
-id="staticBackdrop" aria-labelledby="staticBackdropLabel">
-
-  <div class="offcanvas-body mx-auto">
-    <ul class="nav-list" style="list-style-type:none">
-      <div class="container py-5">
-        <div class="row">
-          <div class="col-4 flex justify-end">
-            <span class="logo-img">
-              <img src="https://paraicehockey.ru/wp-content/uploads/2022/02/FAH_q.png" width="100" height="100">
-            </span>
-          </div>
-          <div class="col text-white flex justify-start">
-            Мир хокея<br>для особенных<br>детей
-          </div>
-        </div>
-      </div>
-      <li class="nav-item py-2">
-        {% url 'main:users' as url_name %}{% include "includes/button.html" with name="Пользователи" %}
-      </li>
-      <li class="nav-item py-2">
-        {% url 'main:teams' as url_name %}{% include "includes/button.html" with name="Команды" %}
-      </li>
-      <li class="nav-item py-2">
-        {% url 'main:competitions' as url_name %}{% include "includes/button.html" with name="Соревнования" %}
-      </li>
-      <li class="nav-item py-2">
-        {% url 'main:analytics' as url_name %}{% include "includes/button.html" with name="Аналитика" %}
-      </li>
-      <li class="nav-item py-2">
-        {% url 'main:unloads' as url_name %}{% include "includes/button.html" with name="Выгрузки" %}
-      </li>
-    </ul> 
-  </div>
+<script>
+        tailwind.config = {
+          prefix: "tw-",
+          corePlugins: {
+             preflight: false,
+          }
+        }
+      </script>
 
-  <div class="offcanvas-footer pb-5">
-    <button type="button" class="btn ps-16" data-bs-dismiss="offcanvas" aria-label="Close">
-      <i class="bi bi-caret-left-fill fs-3" style="color: white;"></i>
-    </button>
-  </div>
+<div class="col-auto px-0">
+    <div id="sidebar" class="collapse collapse-horizontal show border-end vh-100 shadow-sm" style="background-color: #340061";>
+        <div id="sidebar-nav" class="list-group me-4 border-0 rounded-0">
+            <ul class="nav-list" style="list-style-type:none">
+              <div class="container py-5">
+                <div class="row">
+                  <div class="col-auto flex justify-end">
+                    <span class="logo-img">
+                      <img src="https://paraicehockey.ru/wp-content/uploads/2022/02/FAH_q.png" width="100" height="100">
+                    </span>
+                  </div>
+                  <div class="col text-white flex justify-start">
+                    Мир хоккея<br>для особенных<br>детей
+                  </div>
+                </div>
+              </div>
+              <li class="nav-item py-2">
+                {% url 'main:users' as url_name %}{% include "includes/button.html" with name="Пользователи" %}
+              </li>
+              <li class="nav-item py-2">
+                {% url 'main:teams' as url_name %}{% include "includes/button.html" with name="Команды" %}
+              </li>
+              <li class="nav-item py-2">
+                {% url 'main:competitions' as url_name %}{% include "includes/button.html" with name="Соревнования" %}
+              </li>
+              <li class="nav-item py-2">
+                {% url 'main:analytics% ' as url_name %}{% include "includes/button.html" with name="Аналитика" %}
+              </li>
+              <li class="nav-item py-2">
+                {% url 'main:unloads' as url_name %}{% include "includes/button.html" with name="Выгрузки" %}
+              </li>
+            </ul>
+        </div>
+    </div>
 </div>
diff --git a/adaptive_hockey_federation/templates/includes/footer.html b/adaptive_hockey_federation/templates/includes/footer.html
@@ -1,9 +1,20 @@
+<script type="text/javascript">
+   function toggle_visibility(id) {
+       var e = document.getElementById(id);
+       if(e.style.display == 'block')
+          e.style.display = 'none';
+       else
+          e.style.display = 'block';
+   }
+</script>
+
+
 <div class="footer-copyright">
   <nav class="navbar navbar-light" style="background-color: #64c2d1;">
     <div class="container">
       <div class="nav nav-pills justify-content-start">
-        <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" 
-        aria-controls="staticBackdrop">
+        <button onclick="toggle_visibility('sidebar');" class="btn" type="button"
+        aria-controls="staticBackdrop" aria-expanded="true">
           <i class="bi bi-caret-right-fill fs-3" style="color: white;"></i>
         </button>
         <nav aria-label="Page navigation example" class="p-2">
@@ -24,14 +35,14 @@
           </ul>
         </nav>
       </div>
-      <ul class="nav nav-pills justify-content-end">
-        {% with request.resolver_match.view_name as view_name %} 
+      <ul class="nav nav-pills ">
+        {% with request.resolver_match.view_name as view_name %}
           {% if view_name  == 'main:users' %}{% include "includes/button.html" with name="+ Пользователь" %}{% endif %}
           {% if view_name  == 'main:teams' %}{% include "includes/button.html" with name="+ Команда" %}{% endif %}
           {% if view_name  == 'main:competitions' %}{% include "includes/button.html" with name="+ Соревнование" %}{% endif %}
           {% if view_name  != 'main:unloads' %}{% include "includes/button.html" with name="Выгрузить" %}{% endif %}
         {% endwith %}
       </ul>
     </div>
-  </nav>   
+  </nav>
 </div>
diff --git a/adaptive_hockey_federation/templates/includes/header.html b/adaptive_hockey_federation/templates/includes/header.html
@@ -1,16 +1,15 @@
 <nav class="navbar navbar-light" style="background-color: #64c2d1;">
-  
+
   <div class="container">
     <ul class="nav d-flex justify-content-start">
       <div class="border border-white rounded px-2">
         <i class="bi bi-circle-fill fs-3" style="color: red;"></i>
         <b class="text-xl" style="color: #340061;">Username</b>
       </div>
     </ul>
-
     <ul class="nav justify-content-end">
       <li class="nav-item d-flex">
-        {% include "includes/dropdown_button.html" %}
+
         <a class="nav-link border border-primary place-self-center bg-white p-0.5" href="##">
           <i class="bi bi-search fs-5 p-1 bg-white" style="color: grey;"></i>
         </a>