Responsive navigation bar for small screens

mainsite/scss/header.scss

@@ -1,33 +1,76 @@
 header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
     align-content: stretch;
 
     background-color: $header_bg_color;
     color: $header_text_color;
     padding: 0 30px;
+    gap: 20px;
 
     border-bottom: 4px solid $header_border_color;
 
+    @media (max-width: 800px) {
+        padding: 0 10px;
+        flex-direction: column;
+        gap: 0;
+    }
+
+    @media (max-width: 500px) {
+        padding: 0;
+    }
+
     h1 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         margin: 0;
-        padding: 0 20px;
+        padding: 5px 20px;
         color: $header_text_color;
         font-size: 1em;
+
+        @media (max-width: 700px) {
+            font-size: 1.25em;
+        }
+    }
+
+    #mobile_nav_trigger {
+        display: none;
+        text-align: center;
+        border-top: 4px solid $header_border_color;
+        padding: 5px 10px;
     }
 
     nav {
         display: flex;
-        justify-content: left;
+        justify-content: space-between;
-        margin: 0 20px;
+        flex: 1 1 auto;
-        flex: 1 1 100px;
+
+        @media (max-width: 500px) {
+            flex-direction: column;
+        }
+
+        div {
+            display: flex;
+
+            @media (max-width: 500px) {
+                flex-direction: column;
+            }
+        }
+    }
+
+    .links {
+        display: flex;
+        flex: 1 0 auto;
     }
 
     a {
-        display: block;
+        display: flex;
-        margin: 0;
         padding: 10px 20px;
+    }
+
+    a, #mobile_nav_trigger {
+        align-items: center;
+        margin: 0;
         border-radius: 0;
 
         color: $header_text_color;
@@ -47,7 +90,16 @@ header {
         }
     }
 
-    .username {
+    #account {
-        font-size: 0.7em;
+        flex-direction: row;
+        justify-content: end;
+
+        a {
+            padding: 10px;
+        }
+
+        .username {
+            font-size: 0.7em;
+        }
     }
 }

mainsite/static/css/style.css

@@ -1,41 +1,76 @@
 @import url(fonts.css);
 header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   align-content: stretch;
   background-color: #6bb8c4;
   color: #f6fbfd;
   padding: 0 30px;
+  gap: 20px;
   border-bottom: 4px solid #51808c; }
+  @media (max-width: 800px) {
+    header {
+      padding: 0 10px;
+      flex-direction: column;
+      gap: 0; } }
+  @media (max-width: 500px) {
+    header {
+      padding: 0; } }
   header h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin: 0;
-    padding: 0 20px;
+    padding: 5px 20px;
     color: #f6fbfd;
     font-size: 1em; }
+    @media (max-width: 700px) {
+      header h1 {
+        font-size: 1.25em; } }
+  header #mobile_nav_trigger {
+    display: none;
+    text-align: center;
+    border-top: 4px solid #51808c;
+    padding: 5px 10px; }
   header nav {
     display: flex;
-    justify-content: left;
+    justify-content: space-between;
-    margin: 0 20px;
+    flex: 1 1 auto; }
-    flex: 1 1 100px; }
+    @media (max-width: 500px) {
+      header nav {
+        flex-direction: column; } }
+    header nav div {
+      display: flex; }
+      @media (max-width: 500px) {
+        header nav div {
+          flex-direction: column; } }
+  header .links {
+    display: flex;
+    flex: 1 0 auto; }
   header a {
-    display: block;
+    display: flex;
+    padding: 10px 20px; }
+  header a, header #mobile_nav_trigger {
+    align-items: center;
     margin: 0;
-    padding: 10px 20px;
     border-radius: 0;
     color: #f6fbfd;
     text-decoration: none; }
