Update functionality when clicking "hide" icon.

views/dashboardPage/ejs/sidebars/recipeDetails.ejs

@@ -7,13 +7,20 @@
             </svg>
         </button>
 
-        <button id="hideRecipeBtn" class="iconButton">
+        <button id="showRecipeBtn" class="iconButton" style="display:none">
             <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="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                 <line x1="1" y1="1" x2="23" y2="23"></line>
             </svg>
         </button>
 
+        <button id="hideRecipeBtn" class="iconButton">
+            <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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+            </svg>
+        </button>
+
         <button id="editRecipeBtn" class="iconButton">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M12 20h9"></path>

views/dashboardPage/js/sidebars/recipeDetails.js

@@ -1,6 +1,18 @@
 let recipeDetails = {
     display: function(recipe){
         document.getElementById("editRecipeBtn").onclick = ()=>{controller.openSidebar("editRecipe", recipe)};
+
+        let showIcon = document.getElementById("showRecipeBtn");
+        let hideIcon = document.getElementById("hideRecipeBtn");
+        if(recipe.hidden === true){
+            showIcon.style.display = "block";
+            hideIcon.style.display = "none";
+            showIcon.onclick = ()=>{this.hide(recipe)};
+        }else{
+            showIcon.style.display = "none";
+            hideIcon.style.display = "block";
+            showIcon.onclick = ()=>{this.hide(recipe)};
+        }
         document.getElementById("hideRecipeBtn").onclick = ()=>{this.hide(recipe)};
         document.getElementById("recipeName").innerText = recipe.name;
 
@@ -40,7 +52,9 @@ let recipeDetails = {
     hide: function(recipe){
         recipe.hidden = (recipe.hidden === true) ? false : true;
 
+        state.updateRecipes();
         controller.openStrand("recipeBook");
+        controller.openSidebar("recipeDetails", recipe);
 
         fetch(`/recipes/hide/${recipe.id}`)
             .then(response => response.json())