Optimize menu

views/dashboardPage/controller.js

@@ -10,13 +10,14 @@ let changeStrand = (name)=>{
         strand.style.display = "none";
     }
 
-    for(let button of document.querySelectorAll(".menu > button")){
-        button.classList = "";
-        button.onclick = ()=>{changeStrand(`${button.id.slice(0, button.id.indexOf("Btn"))}Strand`)};
+    let buttons = document.querySelectorAll(".menuButton");
+    for(let i = 0; i < buttons.length - 1; i++){
+        buttons[i].classList = "menuButton";
+        buttons[i].onclick = ()=>{changeStrand(`${buttons[i].id.slice(0, buttons[i].id.indexOf("Btn"))}Strand`)};
     }
 
     let activeButton = document.querySelector(`#${name.slice(0, name.indexOf("Strand"))}Btn`);
-    activeButton.classList = "active";
+    activeButton.classList = "menuButton active";
     activeButton.onclick = undefined;
 
     document.querySelector(`#${name}`).style.display = "flex";
@@ -67,7 +68,7 @@ let openSidebar = (sidebar)=>{
 
 let changeMenu = ()=>{
     let menu = document.querySelector(".menu");
-    let buttons = document.querySelectorAll(".menu > button");
+    let buttons = document.querySelectorAll(".menuButton");
     if(!menu.classList.contains("menuMinimized")){
         menu.classList = "menu menuMinimized";
 
@@ -75,8 +76,6 @@ let changeMenu = ()=>{
             button.children[1].style.display = "none";
         }
 
-        document.querySelector(".logout p").style.display = "none"
-
         document.querySelector("#max").style.display = "none";
         document.querySelector("#min").style.display = "flex";
 
@@ -88,8 +87,6 @@ let changeMenu = ()=>{
             button.children[1].style.display = "block";
         }
 
-        document.querySelector(".logout p").style.display = "flex"
-
         setTimeout(()=>{
             document.querySelector("#max").style.display = "flex";
             document.querySelector("#min").style.display = "none";

views/dashboardPage/dashboard.ejs

@@ -29,7 +29,7 @@
                 <button id="menuShifter2" onclick="changeMenu()">&#8801;</button>
             </div>
         
-            <button id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
+            <button class="menuButton active" id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                     <polyline points="9 22 9 12 15 12 15 22"></polyline>
@@ -37,7 +37,7 @@
                 <p>HOME</p>
             </button>
         
-            <button id="ingredientsBtn" onclick="changeStrand('ingredientsStrand')">
+            <button class="menuButton" id="ingredientsBtn" onclick="changeStrand('ingredientsStrand')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="21 8 21 21 3 21 3 8"></polyline>
                     <rect x="1" y="3" width="22" height="5"></rect>
@@ -46,7 +46,7 @@
                 <p>INGREDIENTS</p>
             </button>
         
-            <button id="recipeBookBtn" onclick="changeStrand('recipeBookStrand')">
+            <button class="menuButton" id="recipeBookBtn" onclick="changeStrand('recipeBookStrand')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                     <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
@@ -54,7 +54,7 @@
                 <p>RECIPE BOOK</p>
             </button>
         
-            <button id="ordersBtn" onclick="changeStrand('ordersStrand')">
+            <button class="menuButton" id="ordersBtn" onclick="changeStrand('ordersStrand')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="9" cy="21" r="1"></circle>
                     <circle cx="20" cy="21" r="1"></circle>
@@ -63,7 +63,7 @@
                 <p>ORDERS</p>
             </button>
 
-            <button id="transactionsBtn" onclick="changeStrand('transactionsStrand')">
+            <button class="menuButton" id="transactionsBtn" onclick="changeStrand('transactionsStrand')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                     <line x1="1" y1="10" x2="23" y2="10"></line>
@@ -71,14 +71,13 @@
                 <p>TRANSACTIONS</p>
             </button>
         
-            <a class="logout" href="/logout">
-                <p>LOGOUT</p>
-        
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <a class="menuButton" href="/logout">
+                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                     <polyline points="16 17 21 12 16 7"></polyline>
                     <line x1="21" y1="12" x2="9" y2="12"></line>
                 </svg>
+                <p>LOGOUT</p>
             </a>
         </div>
 

views/dashboardPage/sidebars/sidebars.css

@@ -3,12 +3,15 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: space-between;
     background: rgb(0, 27, 45);
     width: 18vw;
     height: 100vh;
     transition: width 0.3s;
     flex-grow: 0;
     flex-shrink: 0;
+    padding-bottom: 100px;
+    box-sizing: border-box;
 }
 
     .menuHead{
@@ -20,7 +23,7 @@
         margin-top: 10px;
         font-size: 22px;
         font-weight: bold;
-        margin-bottom: 100px;
+        margin-bottom: 50px;
         text-decoration: none;
     }
 
@@ -58,12 +61,7 @@
         border: 0;
     }
 
-    .menu > button svg{
-        stroke: white;
-        margin-right: 25px;
-    }
-
-    .menu > button{
+    .menuButton{
         display: flex;
         align-items: center;
         background: none;
@@ -77,21 +75,29 @@
         cursor: pointer;
         text-align: left;
         border: 0;
+        outline: 0;
+        box-sizing: border-box;
+        text-decoration: none;
     }
 
-    .menu > button::-moz-focus-inner{
-        border: 0;
-    }  
+        .menuButton svg{
+            stroke: white;
+            margin-right: 25px;
+        }
 
-    .menu > button:hover{
-        background: rgb(201, 201, 201);
-        color: black;
-        fill: black;
-    }
+        .menuButton::-moz-focus-inner{
+            border: 0;
+        }  
 
-    .menu > button:hover svg{
-        stroke: black;
-    }
+        .menuButton:hover{
+            background: rgb(201, 201, 201);
+            color: black;
+            fill: black;
+        }
+
+        .menuButton:hover svg{
+            stroke: black;
+        }
 
 .menu > .active{
     background: rgb(179, 191, 209);
@@ -107,33 +113,6 @@
     stroke: white;
 }
 
-.logout{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    bottom: 25px;
-    color: white;
-    text-decoration: none;
-    font-size: 20px;
-    border-radius: 5px;
-    padding: 10px;
-}
-
-.logout img{
-    height: 25px;
-    width: 25px;
-}
-
-.logout > *{
-    margin: 10px;
-}
-
-.logout:hover{
-    background: rgb(179, 191, 209);
-    color: black;
-}
-
 /* Minimized menu */
 .menuMinimized{
     width: 5vw;
@@ -148,12 +127,12 @@
     flex-direction: column;
 }
 
-.menuMinimized button{
+.menuMinimized .menuButton{
     justify-content: center;
     padding: 0;
 }
 
-.menuMinimized button svg{
+.menuMinimized .menuButton svg{
     margin: 0;
 }