From ece10f04a09f951ebf848c7a7744bcc97143b61c Mon Sep 17 00:00:00 2001
From: Casper <draakie@proton.me>
Date: Mon, 30 Sep 2024 20:00:56 +0200
Subject: [PATCH] [WIP]

---
 frontend/src/components/DrawerMenu.jsx        |  8 ++---
 .../src/pages/{Login.jsx => Login/index.jsx}  |  0
 .../index.jsx}                                |  4 ++-
 .../{NotFound.jsx => NotFound/index.jsx}      |  0
 frontend/src/pages/Recipe/Recipe.css          | 10 +++++-
 frontend/src/pages/Recipe/index.jsx           | 31 ++++++++++++++++---
 .../{Settings.jsx => Settings/index.jsx}      |  0
 .../pages/{Splash.jsx => Splash/index.jsx}    |  0
 8 files changed, 42 insertions(+), 11 deletions(-)
 rename frontend/src/pages/{Login.jsx => Login/index.jsx} (100%)
 rename frontend/src/pages/{MealPlanner.jsx => MealPlanner/index.jsx} (50%)
 rename frontend/src/pages/{NotFound.jsx => NotFound/index.jsx} (100%)
 rename frontend/src/pages/{Settings.jsx => Settings/index.jsx} (100%)
 rename frontend/src/pages/{Splash.jsx => Splash/index.jsx} (100%)

diff --git a/frontend/src/components/DrawerMenu.jsx b/frontend/src/components/DrawerMenu.jsx
index d47dda2..b3b0e4a 100644
--- a/frontend/src/components/DrawerMenu.jsx
+++ b/frontend/src/components/DrawerMenu.jsx
@@ -14,20 +14,20 @@ function DrawerMenu(props) {
                         </button>
                     </nav>
                 </header>
-                <a href="/mealplanner">
+                <a href="/mealplanner" onClick={closeMenu}>
                     <i>calendar_month</i>
                     <span>Meal Planner</span>
                 </a>
-                <a href="/recipes">
+                <a href="/recipes" onClick={closeMenu}>
                     <i>menu_book</i>
                     <span>Recipes</span>
                 </a>
                 <hr class="medium" />
-                <a href="/settings">
+                <a href="/settings" onClick={closeMenu}>
                     <i>settings</i>
                     <span>Settings</span>
                 </a>
-                <a>
+                <a onClick={closeMenu}>
                     <i>logout</i>
                     <span>Log out</span>
                 </a>
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login/index.jsx
similarity index 100%
rename from frontend/src/pages/Login.jsx
rename to frontend/src/pages/Login/index.jsx
diff --git a/frontend/src/pages/MealPlanner.jsx b/frontend/src/pages/MealPlanner/index.jsx
similarity index 50%
rename from frontend/src/pages/MealPlanner.jsx
rename to frontend/src/pages/MealPlanner/index.jsx
index 192f2ab..866632d 100644
--- a/frontend/src/pages/MealPlanner.jsx
+++ b/frontend/src/pages/MealPlanner/index.jsx
@@ -1,7 +1,9 @@
 function MealPlanner() {
     return (
         <article>
-            <h4>MEAL PLANNER</h4>
+            <section class="header center-align">
+                <h4>Meal Planner</h4>
+            </section>
         </article>
     );
 }
diff --git a/frontend/src/pages/NotFound.jsx b/frontend/src/pages/NotFound/index.jsx
similarity index 100%
rename from frontend/src/pages/NotFound.jsx
rename to frontend/src/pages/NotFound/index.jsx
diff --git a/frontend/src/pages/Recipe/Recipe.css b/frontend/src/pages/Recipe/Recipe.css
index 9933a17..4b99265 100644
--- a/frontend/src/pages/Recipe/Recipe.css
+++ b/frontend/src/pages/Recipe/Recipe.css
@@ -1,8 +1,16 @@
-#recipe-controls {
+#recipe-close-button {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 10;
+    margin: 0;
+}
+
+#recipe-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
 }
 
 #recipe-image {
diff --git a/frontend/src/pages/Recipe/index.jsx b/frontend/src/pages/Recipe/index.jsx
index ef39784..0071776 100644
--- a/frontend/src/pages/Recipe/index.jsx
+++ b/frontend/src/pages/Recipe/index.jsx
@@ -1,20 +1,22 @@
-import './Recipe.css';
+import { useParams } from '@solidjs/router';
 
 import { useRecipeContext } from '../../contexts/RecipeContext';
 
+import './Recipe.css';
+
 function Recipe() {
     const { recipeStore } = useRecipeContext();
-    const recipe = recipeStore.recipes[0];
+    const params = useParams();
+    const recipe = recipeStore.recipes[params.id];
 
     return (
         <article class="medium-elevate no-padding">
-            <nav id="recipe-controls">
-                <h6 class="max"></h6>
+            <img class="responsive" id="recipe-image" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
+            <nav id="recipe-close-button">
                 <button class="transparent circle extra" onClick={() => location.href='/recipes'}>
                     <i>close</i>
                 </button>
             </nav>
-            <img class="responsive" id="recipe-image" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
             <div class="padding">
                 <section class="header center-align">
                     <h4>{recipe.title}</h4>
@@ -38,6 +40,25 @@ function Recipe() {
                 <section class="content center-align">
                     <p>{recipe.description}</p>
                 </section>
+                <section id="recipe-controls" class="content">
+                    <nav class="no-space">
+                        <button class="border fill left-round" onClick={() => console.warn('edit')}>
+                            <i>edit</i>
+                            <span>Edit</span>
+                        </button>
+                        <button class="border fill no-round" onClick={() => console.warn('delete')}>
+                            <i>delete</i>
+                            <span>Delete</span>
+                        </button>
+                        <button class="border fill right-round" onClick={() => console.warn('export')}>
+                            <i>download</i>
+                            <span>Export</span>
+                        </button>
+                    </nav>
+                </section>
+                <div>
+                    <hr class="large" />
+                </div>
                 <section id="recipe-columns" class="content grid">
                     <div class="s12 m6 recipe-col">
                         <h6>Ingredients</h6>
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings/index.jsx
similarity index 100%
rename from frontend/src/pages/Settings.jsx
rename to frontend/src/pages/Settings/index.jsx
diff --git a/frontend/src/pages/Splash.jsx b/frontend/src/pages/Splash/index.jsx
similarity index 100%
rename from frontend/src/pages/Splash.jsx
rename to frontend/src/pages/Splash/index.jsx