Update the functionality of the sidebar

views/dashboardPage/components/addIngredient.ejs

@@ -1,4 +1,4 @@
-<div id="addIngredient" class="sidebarHide">
+<div id="addIngredient">
     <button class="sidebarIconButton" onclick="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>

views/dashboardPage/components/addRecipe.ejs

@@ -1,4 +1,4 @@
-<div id="addRecipe" class="sidebarHide">
+<div id="addRecipe">
     <button class="sidebarIconButton" onclick="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>

views/dashboardPage/components/components.css

@@ -46,11 +46,13 @@
 
 #addIngredient{
     flex-direction: column;
+    width: 100%;
 }
 
 #ingredientDetails{
     flex-direction: column;
     align-items: center;
+    width: 100%;
 }
 
     #ingredientDetails > p{
@@ -75,7 +77,7 @@
 #recipeDetails{
     flex-direction: column;
     align-items: center;
-    box-sizing: border-box;
+    width: 100%;
 }
 
     #recipeDetailsButtons{
@@ -124,6 +126,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
     padding-bottom: 50px;
 }
 

views/dashboardPage/components/ingredientDetails.ejs

@@ -1,4 +1,4 @@
-<div id="ingredientDetails" class="sidebarHide">
+<div id="ingredientDetails">
     <button class="sidebarIconButton" onclick="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>

views/dashboardPage/components/recipeDetails.ejs

@@ -1,4 +1,4 @@
-<div id="recipeDetails" class="sidebarHide">
+<div id="recipeDetails">
     <div id="recipeDetailsButtons">
         <button class="sidebarIconButton" onclick="closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

views/dashboardPage/controller.js

@@ -1,4 +1,6 @@
 let changeStrand = (name)=>{
+    closeSidebar();
+
     for(let strand of document.querySelectorAll(".strand")){
         strand.style.display = "none";
     }
@@ -12,18 +14,27 @@ let changeStrand = (name)=>{
     activeButton.classList = "active";
     activeButton.onclick = undefined;
 
-    closeSidebar();
-
     document.querySelector(`#${name}`).style.display = "flex";
     window[`${name}Obj`].display();
 }
 
 let closeSidebar = ()=>{
-    let sidebar = document.querySelector(".sidebar");
-    
-    if(sidebar){
-        sidebar.classList = "sidebarHide";
+    let sidebar = document.querySelector("#sidebarDiv");
+    for(let i = 0; i < sidebar.children.length; i++){
+        sidebar.children[i].style.display = "none";
     }
+    sidebar.classList = "sidebarHide";
+}
+
+let openSidebar = (sidebar)=>{
+    document.querySelector("#sidebarDiv").classList = "sidebar";
+
+    let sideBars = document.querySelector("#sidebarDiv").children;
+    for(let i = 0; i < sideBars.length; i++){
+        sideBars[i].style.display = "none";
+    }
+
+    sidebar.style.display = "flex";
 }
 
 //Gets the indices of two dates from transactions

views/dashboardPage/dashboard.css

@@ -156,7 +156,7 @@ body{
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;
-    height: 100vh;
+    height: 100%;
     box-sizing: border-box;
     padding-right: 100px;
 }

views/dashboardPage/dashboard.ejs

@@ -84,13 +84,15 @@
             </div>
         </div>
 
-        <% include ./components/addIngredient %>
+        <div id="sidebarDiv" class="sidebarHide">
+            <% include ./components/addIngredient %>
 
-        <% include ./components/ingredientDetails %>
+            <% include ./components/ingredientDetails %>
 
-        <% include ./components/recipeDetails %>
+            <% include ./components/recipeDetails %>
 
-        <% include ./components/addRecipe %>
+            <% include ./components/addRecipe %>
+        </div>
 
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>

views/dashboardPage/home.js

@@ -26,7 +26,6 @@ window.homeStrandObj = {
             document.querySelector("#revenueChange img").src = img;
 
             let graphCanvas = document.querySelector("#graphCanvas");
-            console.log(graphCanvas.parentElement);
 
             graphCanvas.height = graphCanvas.parentElement.clientHeight;
             graphCanvas.width = graphCanvas.parentElement.clientWidth;

views/dashboardPage/ingredients.js

@@ -65,23 +65,19 @@ window.ingredientsStrandObj = {
     },
 
     displayAddIngredient: function(){
-        closeSidebar();
-
         let sidebar = document.querySelector("#addIngredient");
+        openSidebar(sidebar);
 
-        if(sidebar.classList.value === "sidebarHide"){
-            sidebar.classList = "sidebar";
-        }else{
-            sidebar.classList = "sidebarHide";
-        }
+        // if(sidebar.classList.value === "sidebarHide"){
+        //     sidebar.classList = "sidebar";
+        // }else{
+        //     sidebar.classList = "sidebarHide";
+        // }
     },
 
     displayIngredient: function(ingredient, category){
-        closeSidebar();
-        
         sidebar = document.querySelector("#ingredientDetails");
-
-        sidebar.classList = "sidebar";
+        openSidebar(sidebar);
 
         document.querySelector("#ingredientDetails p").innerText = category.name;
         document.querySelector("#ingredientDetails h1").innerText = ingredient.name;

views/dashboardPage/recipeBook.js

@@ -40,9 +40,7 @@ window.recipeBookStrandObj = {
     },
 
     displayRecipe: function(recipe){
-        closeSidebar();
-
-        document.querySelector("#recipeDetails").classList = "sidebar";
+        openSidebar(document.querySelector("#recipeDetails"));
 
         document.querySelector("#recipeDetails h1").innerText = recipe.name;
 
@@ -69,9 +67,7 @@ window.recipeBookStrandObj = {
     },
 
     displayAddRecipe: function(){
-        closeSidebar();
-
-        document.querySelector("#addRecipe").classList = "sidebar";
+        openSidebar(document.querySelector("#addRecipe"));
     },
 
     changeRecipeCount: function(){
@@ -128,7 +124,6 @@ window.recipeBookStrandObj = {
             body: JSON.stringify(newRecipe)
         })
             .then((response)=>{
-                console.log(response.data)
                 if(typeof(response.data) === "string"){
                     banner.createError(response.data);
                 }else{