Start on Menu page

Update style of Loader
Tweak SCSS colours to make contrast better

front/src/App.svelte

@@ -7,6 +7,7 @@
 
     let oldLocation = undefined;
     let showNavBar = false;
+    let fullWidth = false;
     let scrollY = 0;
 
     function routeLoading(event) {
@@ -14,6 +15,7 @@
             return; // not an actual change
         }
         showNavBar = event.detail.userData.showNavBar;
+        fullWidth = event.detail.userData.fullWidth;
         oldLocation = event.detail.location;
     }
 
@@ -28,9 +30,14 @@
 </svelte:head>
 
 {#if showNavBar }
-    <NavigationBar scrolled={scrollY > 0} />
+    <NavigationBar
+        scrolled={scrollY > 0}
+    />
 {/if}
-<main class:nav-space={showNavBar}>
+<main
+    class:nav-space={showNavBar}
+    class:full-width={fullWidth}
+>
     <Router
         routes={routes}
         restoreScrollState={true}

front/src/pages/PageIndex.svelte

@@ -38,7 +38,7 @@
             name: "GwaGwa",
             price: "Priceless",
             labels: ["nut"],
-            image: "/dab.jpg",
+            // image: "/dab.jpg",
         }
     ];
 </script>

front/src/pages/PageMenu.svelte

@@ -1,5 +1,7 @@
 <script>
+    import { ArrowClockwise } from "phosphor-svelte";
     import MenuList from "%/pages/components/MenuList.svelte";
+    import LoadingBar from "%/pages/components/LoadingBar.svelte";
 
     const items = [
         {
@@ -35,52 +37,165 @@
             name: "GwaGwa",
             price: "Priceless",
             labels: ["nut"],
-            image: "/dab.jpg",
+            // image: "/dab.jpg",
         }
     ];
 </script>
 
-<h2>Menu</h2>
-<MenuList {items} />
-<div class="spacer"></div>
+<div class="menu">
+    <div class="menu-filter">
+        <LoadingBar />
 
-<h2>Menu</h2>
-<MenuList {items} />
-<div class="spacer"></div>
+        <div class="menu-filter-header">
+            <h2>Filter</h2>
+            <button><ArrowClockwise /></button>
+        </div>
 
-<h2>Menu</h2>
-<MenuList {items} />
+        <hr>
+
+        <h3>Meal Preferences</h3>
+        <ul>
+            <li>Vegan</li>
+            <li>Vegetarian</li>
+            <li>Pescatarian</li>
+        </ul>
+
+        <hr>
+
+        <h3>Allergies</h3>
+        <ul>
+            <li>Nut</li>
+            <li>Sea</li>
+            <li>Dairy</li>
+        </ul>
+
+        <hr>
+
+        <h3>Types</h3>
+        <ul>
+            <li>Breakfast</li>
+            <li>Main</li>
+            <li>Dinner</li>
+            <li>
+                Drinks
+                <ul>
+                    <li>Alcoholic</li>
+                    <li>Non-Alcoholic</li>
+                </ul>
+            </li>
+            <li>Sides</li>
+            <li>Sweet</li>
+        </ul>
+
+        <hr>
+
+        <h3>Other</h3>
+        <ul>
+            <li>Hide Seasonal</li>
+            <li>Hide Unavailable</li>
+        </ul>
+
+        <hr>
+
+        <label>
+            Price
+            <input type="range" min="0" max="999">
+        </label>
+    </div>
+
+    <div class="menu-list">
+        <h2>Main Menu</h2>
+        <MenuList items={items} />
+        <div class="spacer"></div>
+
+        <h2>Pies</h2>
+        <MenuList items={items} />
+        <div class="spacer"></div>
+
+        <h2>Drinks</h2>
+        <MenuList items={items} />
+    </div>
+</div>
 
 <style lang="scss">
     h2 {
         margin-bottom: 16px;
     }
-
     .spacer {
-        height: 100px;
+        height: 32px;
     }
 
