Fix the title section of the menu

views/dashboardPage/components/components.css

@@ -15,6 +15,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        width: 100%;
         padding: 0 20px;
         margin-top: 10px;
         font-size: 22px;
@@ -33,6 +34,11 @@
         align-items: center;
         color: white;
         text-decoration: none;
+        width: 80%;
+    }
+
+    .menuHead p{
+        margin-left: 25px;
     }
 
     .menuHead button{
@@ -65,7 +71,7 @@
         color: white;
         font-size: 20px;
         margin: 15px 0;
-        padding: 0 0 0 50px;
+        padding-left: 50px;
         width: 100%;
         height: 75px;
         cursor: pointer;
@@ -122,11 +128,11 @@
 }
 
 .menuLogoMin{
-    width: 100%;
-    height: 100%;
+    width: 4vw;
 }
 
 .menuHeadMin{
+    display: none;
     flex-direction: column;
 }
 

views/dashboardPage/components/menu.ejs

@@ -1,13 +1,21 @@
 <div class="menu">
-    <div class="menuHead">
+    <div id="max" class="menuHead">
         <a href="/">
-            <img class="menuLogo" src="/shared/images/logo.png">
+            <img class="menuLogo" src="/shared/images/logo.png" alt="The Subline">
             <p>The Subline</p>
         </a>
 
         <button onclick="changeMenu()">&#8801;</button>
     </div>
 
+    <div id="min" class="menuHead menuHeadMin">
+        <a href="/">
+            <img class="menuLogoMin" src="/shared/images/logo.png" alt="The Subline">
+        </a>
+
+        <button onclick="changeMenu()">&#8801;</button>
+    </div>
+
     <button id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
         <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><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></svg>
         <p>Home</p>
@@ -28,7 +36,7 @@
         <p>Orders</p>
     </button>
 
-    <a class="logout" href="/logout">
+    <a class="logout" href="/logout">   
         <img src="/shared/images/profile.png" alt="logout">
         <p>Logout</p>
     </a>
@@ -44,13 +52,12 @@
                     button.children[1].style.display = "none";
                 }
 
-                document.querySelector(".menuHead p").style.display = "none";
-                document.querySelector(".menuHead").classList = "menuHead menuHeadMin";
-                document.querySelector(".logout p").style.display = "none";
+                document.querySelector("#max").style.display = "none";
+                document.querySelector("#min").style.display = "flex";
 
-                setTimeout(()=>{
-                    document.querySelector(".menuLogo").classList = "menuLogo menuLogoMin";
-                }, 150);
+                // setTimeout(()=>{
+                //     document.querySelector(".menuLogo").classList = "menuLogo menuLogoMin";
+                // }, 150);
             }else if(menu.classList.contains("menuMinimized")){
                 menu.classList = "menu";
 
@@ -58,13 +65,10 @@
                     button.children[1].style.display = "block";
                 }
 
-                document.querySelector(".menuHead p").style.display = "block";
-                document.querySelector(".menuHead").classList = "menuHead";
-                document.querySelector(".logout p").style.display = "block";
-
                 setTimeout(()=>{
-                    document.querySelector(".menuLogo").classList = "menuLogo";
-                });
+                    document.querySelector("#max").style.display = "flex";
+                    document.querySelector("#min").style.display = "none";
+                }, 150);
             }
         }
     </script>

views/dashboardPage/dashboard.css

@@ -183,8 +183,8 @@ body{
 
 .categoryDiv > div:first-of-type{
     display: flex;
-    margin-left: 15px;
-    width: 100%;
+    margin: 0 0 0 10vw;
+    width: 75%;
 }
 
 .categoryDiv > div:first-of-type p{
@@ -214,9 +214,9 @@ body{
 
 .ingredient{
     display: flex;
-    width: 40%;
+    width: 50%;
     padding: 15px;
-    margin-left: 150px;
+    margin-left: 15vw;
     cursor: pointer;
     border-radius: 5px;
 }
@@ -248,24 +248,21 @@ body{
     #recipeList{
         display: flex;
         flex-direction: column;
+        margin-top: 50px;
     }
 
     .recipeItem{
         display: flex;
         justify-content: space-between;
+        align-items: center;
         background: rgb(240, 252, 255);
-        box-shadow: 0 2px 5px gray;
         border-radius: 5px;
-        padding: 15px;
-        margin: 3px 3px 3px 100px;
+        padding: 20px 20px;
+        margin-left: 10vw;
         width: 25vw;
-        border: 1px solid black;
+        border: 1px solid gray;
         cursor: pointer;
-    }
-
-    .recipeItem p:first-of-type{
-        font-size: 20px;
-        font-weight: bold;
+        width: 50%;
     }
 
     .recipeItem:hover{