Added favicon, animation for menu selection, responsiveness for the footer element

components/navbar.html

@@ -1,12 +1,17 @@
 <nav id="navbar_component">
     <div id="navbar_menu">
         <a class="navbar_menu-click" href="javascript:openMenu()">
-            <span class="iconify" data-icon="mdi-menu"></span>
+            <svg width="1em" height="1em" viewBox="0 0 24 24"
+                style="vertical-align: -0.125em; transform: rotate(360deg);">
+                <polygon
+                    points="3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16"
+                    fill="currentColor" />
+            </svg>
         </a>
     </div>
     <div id="navbar_text-container">
         <div class="navbar_menu-close">
-            <a href="javascript:closeMenu()">
+            <a class="navbar_menu-close-btn" href="javascript:closeMenu()">
                 <span class="iconify" data-icon="mdi-close"></span>
             </a>
         </div>

css/footer.css

@@ -1,57 +1,101 @@
-.footer-container
+@media screen and (min-width: 700px) {
-{
+    .footer-container {
-    display: flex;
+        display: flex;
-    height: 15rem;
+        height: 15rem;
-    background-color: var(--color-dark);
+        background-color: var(--color-dark);
-    color: var(--color-white);
+        color: var(--color-white);
-    overflow: clip;
+        overflow: clip;
+    }
+
+    .footer-bottom_grid {
+        flex: 1;
+        padding: 1rem 4rem;
+        word-wrap: break-word;
+    }
+
+    .legal{
+        border-radius: .5rem;
+        height: 80%;
+        width: 50%;
+        position: relative;
+        top: 10%;
+        left: 25%;
+        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;
+    }
 }
 
-.footer-container_grid
+@media screen and (max-width: 700px) {
-{
+    .footer-container {
+        display: flex;
+        height: 15rem;
+        background-color: var(--color-dark);
+        color: var(--color-white);
+        overflow: clip;
+        flex-direction: column;
+    }
+
+    .footer-bottom_grid {
+        flex: 1;
+        padding: 0.5rem;
+        word-wrap: break-word;
+        font-size: small;
+    }
+
+    .footer-bottom_grid.right-align{
+        padding-right: 1rem;
+    }
+
+    .footer-bottom_grid.left-align{
+        padding-left: 1rem;
+    }
+
+    .legal{
+        border-radius: .5rem;
+        height: 80%;
+        width: 60%;
+        position: relative;
+        top: 10%;
+        left: 20%;
+        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;
+    }
+}
+
+.footer-container_grid {
     flex: 1;
     padding: 1rem 2rem;
     word-wrap: break-word;
 }
 
-.footer-bottom
+.footer-bottom {
-{
     background-color: var(--color-gray);
     color: var(--color-white);
     display: flex;
-    align-items:center;
+    align-items: center;
     height: 2.5rem;
     vertical-align: middle;
     overflow: clip;
 }
 
-.footer-bottom_grid
+.footer-bottom_grid a:link {
-{
-    flex: 1;
-    padding: 1rem 4rem;
-    word-wrap: break-word;
-}
-
-.footer-bottom_grid a:link
-{
     text-decoration: none;
     color: var(--color-white);
 }
 
-.footer-bottom_grid a:visited
+.footer-bottom_grid a:visited {
-{
     text-decoration: none;
     color: var(--color-white);
 }
 
-.footer-bottom_grid a:hover
+.footer-bottom_grid a:hover {
-{
     text-decoration: none;
     color: var(--color-light);
 }
 
-.footer-bottom_grid.right-align:hover
+.footer-bottom_grid.right-align:hover {
-{
     transform: translateY(-2px);
     transition: all .3s ease 0s;
 }

css/navbar.css

@@ -109,7 +109,7 @@
     }
 
     #navbar_menu svg:hover{
-        color: var(--color-white);
+        color: var(--color-main);
     }
 
     .navbar_menu-close svg{
@@ -118,6 +118,10 @@
         transition: all .3s ease 0s;
     }
 
+    .navbar_menu-close svg:hover{
+        color: var(--color-main);
+    }
+
     .navbar_dropdown {
         align-items: center;
         background-color: rgba(255, 255, 255, 0.75);
@@ -164,4 +168,10 @@ button {
     transform: translateX(5px) !important;
     background-color: var(--color-light) !important;
     color: var(--color-white) !important;
+}
+
+.navbar_menu-close-btn:hover{
+    transform: translateY(-1px) !important;
+    background-color: rgba(255, 255, 255, 0)!important;
+    box-shadow: none !important;
 }

index.html

@@ -5,10 +5,10 @@
     <title>Saoul Bonmonsieur | Site Web Officiel</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
 
     <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/base.js

@@ -116,6 +116,7 @@ function popUpPlacement(className) {
 //During the loading process we need a loading status bar
 var headTag = document.getElementsByTagName("head")[0];
 window.addEventListener('load', function () {
+    loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag)
     loadCSS(urlStr + "css/base.css", headTag);
     loadCSS(urlStr + "css/navbar.css", headTag);
     load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);

js/navbar.js

@@ -6,18 +6,20 @@
 var mobileMode = false
 //enterAnimation is a status linked to mouseenter/leave of the icon
 var enterAnimation = false;
+//same but for menu
+var enterMenuAnimation = false;
 //each <li> tag of the navbar_text-container
 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"];
-//list of container links
-var containerLinks = ["avocat"];
 //navbarDropdown Element
 var navbarDropdown = document.getElementsByClassName("navbar_dropdown");
+//menu close SVG Element
+var menuCloseElement = document.getElementsByClassName("navbar_menu-close-btn")[0].children[0];
+//menu hamburger SVG Element
+var menuOpenElement = document.getElementsByClassName("navbar_menu-click")[0].children[0];
 
 /****************************************/
 /*                 animjs               */
@@ -42,6 +44,17 @@ var logoRotate = anime({
     }
 });
 
+var menuAnimation = anime({
+    targets: '.navbar_menu-click polygon',
+    points: [
+        { value: '3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16', duration: 10, delay: 0 },
+        { value: '15.410 16.580, 10.830 12.000, 15.410 7.410, 14.000 6.000, 8.000 12.000, 14.000 18.000, 15.410 16.580', duration: 200, delay: 10 }
+    ],
+    scale: 1,
+    easing: 'easeOutExpo',
+    autoplay: false,
+});
+
 /****************************************/
 /*               functions              */
 /****************************************/
@@ -192,4 +205,28 @@ window.addEventListener('resize', function (e) {
         closeMenu();
         mobileMode = true;
     }
+});
+
+//Animation to be played when hovering the menu
+menuOpenElement.addEventListener("mouseenter", function () {
+    //enterAnimation is now true (see update in logoRotate)
+    enterMenuAnimation = true;
+    //Will play the animation and when finished set enterAnimation to false
+    menuAnimation.play();
+    menuAnimation.finished.then(() => {
+        enterMenuAnimation = false;
+    })
+});
+
+//Animation to be played when leaving the menu
+menuOpenElement.addEventListener("mouseleave", function () {
+    //enterAnimation is now false (see update in logoRotate)
+    enterMenuAnimation = false;
+    menuAnimation.reverse();
+    menuAnimation.play();
+    //Will play the reversed animation and when finished set enterAnimation to true and and cancel the reverse
+    menuAnimation.finished.then(() => {
+        menuAnimation.reverse();
+        enterMenuAnimation = true;
+    })
 });