-    a {
-        margin-top: 8px;
-
-        padding-left: 10px;
-        padding-right: 10px;
-
-        height: 30px;
-
+    .menu {
         display: flex;
-        justify-content: center;
-        align-items: center;
+        flex-direction: row;
+        justify-content: normal;
+        align-items: flex-start;
+    }
 
-        text-decoration: none;
+    .menu-list {
+        //padding-left: 300px;
+        padding-left: 16px;
+    }
 
-        border-radius: 9999px;
-        background-color: transparent;
+    .menu-filter {
+        padding: 16px;
+
+        width: 100%;
+        max-width: calc(300px - 16px);
+
+        position: sticky;
+        top: calc(55px + 16px);
+
+        //position: absolute;
+        //top: 16px;
+        //left: 16px;
+
+        border-radius: 5px;
+        background-color: #fffbf4;
         color: #33251a;
 
-        &:hover {
-            background-color: #fffbf4;
-            color: #33251a;
+        h2 {
+            margin-bottom: 0;
+        }
+
+        hr {
+            margin: 16px -16px;
+            height: 1px;
+            border: 0 transparent;
+            background-color: rgba(#443023, 0.1);
+        }
+
+        button {
+            height: 32px;
+            width: 32px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            //position: absolute;
+            //top: 12px;
+            //right: 12px;
+
+            text-decoration: none;
+            font-size: 16px;
+
+            border-radius: 99999px;
+            border: 0 solid transparent;
+            background-color: #443023;
+            color: #e1dcd3;
+
+            &:hover {
+                background-color: #6A9343;
+                color: #fffbf4;
+            }
         }
     }
-</style>
+
+    .menu-filter-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>

front/src/routes.js

@@ -7,36 +7,36 @@ const routes = {
         asyncComponent: () => import("%/pages/PageIndex.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
-        userData: { showNavBar: true },
+        userData: { showNavBar: true, fullWidth: false, },
     }),
     "/menu": wrap({
         asyncComponent: () => import("%/pages/PageMenu.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
-        userData: { showNavBar: true },
+        userData: { showNavBar: true, fullWidth: true, },
     }),
     "/contact": wrap({
         asyncComponent: () => import("%/pages/PageContact.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
-        userData: { showNavBar: true },
+        userData: { showNavBar: true, fullWidth: false, },
     }),
     "/about": wrap({
         component: PageLoading,
         loadingComponent: PageLoading,
         conditions: [],
-        userData: { showNavBar: true },
+        userData: { showNavBar: true, fullWidth: false, },
     }),
     "/cart": wrap({
         asyncComponent: () => import("%/pages/PageCart.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
-        userData: { showNavBar: true },
+        userData: { showNavBar: true, fullWidth: false, },
     }),
     '*': wrap({
         component: Page404,
         conditions: [],
-        userData: { showNavBar: false },
+        userData: { showNavBar: false, fullWidth: false, },
     })
 }
 

front/src/styles/_loading_bar.scss

@@ -15,7 +15,6 @@
 
     .bar {
         position: absolute;
-        background-color: $color-primary;
         transition: transform .2s linear;
         left: 0;
         top: 0;
@@ -24,10 +23,12 @@
         width: 100%;
 
         &.bar-1 {
+            background-color: $color-dark;
             animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
         }
 
         &.bar-2 {
+            background-color: $color-primary;
             animation: growBar2 2.5s infinite, moveBar2 2.5s infinite;
         }
     }

front/src/styles/_reset.scss

@@ -13,6 +13,7 @@ body, #app {
 
 body {
     background-color: $color-background;
+    color: $color-on-background;
 }
 
 main {
@@ -29,4 +30,7 @@ main {
     &.nav-space {
         margin-top: $sizing-navigation-height;
     }
-}
+    &.full-width {
+        max-width: $sizing-full-width;
+    }
+}

front/src/styles/main.scss

@@ -6,7 +6,7 @@ $color-on-dark: #e1dcd3;
 $color-light: #fffbf4;
 $color-on-light: #33251a;
 $color-primary: #6A9343;
-$color-on-primary: #ccc2ae;
+$color-on-primary: #fffbf4;
 
 $color-vegan: #75a446;
 $color-fish: #487fa6;
@@ -20,6 +20,7 @@ $border-radius-circle: 99999px;
 
 // SIZING
 $sizing-default-width: 1000px;
+$sizing-full-width: 1200px;
 $sizing-navigation-height: 55px;
 
 // PADDING/MARGIN