Merge pull request #1106 from ae-utbm/navbar-keyboard-navigation

Refactor navbar css and use details instead of div for better semantics

core/static/core/navbar.scss

@@ -1,5 +1,7 @@
 @import "colors";
 
+$desktop-size: 500px;
+
 nav.navbar {
   background-color: $primary-dark-color;
   margin: 1em;
@@ -7,15 +9,24 @@ nav.navbar {
   border-radius: 0.6em;
   min-height: 40px;
 
-  @media (max-width: 500px) {
+  @media (max-width: $desktop-size) {
     position: relative;
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
     margin: .2em;
+
+    >.content[mobile-display="hidden"] {
+      display: none;
+    }
+
+    >.content[mobile-display="revealed"] {
+      display: block;
+    }
   }
 
-  > .expand-button {
+
+  >.expand-button {
     background-color: transparent;
     display: none;
     position: relative;
@@ -27,27 +38,27 @@ nav.navbar {
     align-items: center;
     margin: 0;
 
-    > i {
+    >i {
       font-size: 1.5em;
       color: white;
     }
 
-    @media (max-width: 500px) {
+    @media (max-width: $desktop-size) {
       display: flex;
     }
   }
 
-  > .content {
+  >.content {
-    @media (min-width: 500px) {display: flex;
+    @media (min-width: $desktop-size) {
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
-      display: flex !important;
+      display: flex;
     }
 
-    > .menu,
+    >.menu,
-    > .link {
+    >.link {
       box-sizing: border-box;
       width: 130px;
       height: 52px;
@@ -56,7 +67,7 @@ nav.navbar {
       justify-content: center;
       cursor: pointer;
 
-      @media (max-width: 500px) {
+      @media (max-width: $desktop-size) {
         width: 100%;
         height: auto;
         justify-content: flex-start;
@@ -64,80 +75,75 @@ nav.navbar {
         &:last-child {
           border-radius: 0 0 .6em .6em;
 
-          > .content {
+          >.content {
             box-shadow: 3px 3px 3px 0 #dfdfdf;
           }
         }
       }
     }
 
-    > .menu > .head,
+    >.menu>.head,
-    > .link {
+    >.link {
       color: white;
-      padding: 10px 20px;
+    }
-      box-sizing: border-box;
 
-      @media (max-width: 500px) {
+    >.menu>summary,
+    >.link {
+      @media (max-width: $desktop-size) {
         padding: 10px;
       }
     }
 
+    >.link {
+      padding: 10px 20px;
+      box-sizing: border-box;
+    }
+
+
     .link:hover,
     .menu:hover {
       background-color: rgba(0, 0, 0, .2);
     }
 
-    > .menu > .head,
+    details.menu {
-    > .link {
+      cursor: pointer;
-      color: white;
+      user-select: none;
-      padding: 10px 20px;
+      z-index: 10;
-      box-sizing: border-box;
+      align-items: center;
+      display: inline-block;
 
-      @media (max-width: 500px) {
+      summary {
-        padding: 10px;
+        list-style: none;
+
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding-left: 20px;
+        padding-right: 20px;
+
+        @media (min-width: $desktop-size) {
+          justify-content: center;
+        }
       }
-    }
 
-    .link:hover,
+      summary::-webkit-details-marker {
-    .menu:hover {
-      background-color: rgba(0, 0, 0, .2);
-    }
-
-    > .menu:hover > .content,
-    > .menu > .head:hover + .content,
-    > .menu > .content:hover {
-      display: flex;
-    }
-
-    > .menu {
-      display: flex;
-      position: relative;
-
-      > .content {
-        z-index: 10;
         display: none;
-        position: absolute;
+      }
-        top: 100%;
-        background-color: white;
-        margin: 0;
-        list-style-type: none;
-        width: 130px;
-        box-shadow: 3px 3px 3px 0 #dfdfdf;
-        flex-direction: column;
 
-        @media (max-width: 500px) {
+      ul.content {
-          position: absolute;
+        list-style-type: none;
-          flex-direction: row;
+        background: white;
-          flex-wrap: wrap;
+        margin: 0;
-          width: 100%;
+
-          box-shadow: inset 3px 3px 3px 0 #dfdfdf;
+        @media (min-width: $desktop-size) {
+          box-shadow: 3px 3px 3px 0 #dfdfdf;
         }
 
-        > li > a {
+        >li>a {
           display: flex;
           padding: 15px 20px;
 
-          @media (max-width: 500px) {
+          @media (max-width: $desktop-size) {
             padding: 10px;
           }
 

core/templates/core/base.jinja

@@ -124,10 +124,27 @@
 
     {% block script %}
       <script>
+        const menuItems = document.querySelectorAll(".navbar details[name='navbar'].menu");
+        const isMobile = () => {
+          return window.innerWidth >= 500;
+        }
+        for (const item of menuItems){
+          item.addEventListener("mouseover", () => {
+            if (isMobile()){
+              item.setAttribute("open", "");
+            }
+          })
+          item.addEventListener("mouseout", () => {
+            if (isMobile()){
+              item.removeAttribute("open");
+            }
+          })
+        }
+
         function showMenu() {
           let navbar = document.getElementById("navbar-content");
-          const current = navbar.style.getPropertyValue("display");
+          const current = navbar.getAttribute("mobile-display");
-          navbar.style.setProperty("display", current === "none" ? "block" : "none");
+          navbar.setAttribute("mobile-display", current === "hidden" ? "revealed" : "hidden")
         }
 
         document.addEventListener("keydown", (e) => {

core/templates/core/base/navbar.jinja

@@ -1,47 +1,47 @@
 <nav class="navbar">
   <button class="expand-button" onclick="showMenu()"><i class="fa fa-bars"></i></button>
-  <div id="navbar-content" class="content" style="display: none;">
+  <div id="navbar-content" class="content" mobile-display="hidden">
     <a class="link" href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
-    <div class="menu">
+    <details name="navbar" class="menu">
-      <span class="head">{% trans %}Associations & Clubs{% endtrans %}</span>
+      <summary class="head">{% trans %}Associations & Clubs{% endtrans %}</summary>
       <ul class="content">
         <li><a href="{{ url('core:page', page_name='ae') }}">{% trans %}AE{% endtrans %}</a></li>
         <li><a href="{{ url('core:page', page_name='clubs') }}">{% trans %}AE's clubs{% endtrans %}</a></li>
         <li><a href="{{ url('core:page', page_name='utbm-associations') }}">{% trans %}Others UTBM's Associations{% endtrans %}</a></li>
       </ul>
-    </div>
+    </details>
-    <div class="menu">
+    <details name="navbar" class="menu">
-      <span class="head">{% trans %}Events{% endtrans %}</span>
+      <summary class="head">{% trans %}Events{% endtrans %}</summary>
       <ul class="content">
         <li><a href="{{ url('election:list') }}">{% trans %}Elections{% endtrans %}</a></li>
         <li><a href="{{ url('core:page', page_name='ga') }}">{% trans %}Big event{% endtrans %}</a></li>
       </ul>
-    </div>
+    </details>
     <a class="link" href="{{ url('forum:main') }}">{% trans %}Forum{% endtrans %}</a>
     <a class="link" href="{{ url('sas:main') }}">{% trans %}Gallery{% endtrans %}</a>
     <a class="link" href="{{ url('eboutic:main') }}">{% trans %}Eboutic{% endtrans %}</a>
-    <div class="menu">
+    <details name="navbar" class="menu">
-      <span class="head">{% trans %}Services{% endtrans %}</span>
+      <summary class="head">{% trans %}Services{% endtrans %}</summary>
       <ul class="content">
         <li><a href="{{ url('matmat:search_clear') }}">{% trans %}Matmatronch{% endtrans %}</a></li>
         <li><a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a></li>
         <li><a href="{{ url('pedagogy:guide') }}">{% trans %}Pedagogy{% endtrans %}</a></li>
       </ul>
-    </div>
+    </details>
-    <div class="menu">
+    <details name="navbar" class="menu">
-      <span class="head">{% trans %}My Benefits{% endtrans %}</span>
+      <summary class="head">{% trans %}My Benefits{% endtrans %}</summary>
       <ul class="content">
         <li><a href="{{ url('core:page', page_name='partenaires')}}">{% trans %}Sponsors{% endtrans %}</a></li>
         <li><a href="{{ url('core:page', page_name='avantages') }}">{% trans %}Subscriber benefits{% endtrans %}</a></li>
       </ul>
-    </div>
+    </details>
-    <div class="menu">
+    <details name="navbar" class="menu">
-      <span class="head">{% trans %}Help{% endtrans %}</span>
+      <summary class="head">{% trans %}Help{% endtrans %}</summary>
       <ul class="content">
         <li><a href="{{ url('core:page', page_name='FAQ') }}">{% trans %}FAQ{% endtrans %}</a></li>
         <li><a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a></li>
         <li><a href="{{ url('core:page', page_name='Index') }}">{% trans %}Wiki{% endtrans %}</a></li>
       </ul>
-    </div>
+    </details>
   </div>
 </nav>