Remove menu from components. Rename components to sidebars.

views/dashboardPage/components/menu.ejs

@@ -1,96 +0,0 @@
-<div class="menu">
-    <div id="max" class="menuHead">
-        <a href="/">
-            <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 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>
-        </svg>
-        <p>Home</p>
-    </button>
-
-    <button 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>
-            <line x1="10" y1="12" x2="14" y2="12"></line>
-        </svg>
-        <p>Ingredients</p>
-    </button>
-
-    <button 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>
-        </svg>
-        <p>Recipe Book</p>
-    </button>
-
-    <button 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>
-            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
-        </svg>
-        <p>Orders</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">
-            <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>
-    </a>
-
-    <script>
-        let changeMenu = ()=>{
-            let menu = document.querySelector(".menu");
-            let buttons = document.querySelectorAll(".menu > button");
-            if(!menu.classList.contains("menuMinimized")){
-                menu.classList = "menu menuMinimized";
-
-                for(let button of buttons){
-                    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";
-
-                
-            }else if(menu.classList.contains("menuMinimized")){
-                menu.classList = "menu";
-
-                for(let button of buttons){
-                    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";
-                }, 150);
-            }
-        }
-    </script>
-</div>

views/dashboardPage/controller.js

@@ -48,4 +48,36 @@ let openSidebar = (sidebar)=>{
     sidebar.style.display = "flex";
 }
 
+let changeMenu = ()=>{
+    let menu = document.querySelector(".menu");
+    let buttons = document.querySelectorAll(".menu > button");
+    if(!menu.classList.contains("menuMinimized")){
+        menu.classList = "menu menuMinimized";
+
+        for(let button of buttons){
+            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";
+
+        
+    }else if(menu.classList.contains("menuMinimized")){
+        menu.classList = "menu";
+
+        for(let button of buttons){
+            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";
+        }, 150);
+    }
+}
+
 homeStrandObj.display();

views/dashboardPage/dashboard.ejs

@@ -6,11 +6,72 @@
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
         <link rel="stylesheet" href="/shared/shared.css">
         <link rel="stylesheet" href="/dashboardPage/dashboard.css">
-        <link rel="stylesheet" href="/dashboardPage/components/components.css">
+        <link rel="stylesheet" href="/dashboardPage/sidebars/sidebars.css">
         <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
     </head>
     <body>
-        <% include ./components/menu %>
+        <div class="menu">
+            <div id="max" class="menuHead">
+                <a href="/">
+                    <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 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>
+                </svg>
+                <p>Home</p>
+            </button>
+        
+            <button 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>
+                    <line x1="10" y1="12" x2="14" y2="12"></line>
+                </svg>
+                <p>Ingredients</p>
+            </button>
+        
+            <button 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>
+                </svg>
+                <p>Recipe Book</p>
+            </button>
+        
+            <button 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>
+                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                </svg>
+                <p>Orders</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">
+                    <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>
+            </a>
+        </div>
 
         <div class="contentBlock">
             <% include ../shared/banner %>
@@ -201,19 +262,19 @@
         </div>
 
         <div id="sidebarDiv" class="sidebarHide">
-            <% include ./components/addIngredients %>
+            <% include ./sidebars/addIngredients %>
 
-            <% include ./components/newIngredient %>
+            <% include ./sidebars/newIngredient %>
 
-            <% include ./components/ingredientDetails %>
+            <% include ./sidebars/ingredientDetails %>
 
-            <% include ./components/recipeDetails %>
+            <% include ./sidebars/recipeDetails %>
 
-            <% include ./components/addRecipe %>
+            <% include ./sidebars/addRecipe %>
 
-            <% include ./components/orderDetails %>
+            <% include ./sidebars/orderDetails %>
 
-            <% include ./components/newOrder %>
+            <% include ./sidebars/newOrder %>
         </div>
 
         <% include ../shared/loader %>
@@ -229,7 +290,7 @@
         <script src="/dashboardPage/home.js"></script>
         <script src="/dashboardPage/ingredients.js"></script>
         <script src="/dashboardPage/recipeBook.js"></script>
-        <script src="/dashboardPage/components/components.js"></script>
+        <script src="/dashboardPage/sidebars/sidebars.js"></script>
         <script src="/dashboardPage/controller.js"></script>
         <script src="/dashboardPage/orders.js"></script>
         <script src="../shared/validation.js"></script>

views/shared/shared.css

@@ -220,27 +220,6 @@ form{
     display: none;
 }
 
-/* Components */
-strand-selector{
-    display: flex;
-    justify-content: center;
-    border-bottom: 1px solid rgb(255, 99, 107);
-}
-
-    strand-selector button{
-        margin: 10px;
-        background: none;
-        font-size: 25px;
-        font-weight: bold;
-        border: none;
-        transition: box-shadow 1s;
-        padding: 5px;
-    }
-
-        strand-selector button:hover{
-            box-shadow: 15px 15px 15px gray;
-        }
-
 .strand{
     transition: width 1s linear;
 }