[WIP]

Author: cmvanb

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>

frontend/src/pages/Login.jsx renamed to frontend/src/pages/Login/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>
     );
 }

frontend/src/pages/MealPlanner.jsx renamed to frontend/src/pages/MealPlanner/index.jsx

@@ -1,10 +1,13 @@
-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">