Make ingredient in recipe details a clickable element.

views/dashboardPage/bundle.js

@@ -3567,6 +3567,10 @@ let recipeDetails = {
             let recipeDiv = template.cloneNode(true);
             recipeDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
             recipeDiv.children[1].innerText = `${recipe.ingredients[i].getQuantityDisplay()}`;
+            recipeDiv.onclick = ()=>{
+                controller.openStrand("ingredients");
+                controller.openSidebar("ingredientDetails", recipe.ingredients[i]);
+            }
             ingredientsDiv.appendChild(recipeDiv);
         }
 

views/dashboardPage/js/recipeDetails.js

@@ -18,6 +18,10 @@ let recipeDetails = {
             let recipeDiv = template.cloneNode(true);
             recipeDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
             recipeDiv.children[1].innerText = `${recipe.ingredients[i].getQuantityDisplay()}`;
+            recipeDiv.onclick = ()=>{
+                controller.openStrand("ingredients");
+                controller.openSidebar("ingredientDetails", recipe.ingredients[i]);
+            }
             ingredientsDiv.appendChild(recipeDiv);
         }
 

views/dashboardPage/sidebars/recipeDetails.ejs

@@ -36,9 +36,9 @@
     </div>
 
     <template id="recipeIngredient">
-        <div class="recipeIngredient">
-            <p class="recipeIngredientElement"></p>
-            <p class="recipeIngredientElement"></p>
+        <div class="choosable">
+            <p></p>
+            <p></p>
         </div>
     </template>
 </div>

views/dashboardPage/sidebars/sidebars.css

@@ -340,22 +340,6 @@ Recipe Details
         margin: 25px 0 0 0;
     }
 
-    .recipeIngredient{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin: 25px;
-        text-align: center;
-    }
-
-        .recipeIngredient > *:first-of-type{
-            text-align: left;
-        }
-
-        .recipeIngredientElement{
-            width: 30%;
-        }
-
     .addRecIngredient{
         display: flex;
         justify-content: center;