Added responsivness for navbar. added resize event listener, openMenu() and closeMenu() functions to navbar.js

components/navbar.html

@@ -1,5 +1,15 @@
 <nav id="navbar_component">
+    <div id="navbar_menu">
+        <a class="navbar_menu-click" href="javascript:openMenu()">
+            <span class="iconify" data-icon="mdi-menu"></span>
+        </a>
+    </div>
     <div id="navbar_text-container">
+        <div class="navbar_menu-close">
+            <a href="javascript:closeMenu()">
+                <span class="iconify" data-icon="mdi-close"></span>
+            </a>
+        </div>
         <ul>
             <li>
                 <a href="avocat">Votre Avocat</a>

css/navbar.css

@@ -2,19 +2,6 @@
     padding: 2.5rem;
 }
 
-#navbar_component {
-    align-items: center;
-    display: flex;
-    height: 5rem;
-    padding: 0 5rem;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background-color: var(--color-light);
-    z-index: 3;
-    overflow: initial;
-}
-
 #navbar_logo-container {
     height: 5rem;
     width: 5rem;
@@ -27,16 +14,126 @@
     height: 5rem;
 }
 
-#navbar_text-container {
+@media screen and (min-width: 800px) {
+    #navbar_component {
+        align-items: center;
+        display: flex;
+        height: 5rem;
+        padding: 0 5rem;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        background-color: var(--color-light);
+        z-index: 3;
+        overflow: initial;
+    }
+
+    #navbar_text-container {
         font-family: 'Josefin Sans', sans-serif;
         position: fixed;
-}
+        display: block;
+    }
 
-#navbar_text-container li {
+    #navbar_text-container li {
         border-radius: 4px;
         display: inline-block;
         padding: 1rem 0;
         transition: all .3s ease 0s;
+    }
+
+    #navbar_menu {
+        display: none;
+    }
+
+    .navbar_dropdown {
+        align-items: center;
+        background-color: rgba(255, 255, 255, 0.75);
+        top: 5rem;
+        backdrop-filter: blur(16px);
+        border-radius: .25rem;
+        box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
+        flex-direction: column;
+        float: none;
+        justify-content: center;
+        position: absolute;
+        width: 15rem;
+        overflow: initial;
+        display: none;
+        z-index: 10;
+    }
+
+    .navbar_menu-close{
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    #navbar_component {
+        align-items: center;
+        display: flex;
+        height: 5rem;
+        padding: 0 2.5rem;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        background-color: var(--color-light);
+        z-index: 11;
+        overflow: initial;
+    }
+
+    #navbar_text-container {
+        font-family: 'Josefin Sans', sans-serif;
+        position: fixed;
+        left: 0;
+        top: 0;
+        background-color: var(--color-white);
+        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+        z-index: 100;
+        padding-left: 1.5rem;
+        padding-right: 0.25rem;
+        height: 100%;
+        display: none;
+    }
+
+    #navbar_text-container li {
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+        transition: all .3s ease 0s;
+    }
+
+    #navbar_menu svg{
+        font-size: 50px;
+        color: var(--color-dark);
+        transition: all .3s ease 0s;
+    }
+
+    #navbar_menu svg:hover{
+        color: var(--color-white);
+    }
+
+    .navbar_menu-close svg{
+        font-size: 50px;
+        color: var(--color-dark);
+        transition: all .3s ease 0s;
+    }
+
+    .navbar_dropdown {
+        align-items: center;
+        background-color: rgba(255, 255, 255, 0.75);
+        left: 14rem;
+        backdrop-filter: blur(16px);
+        border-radius: .25rem;
+        box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
+        flex-direction: column;
+        float: none;
+        justify-content: center;
+        position: absolute;
+        width: 15rem;
+        overflow: initial;
+        display: none;
+        z-index: 11;
+    }
 }
 
 #navbar_text-container a,
