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

core/static/core/navbar.scss

@@ -13,8 +13,17 @@ nav.navbar {
     align-items: flex-start;
     gap: 0;
     margin: .2em;
+
+    >.content[mobile-display="hidden"] {
+      display: none;
     }
 
+    >.content[mobile-display="revealed"] {
+      display: block;
+    }
+  }
+
+
   >.expand-button {
     background-color: transparent;
     display: none;
@@ -38,12 +47,12 @@ nav.navbar {
   }
 
   >.content {
-    @media (min-width: 500px) {display: flex;
+    @media (min-width: 500px) {
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
-      display: flex !important;
+      display: flex;
     }
 
     >.menu,
@@ -74,65 +83,53 @@ nav.navbar {
     >.menu>.head,
     >.link {
       color: white;
-      padding: 10px 20px;
-      box-sizing: border-box;
-
-      @media (max-width: 500px) {
-        padding: 10px;
-      }
     }
 
-    .link:hover,
+    >.menu>summary,
-    .menu:hover {
-      background-color: rgba(0, 0, 0, .2);
-    }
-
-    > .menu > .head,
     >.link {
-      color: white;
-      padding: 10px 20px;
-      box-sizing: border-box;
-
       @media (max-width: 500px) {
         padding: 10px;
       }
     }
 
+    >.link {
+      padding: 10px 20px;
+      box-sizing: border-box;
+    }
+
+
     .link:hover,
     .menu:hover {
       background-color: rgba(0, 0, 0, .2);
     }
 
-    > .menu:hover > .content,
+    details.menu {
-    > .menu > .head:hover + .content,
+      cursor: pointer;
-    > .menu > .content:hover {
+      user-select: none;
-      display: flex;
-    }
-
-    > .menu {
-      display: flex;
-      position: relative;
-
-      > .content {
       z-index: 10;
-        display: none;
+      align-items: center;
-        position: absolute;
+      display: inline-block;
-        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) {
+      summary {
-          position: absolute;
+        list-style: none;
-          flex-direction: row;
+
-          flex-wrap: wrap;
+        display: flex;
-          width: 100%;
+        align-items: center;
-          box-shadow: inset 3px 3px 3px 0 #dfdfdf;
+        height: 100%;
+        padding-left: 20px;
+        padding-right: 20px;
       }
 
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      ul.content {
+        list-style-type: none;
+        box-shadow: 3px 3px 3px 0 #dfdfdf;
+        background: white;
+        margin: 0;
+
         >li>a {
           display: flex;
           padding: 15px 20px;

core/templates/core/base.jinja

@@ -122,10 +122,20 @@
 
     {% block script %}
       <script>
+        const menuItems = document.querySelectorAll(".navbar details[name='navbar'].menu");
+        for (const item of menuItems){
+          item.addEventListener("mouseover", () => {
+            item.setAttribute("open", "");
+          })
+          item.addEventListener("mouseout", () => {
+            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>