Sidebar will now close when another is opened

views/dashboardPage/components/addIngredient.ejs

@@ -1,4 +1,11 @@
 <div id="addIngredient" class="sidebarHide">
+    <button onclick="ingredientsStrandObj.closeSidebar()">
+        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+            <polyline points="12 5 19 12 12 19"></polyline>
+        </svg>
+    </button>
+    
     <h1>Add New Ingredients</h1>
 
     <input type="text">

views/dashboardPage/components/components.css

@@ -9,22 +9,27 @@
     box-shadow: -1px 0px 10px gray;
 }
 
+    .sidebar button:first-of-type{
+        background: none;
+        border: none;
+        cursor: pointer;
+        margin-bottom: 100px;
+        margin-right: auto;
+    }
+
 .sidebarHide{
     width: 0;
     transition: width 0.2s;
     margin: 0;
     padding: 0;
     overflow: hidden;
-    visibility: hidden;
+    box-shadow: -1px 0px 10px gray;
 }
 
-    .sidebarHide *{
+    .sidebarHide > *{
         width: 0;
         transition: width 0.2s;
-    }
-
-    .sidebarHide input{
-        display: none;
+        visibility: hidden;
     }
 
 #addIngredient{
@@ -36,14 +41,6 @@
     align-items: center;
 }
 
-    #ingredientDetails button:first-of-type{
-        background: none;
-        border: none;
-        cursor: pointer;
-        margin-bottom: 100px;
-        margin-right: auto;
-    }
-
     .lineBorder{
         width: 100%;
         border-bottom: 1px solid gray;

views/dashboardPage/dashboard.ejs

@@ -59,7 +59,7 @@
                 <div id="ingredientHead">
                     <h1>Ingredient Inventory</h1>
 
-                    <button class="button" onclick="ingredientsStrandObj.toggleAddIngredient()">
+                    <button class="button" onclick="ingredientsStrandObj.displayAddIngredient()">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                         add
                     </button>

views/dashboardPage/ingredients.js

@@ -99,7 +99,9 @@ window.ingredientsStrandObj = {
         }
     },
 
-    toggleAddIngredient: function(){
+    displayAddIngredient: function(){
+        this.closeSidebar();
+
         let sidebar = document.querySelector("#addIngredient");
 
         if(sidebar.classList.value === "sidebarHide"){
@@ -110,6 +112,8 @@ window.ingredientsStrandObj = {
     },
 
     displayIngredient: function(ingredient, category){
+        this.closeSidebar();
+        
         sidebar = document.querySelector("#ingredientDetails");
 
         sidebar.classList = "sidebar";
@@ -141,7 +145,9 @@ window.ingredientsStrandObj = {
 
     closeSidebar: function(){
         let sidebar = document.querySelector(".sidebar");
-
-        sidebar.classList = "sidebarHide";
+        
+        if(sidebar){
+            sidebar.classList = "sidebarHide";
+        }
     }
 }