From a1b5d9b0df9b3a753060cb940debbf9564cfcf3b Mon Sep 17 00:00:00 2001
From: Anaïs Amato <anais.amato@irap.omp.eu>
Date: Wed, 28 Apr 2021 11:48:24 +0200
Subject: [PATCH] Add responsive menu (sidebar with hamburger button)

---
 app/static/css/style.css     |  8 ++++++++
 app/templates/base_page.html | 17 +++++++----------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 5eb1b20..07eded6 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -80,3 +80,11 @@ nav.sidebar a.disabled {
 .dev2-icon {
     filter: hue-rotate(100deg) saturate(1000%);
 }
+
+/* Update the navbar for small screens. Replace bootstrap css for small screens only */
+@media (max-width: 600px) {
+    .sidebar {
+        position: static !important;
+        margin-top: 0px !important;
+    }
+}
diff --git a/app/templates/base_page.html b/app/templates/base_page.html
index 9449d9a..e902ec3 100644
--- a/app/templates/base_page.html
+++ b/app/templates/base_page.html
@@ -12,7 +12,7 @@
       <img class="m-0 mr-1 {{config.PDC_SITE_CLASS}}" src="{{ url_for('static', filename='img/pdc-ico.png', version=config.VERSION) }}" height="30" width="30"/>
 
       {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a>
-    <ul class="navbar-nav ml-auto">
+    <ul class="navbar-nav flex-row ml-auto">
       {% if not current_user.is_anonymous %}
       <li class="nav-item">
         <span class="navbar-brand">{{current_user.name}}</span>
@@ -30,16 +30,13 @@
 
   <div class="container-fluid">
     <div class="row">
-      <nav class="col-md-2 d-none d-md-block bg-light sidebar mt-3">
-        <div class="sidebar-sticky">
+      <nav class="col-md-2 col-sm-auto col-xs-auto navbar-light bg-light navbar-expand-md sidebar mt-5">
+          <button id="test" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="sidebar-sticky collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="nav flex-column" id="v_menu">
             <li class="nav-item">
-              <a class="nav-link" href="#">
-                <span data-feather="home"></span>
-                accueil
-              </a>
-            </li>
-            <li class="nav-item">
               <a aria-expanded="false" id="agents" class="main-nav nav-link" data-target="#agent" data-toggle="collapse" href="#">
                 <span data-feather="user"></span>
                 Agent
@@ -122,7 +119,7 @@
         </footer>
       </nav>
 
-      <main id="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" role="main">
+      <main id="main" class="ml-md-auto ml-sm-5 ml-xs-8 col-xs-4 col-sm-11 col-md-9 col-lg-10 pt-3 px-4" role="main">
         <h2 class="sub-header">{{subtitle}}</h2>
         {% include 'flash-messages.html' %}
         {% block content %}
--
libgit2 0.21.2