From 0ce87ba16027349099d244dcc832b89680242233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Lech=C3=A9mia?=
 <theo.lechemia@ecrins-parcnational.fr>
Date: Mon, 22 May 2023 18:04:41 +0200
Subject: [PATCH] Fixed navbar and sidenav (#2556)

* Fixed navbar and sidenav
add toggle btn to hidde sidenav

* style
---
 .../templates/admin/index_layout.html         | 34 ++++---
 backend/geonature/templates/layout.html       | 99 +++++++++++--------
 2 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/backend/geonature/templates/admin/index_layout.html b/backend/geonature/templates/admin/index_layout.html
index 95ae680d55..adeac99710 100644
--- a/backend/geonature/templates/admin/index_layout.html
+++ b/backend/geonature/templates/admin/index_layout.html
@@ -10,36 +10,38 @@
       {% set children = item.get_children() %}
       {%- if children %}
       <a 
-        data-toggle="collapse" 
-        href="#collapseExample" 
-        class="list-group-item disabled list-group-item-action main-item">
+        class="list-group-item list-group-item-action main-item">
         {{ layout.menu_icon(item) }}{{ item.name }}
       </a>
-          {%- for child in children -%}
-            {%- if child.is_category() -%}
-              {{ menu(menu_root=[child]) }}
-            {% else %}
 
-              <a 
-                href="{{ child.get_url() }}" 
-                class="list-group-item list-group-item-action child-item">
-                {{ layout.menu_icon(child) }}{{ child.name }}
-              </a>
+          {%- for child in children -%}
+          {%- if child.is_category() -%}
+                {{ menu(menu_root=[child]) }}
+              {% else %}
+              
+                <a 
+                  href="{{ child.get_url() }}" 
+                  class="list-group-item list-group-item-action child-item">
+                  {{ layout.menu_icon(child) }}{{ child.name }}
+                </a>
+                
+                {%- endif %}
+                {%- endfor %}
 
-            {%- endif %}
-          {%- endfor %}
       {% endif %}
     {%- else %}
-      {%- if item.is_accessible() and item.is_visible() -%}
+      {%- if item.is_accessible() and item.is_visible() and item.name != 'Accueil' -%}
+      
           <a 
             href="{{ item.get_url() }}"  
             {% if item.target %} target="{{ item.target }}"{% endif %} 
             class="list-group-item list-group-item-action main-item">
-            {{ layout.menu_icon(item) }}{{ item.name }}
+            {{ layout.menu_icon(item) }}{{ item.name }} 
           </a>
 
       {%- endif -%}
     {% endif -%}
   {% endfor %}
 </div>
+
 {% endmacro %}
diff --git a/backend/geonature/templates/layout.html b/backend/geonature/templates/layout.html
index 81590f58e3..0bfc4406b9 100644
--- a/backend/geonature/templates/layout.html
+++ b/backend/geonature/templates/layout.html
@@ -3,69 +3,90 @@
 
 {% extends 'admin/base.html' %}
 
-{% block head_tail %}
+{% block head_css %}
   {{ super() }}
   <style>
-        .side-nav {
-            min-height: 94vh;
-            width: 15%;
-            background-color:#EEE; ;
+        #sticky-sidebar {
+            max-height: 94vh;
+            overflow-y: auto;
         }
-        #main {
-            display: flex;
+
+        #container {
+            margin-top:80px;
         }
         .navbar {
             margin-bottom: 0px;
         }
         #header {
-            height: 6vh;
+            height: 60px;
+            z-index: 100;
+            background-color: white;
+            border-bottom: solid 1px;
         }
         .main-item {
             font-weight: bold;
+            background-color: gainsboro!important;
         }
         .child-item {
             padding-left: 35px;
         }
-        #content {
-            width: 85%;
-            padding: 20px;
-        }
-        #header {
-            border-bottom: solid 1px;
+        #sideNavToggler{
+            border-color:black
         }
 </style>
 {% endblock %}
 
-{% block page_body %}
+{% block head_tail %}
+<script>
+    function toggleSideBar() {
+    var main = document.getElementById("main");
+    if(main.classList.contains("offset-2")) {
+        document.getElementById("sticky-sidebar").style.display = "none"
+        main.classList.remove("offset-2");
+        main.classList.remove("col-10");
+        main.classList.add("col-12");
+    } else {
+        document.getElementById("sticky-sidebar").style.display = "block"
+        main.classList.add("offset-2");
+        main.classList.remove("col-12");
+        main.classList.add("col-10");
+    }
 
+}
 
-<div id="container">
-    <nav id="header" class="navbar navbar-expand-lg navbar-light">
-        <a class="navbar-brand mr-auto" href=" {{url_for("admin.index")}} ">Administration GeoNature</a>
-        <ul class="navbar-nav my-2 my-lg-0">
-            <li class="nav-item">
-                {{layout.menu_links()}}
-            </li>
-        </ul>
-      </nav>
+</script>
+{% endblock %}
 
-    <div id="main">
-        <nav class="side-nav">
-           {{index_layout.menu()}} 
+{% block page_body %}
 
-        </nav>
-        <div id="content" >
-            {% block brand %}
-            <h2 id="brand">{{ admin_view.name|capitalize }}</h2>
-            {% endblock %}
-            {{ layout.messages() }}
+<nav id="header" class="navbar navbar-expand-lg navbar-light fixed-top">
     
-            {% set render_ctx = h.resolve_ctx() %}
+    <button id="sideNavToggler" class="mr-2 btn btn-light" type="button" onclick="toggleSideBar()" > <span class="navbar-toggler-icon"></span></button>
+    <a class="navbar-brand mr-auto" href=" {{url_for("admin.index")}} "> 
+        <i class="fa fa-home"></i>
+         Administration GeoNature
+    </a>
+    <ul class="navbar-nav my-2 my-lg-0">
+        <li class="nav-item">
+            {{layout.menu_links()}}
+        </li>
+    </ul>
+  </nav>
+    <div class="container-fluid" id="container">
+        <div class="row" >
+            <div class="col-2 px-1 position-fixed" id="sticky-sidebar">
     
-            {% block body %}
-            {% endblock %}
-         </div>
-    </div>
+                {{index_layout.menu()}} 
+            </div>
+
+            <div class="col-10 offset-2" id="main">
+                {% block body %}
+                 {% endblock %}
+            </div>
+        </div>
 
-</div>
+    </div>
 {% endblock %}
+
+
+