-    header a:hover {
+    header a:hover, header #mobile_nav_trigger:hover {
       background-color: #48a6b4;
       color: #1e464c; }
-    header a.current {
+    header a.current, header #mobile_nav_trigger.current {
       background-color: #51808c; }
-    header a:focus {
+    header a:focus, header #mobile_nav_trigger:focus {
       background-color: #48a6b4;
       box-shadow: none;
       color: #1e464c; }
-  header .username {
+  header #account {
-    font-size: 0.7em; }
+    flex-direction: row;
+    justify-content: end; }
+    header #account a {
+      padding: 10px; }
+    header #account .username {
+      font-size: 0.7em; }
 
 form {
   display: flex;

mainsite/static/js/gestiojeux.js

@@ -1,25 +1,30 @@
-const MOBILE_NAV_PAGE_SIZE = 475; // px
+const MOBILE_NAV_PAGE_SIZE = 500; // px
 const MOBILE_NAV_TOGGLE_TIME = 300; // msec
 const TEXTAREA_MIN_SIZE = 120; // px
 
-function mobile_nav_toggle() {
+function toggle_mobile_nav() {
-    $("nav > a").slideToggle(MOBILE_NAV_TOGGLE_TIME);
+    $("nav").slideToggle(MOBILE_NAV_TOGGLE_TIME);
 }
 
-$(window).resize(function () {
+function check_mobile_nav_window_size() {
     if(window.innerWidth > MOBILE_NAV_PAGE_SIZE) {
-        $("nav > a").show(0);
+        $("nav").show(0);
+        $("#mobile_nav_trigger").hide(0);
     }
     else {
-        $("nav > a").hide(0);
+        $("nav").hide(0);
+        $("#mobile_nav_trigger").show(0);
     }
-});
+}
 
-$('textarea').each(function () {
+$(window).resize(check_mobile_nav_window_size);
-    this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + 'px';
+check_mobile_nav_window_size();
-    this.style.resize = 'none';
+
-    this.style.overflowY = 'hidden';
+$("textarea").each(function () {
-}).on('input', function () {
+    this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + "px";
-    this.style.height = 'auto';
+    this.style.resize = "none";
-    this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + 'px';
+    this.style.overflowY = "hidden";
+}).on("input", function () {
+    this.style.height = "auto";
+    this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + "px";
 });

mainsite/templates/partials/header.html

@@ -1,20 +1,28 @@
 <header>
   <h1>GestioJeux</h1>
 
-  {% with url_name=request.resolver_match.url_name %}
+  <div id="mobile_nav_trigger" onclick="toggle_mobile_nav()">
+    <i class="fa fa-fw fa-bars" aria-hidden="true"></i> Menu
+  </div>
+
   <nav>
-    <a {% if url_name == "home" %}class="current"{% endif %} href="{% url "mainsite:home" %}"><i class="fa fa-home" aria-hidden="true"></i></a>
+    {% with url_name=request.resolver_match.url_name %}
-    <a {% if url_name == "inventory" %}class="current"{% endif %} href="{% url "inventory:inventory" %}">Inventaire</a>
+    <div>
-    <a {% if url_name == "suggestions" %}class="current"{% endif %} href="">Suggestions</a>
+      <a {% if url_name == "home" %}class="current"{% endif %} href="{% url "mainsite:home" %}"><i class="fa fa-home" aria-hidden="true"></i></a>
-    {% if request.user.is_staff %}
+      <a {% if url_name == "inventory" %}class="current"{% endif %} href="{% url "inventory:inventory" %}">Inventaire</a>
-    <a href="{% url "admin:index" %}">Admin</a>
+      <a {% if url_name == "suggestions" %}class="current"{% endif %} href="">Suggestions</a>
-    {% endif %}
+      {% if request.user.is_staff %}
-  </nav>
+      <a href="{% url "admin:index" %}">Admin</a>
-  {% if request.user.is_authenticated %}
+      {% endif %}
-  <a class="username" href="{% url "accounts:account_settings" %}">{{ request.user }}</a>
+    </div>
-  <a class="login" href="{% url "accounts:logout" %}?next={{ request.get_full_path }}"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
+    <div id="account">
-  {% else %}
+      {% if request.user.is_authenticated %}
-  <a class="login{% if url_name == "login" %} current{% endif %}" href="{% url "accounts:login" %}?next={{ request.get_full_path }}">Connexion</a>
+      <a class="username" href="{% url "accounts:account_settings" %}">{{ request.user }}</a>
-  {% endif %}
+      <a class="logout" href="{% url "accounts:logout" %}?next={{ request.get_full_path }}"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
-  {% endwith %}
+      {% else %}
+      <a class="login{% if url_name == "login" %} current{% endif %}" href="{% url "accounts:login" %}?next={{ request.get_full_path }}">Connexion</a>
+      {% endif %}
+    </div>
+    {% endwith %}
+  </div>
 </header>