Update menu for responsiveness in portrait mode.

views/dashboardPage/bundle.js

@@ -1338,6 +1338,10 @@ controller = {
 
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
+
+        if(screen.width < 1400 && screen.height > screen.width){
+            this.closeMenu();
+        }
     },
 
     /*

views/dashboardPage/dashboard.css

@@ -22,6 +22,18 @@ body{
     padding-bottom: 25px;
 }
 
+.mobileMenuSelector{
+    display: none;
+    position: fixed;
+    left: 13px;
+    top: -2px;
+    font-size: 40px;
+}
+
+    .mobileMenuSelector:active{
+        color: rgb(255, 99, 107);
+    }
+
 /* 
 Multi-strand use classes 
 */
@@ -593,10 +605,53 @@ Modal
 
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
-        
+        body{
+            background:rgb(0, 27, 45);
+        }
+
+        .mobileMenuSelector{
+            color:rgb(240, 252, 255);
+            z-index: 10;
+        }
+
+        .strandTitle{
+            color: white;
+            position: fixed;
+            top: 15px;
+            left: 0;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
+        }
+
+        /* HOME */
+        #inventoryCheckCard{
+            display: none;
+        }
+
+        #graphCard{
+            display: none;
+        }
+
+        .card{
+            background: white;
+        }
 
         @media screen and (min-width: 601px){
+            .strandTitle{
+                font-size: 40px;
+            }
+
+            .mobileMenuSelector{
+                left: 40px;
+                top: 20px;
+            }
 
+            /* HOME */
+            #graphCard{
+                display: flex;
+            }
         }
     }
 }

views/dashboardPage/dashboard.ejs

@@ -31,7 +31,7 @@
             </div>
         
             <button class="menuButton active" id="homeBtn">
-                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <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="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>
@@ -39,7 +39,7 @@
             </button>
         
             <button class="menuButton" id="ingredientsBtn">
-                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                     <line x1="10" y1="12" x2="14" y2="12"></line>
@@ -48,7 +48,7 @@
             </button>
         
             <button class="menuButton" id="recipeBookBtn">
-                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <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="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>
                 </svg>
@@ -64,7 +64,7 @@
             </button>
         
             <button class="menuButton" id="ordersBtn">
-                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                     <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>

views/dashboardPage/js/dashboard.js

@@ -91,6 +91,10 @@ controller = {
 
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
+
+        if(screen.width < 1400 && screen.height > screen.width){
+            this.closeMenu();
+        }
     },
 
     /*

views/dashboardPage/sidebars.css

@@ -81,7 +81,6 @@
     }
 
         .menuButton svg{
-            stroke: white;
             margin-right: 25px;
         }
 
@@ -194,18 +193,6 @@
     margin: 25px;
 }
 
-.mobileMenuSelector{
-    display: none;
-    position: fixed;
-    left: 13px;
-    top: -2px;
-    font-size: 40px;
-}
-
-    .mobileMenuSelector:active{
-        color: rgb(255, 99, 107);
-    }
-
 /* 
 Ingredient Details 
 */
@@ -693,66 +680,44 @@ NEW TRANSACTION
 
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
-        body{
-            background:rgb(0, 27, 45);
-        }
-
-        .mobileMenuSelector{
-            color:rgb(240, 252, 255);
-        }
-
-        .strandTitle{
-            color: white;
-            position: fixed;
-            top: 15px;
-            left: 0;
-            right: 0;
-            margin: 0;
-            text-align: center;
-            font-size: 20px;
-        }
-
         /* MENU */
         #menu{
             display: none;
             width: 100vw;
+            padding: 0;
         }
     
             .menuShifter{
                 display: none;
             }
-    
-        .mobileMenuSelector{
-            z-index: 10;
-        }
-
-        /* HOME */
-        #inventoryCheckCard{
-            display: none;
-        }
 
-        #graphCard{
-            display: none;
-        }
+            .menuHead{
+                justify-content: right;
+                padding: 0;
+                margin-bottom: 25px;
+            }
 
-        .card{
-            background: white;
-        }
+                .menuHead a{
+                    justify-content: center;
+                    margin: auto;
+                }
 
-        @media screen and (min-width: 601px){
-            .strandTitle{
-                font-size: 40px;
-            }
 
-            .mobileMenuSelector{
-                left: 40px;
-                top: 20px;
+            .menuButton{
+                padding-left: 0;
+                justify-content: center;
+                background: rgb(201, 201, 201);
+                color: black;
+                width: 90%;
+                margin: 15px auto;
+                border-radius: 5px;
+                box-shadow: 0 0 5px white;
             }
+    }
 
-            /* HOME */
-            #graphCard{
-                display: flex;
-            }
+    @media screen and (min-width: 601px){
+        .menuHead a p{
+            font-size: 40px;
         }
     }
 }