Make sidebar closeable

views/dashboardPage/components/components.css

@@ -3,7 +3,7 @@
     width: 18vw;
     height: 100vh;
     box-sizing: border-box;
-    padding: 100px 25px;
+    padding: 25px;
     transition: width 0.2s;
     overflow: hidden;
     box-shadow: -1px 0px 10px gray;
@@ -15,6 +15,7 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
+    visibility: hidden;
 }
 
     .sidebarHide *{
@@ -35,6 +36,14 @@
     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/components/ingredientDetails.ejs

@@ -1,4 +1,11 @@
 <div id="ingredientDetails" 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>
+
     <p></p>
     <h1></h1>
     <div class="lineBorder"></div>

views/dashboardPage/ingredients.js

@@ -137,5 +137,11 @@ window.ingredientsStrandObj = {
         console.log(`${end-start} ms`);
 
         document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.unit}`;
+    },
+
+    closeSidebar: function(){
+        let sidebar = document.querySelector(".sidebar");
+
+        sidebar.classList = "sidebarHide";
     }
 }