@@ -58,23 +155,6 @@ button {
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 
-.navbar_dropdown {
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.75);
-    top: 5rem;
-    backdrop-filter: blur(16px);
-    border-radius: .25rem;
-    box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
-    flex-direction: column;
-    float: none;
-    justify-content: center;
-    position: absolute;
-    width: 15rem;
-    overflow: initial;
-    display: none;
-    z-index: 10;
-}
-
 .navbar_dropdown a {
     border-radius: 0 !important;
     width: 100%;

index.html

@@ -8,6 +8,7 @@
 
     <script src="lib/anime.min.js"></script>
     <script src="js/base.js"></script>
+    <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
     <link href="css/index.css" rel="stylesheet">
 </head>
 

js/import.js

@@ -0,0 +1 @@
+import { mdiAccount } from '@mdi/js';

js/navbar.js

@@ -2,16 +2,18 @@
 /*           global variables           */
 /****************************************/
 
+//When window width >800 set to true
+var mobileMode = false
 //enterAnimation is a status linked to mouseenter/leave of the icon
 var enterAnimation = false;
 //each <li> tag of the navbar_text-container
-var dropdownList = document.getElementById("navbar_text-container").children[0].children;
+var dropdownList = document.getElementById("navbar_text-container").children[1].children;
 //each <a> tag in the navbar
 var aTagList = getNavbarTextContainer();
 //a list
 var dropdownStatus = Array(aTagList.length).fill(false);
 //list of dropdown links
-var dropdownLinks = ["droits/penal.html","droits/affaire.html","join/contact.html","join/coordonees.html"];
+var dropdownLinks = ["droits/penal.html", "droits/affaire.html", "join/contact.html", "join/coordonees.html"];
 //list of container links
 var containerLinks = ["avocat"];
 //navbarDropdown Element
@@ -62,9 +64,8 @@ function setDropdown(display, element) {
  */
 function getNavbarTextContainer() {
     var returnAtag = [];
-    var container = document.getElementById("navbar_text-container");
     //For each a tag we found in the text container, push the element to the return array
-    for (var aTag of container.children[0].children) {
+    for (var aTag of dropdownList) {
         returnAtag.push(aTag.children[0])
     }
     return returnAtag;
@@ -80,41 +81,44 @@ function resetNavbar() {
     }
 }
 
+function openMenu() {
+    document.getElementById("navbar_text-container").style.display = "block";
+}
+
+function closeMenu() {
+    document.getElementById("navbar_text-container").style.display = "none";
+}
+
 /****************************************/
 /*                 main                 */
 /****************************************/
 
 //Setting the logo URL
-document.getElementsByClassName("navbar_logo")[0].src = urlStr+"/assets/Logo.png";
+document.getElementsByClassName("navbar_logo")[0].src = urlStr + "/assets/Logo.png";
 //Setting the logo href
 document.getElementById("navbar_logo-home").href = urlStr;
 
 //Setting the href links for in directory links
 var urlOffset = urlStr.length
 //if dir found, we apply the dir offset + '/' (1 char)
-if(dirStr.length > 1)
+if (dirStr.length > 1) {
-{
     urlOffset = urlOffset + dirStr.length + 1;
 }
 //dor evry dropdown of the navbar we check each <a> 
-for(var dropdown of navbarDropdown)
+for (var dropdown of navbarDropdown) {
-{
+    for (var aTagDropdown of dropdown.children) {
-    for(var aTagDropdown of dropdown.children)
-    {
         //We slice the href with the url and the directory offset
-        var pathStr = aTagDropdown.href.slice(urlOffset,aTagDropdown.href.length);
+        var pathStr = aTagDropdown.href.slice(urlOffset, aTagDropdown.href.length);
         //We then put again the url and the path we want
-        aTagDropdown.href = urlStr+pathStr;
+        aTagDropdown.href = urlStr + pathStr;
     }
 }
 //We do the same but with aTag replacing aTagDropdown, each <a> of the aTagList
-for(var aTag of aTagList)
+for (var aTag of aTagList) {
-{
     //only aTag that are not blank (=#0) are affected
-    if(!(aTag.href.includes("#0")))
+    if (!(aTag.href.includes("#0"))) {
-    {
+        var pathStr = aTag.href.slice(urlOffset, aTag.href.length);
-        var pathStr = aTag.href.slice(urlOffset,aTag.href.length);
+        aTag.href = urlStr + pathStr;
-        aTag.href = urlStr+pathStr;
     }
 }
 
@@ -146,13 +150,12 @@ document.getElementById("navbar_logo-container").addEventListener("mouseleave",
 for (var dropdownElement of dropdownList) {
     var dropdownLink = dropdownElement.children[0];
     dropdownLink.addEventListener("click", function (e) {
-        if (e.target.parentNode.children.length > 1)
+        if (e.target.parentNode.children.length > 1) {
-        {
             var styleDropdown = e.target.parentNode.children[1].style.display;
             //We reset all navbar
             resetNavbar();
             //If the dropdown was hidden, show the item
-            if(!(styleDropdown == "block")) {
+            if (!(styleDropdown == "block")) {
                 //we get the parent node of the <a> tag
                 var dropdownLink = e.target.parentNode;
                 setDropdown("block", dropdownLink);
@@ -176,3 +179,17 @@ window.addEventListener('click', function (e) {
         resetNavbar();
     }
 });
+
+//When changing the window size
+window.addEventListener('resize', function (e) {
+    if((window.innerWidth > 800) && mobileMode)
+    {
+        openMenu();
+        mobileMode = false;
+    }
+    if((window.innerWidth < 800) && !mobileMode)
+    {
+        closeMenu();
+        mobileMode = true;
+    }
+});