Move styles to SCSS file

Rename components
Add Loader

front/src/App.svelte

@@ -1,11 +1,12 @@
 <script>
     import Router from 'svelte-spa-router';
-    import { replace, link } from 'svelte-spa-router';
-    import active from 'svelte-spa-router/active'
+    import { replace } from 'svelte-spa-router';
     import routes from '%/routes.js';
+    import NavigationBar from "%/pages/components/NavigationBar.svelte";
 
     let oldLocation = undefined;
     let showNavBar = false;
+    let scrollY = 0;
 
     function routeLoading(event) {
         if (event.detail.location === oldLocation) {
@@ -20,24 +21,14 @@
     }
 </script>
 
+<svelte:window bind:scrollY={scrollY} />
+
 {#if showNavBar }
-    <nav>
-        <ul style="justify-content: flex-end">
-            <li><a href="/" use:link use:active>Home</a></li>
-            <li><a href="/contact" use:link use:active>Contact Us</a></li>
-        </ul>
-
-        <span>TastyBites</span>
-
-        <ul style="justify-content: flex-start">
-            <li><a href="/orders" use:link use:active>Orders</a></li>
-            <li><a href="/cart" use:link use:active>Cart</a></li>
-        </ul>
-    </nav>
+    <NavigationBar scrolled={scrollY > 0} />
 {/if}
-<main>
+<main class:nav-space={showNavBar}>
     <Router
-        {routes}
+        routes={routes}
         restoreScrollState={true}
         on:routeLoading={routeLoading}
         on:conditionsFailed={conditionFailure}
@@ -48,30 +39,13 @@
 </footer>
 
 <style lang="scss">
-    nav {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 1rem;
-        background-color: #f8f9fa;
-        border-bottom: 1px solid #e9ecef;
-        ul {
-            width: 300px;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            list-style: none;
-            li {
-                margin: 0 1rem;
-            }
-            span {
-                margin: 0 1rem;
-                font-weight: bolder;
-            }
-        }
-    }
     main {
+        position: relative;
         padding: 1rem;
         flex-grow: 1;
+
+        &.nav-space {
+          margin-top: 55px;
+        }
     }
 </style>

front/src/pages/PageIndex.svelte

@@ -1,7 +1,7 @@
 <script>
     import { link } from 'svelte-spa-router';
-    import Announcement from "%/pages/index/Announcement.svelte";
-    import ItemList from "%/pages/components/ItemList.svelte";
+    import AnnouncementBanner from "%/pages/components/AnnouncementBanner.svelte";
+    import MenuList from "%/pages/components/MenuList.svelte";
 
     const items = [
         {name: "Breakfast", price: 69.99},
@@ -13,24 +13,23 @@
     ];
 </script>
 
-<Announcement />
+<AnnouncementBanner />
 <a href="/annoucements" use:link style="float: right">Learn More</a>
 
 <div class="spacer"></div>
 
 <h2>Menu</h2>
-<ItemList {items} />
+<MenuList {items} />
 <a href="/menu" use:link style="float: right">See All</a>
 
-
-
 <div class="spacer"></div>
 
 <h2>About Us</h2>
-<p>Link to the /about page</p>
+<p>Want to know the story of the restaurant?</p>
+<a href="/about" use:link style="float: right">Continue reading</a>
 
 <style lang="scss">
     .spacer {
-        height: 50px;
+        height: 100px;
     }
 </style>

front/src/pages/PageLoading.svelte

@@ -1 +1,37 @@
-<p>Loading</p>
+<script>
+    import LoadingBar from "%/pages/components/LoadingBar.svelte";
+
+    const FunnyMessages = [
+        "*patiently waiting*",
+        "Taking longer than expected...",
+        "meep...",
+    ]
+
+    let text = FunnyMessages[Math.floor(Math.random()*FunnyMessages.length)]
+</script>
+
+<LoadingBar />
+<p>{text}</p>
+
+<style lang="scss">
+    p {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+
+        transform: translate(-50%, -50%);
+        animation: forwards text-fade-in 4s;
+    }
+
+    @keyframes text-fade-in {
+        0% {
+            opacity: 0;
+        }
+        80% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+</style>

front/src/pages/components/AnnouncementBanner.svelte

@@ -0,0 +1,7 @@
+<script>
+    import LoadingBar from "%/pages/components/LoadingBar.svelte";
+</script>
+
+<div class="announcement-banner">
+    <LoadingBar bottom={true} />
+</div>

front/src/pages/components/LoadingBar.svelte

@@ -0,0 +1,8 @@
+<script>
+    export let bottom = false
+</script>
+
+<div class="loader" class:bottom={bottom}>
+    <div class="bar bar-1"></div>
+    <div class="bar bar-2"></div>
+</div>

front/src/pages/components/NavigationBar.svelte

@@ -0,0 +1,20 @@
+<script>
+    import { link } from 'svelte-spa-router';
+    import active from 'svelte-spa-router/active'
+
+    export let scrolled = false;
+</script>
+
+<nav class:scrolled={scrolled}>
+    <ul style="justify-content: flex-end">
+        <li><a href="/" use:link use:active>Home</a></li>
+        <li><a href="/contact" use:link use:active>Contact Us</a></li>
+    </ul>
+
+    <span>TastyBites</span>
+
+    <ul style="justify-content: flex-start">
+        <li><a href="/orders" use:link use:active>Orders</a></li>
+        <li><a href="/cart" use:link use:active>Cart</a></li>
+    </ul>
+</nav>

front/src/pages/index/Announcement.svelte

@@ -1,26 +0,0 @@
-<script>
-    import temp from '/temp.jpg';
-</script>
-
-<div>
-    <img src={temp} alt="Rufus" />
-</div>
-
-<style lang="scss">
-    div {
-        height: 400px;
-        background-color: #f0f0f0;
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        position: relative;
-        overflow: hidden;
-    }
-    div > img{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: auto;
-    }
-</style>

front/src/routes.js

@@ -4,7 +4,7 @@ import Page404 from "%/pages/Page404.svelte";
 
 const routes = {
     "/": wrap({
-        asyncComponent: () => import("%/pages/index/PageIndex.svelte"),
+        asyncComponent: () => import("%/pages/PageIndex.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },
@@ -15,6 +15,12 @@ const routes = {
         conditions: [],
         userData: { showNavBar: true },
     }),
+    "/about": wrap({
+        component: PageLoading,
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
     "/cart": wrap({
         asyncComponent: () => import("%/pages/PageShoppingCart.svelte"),
         loadingComponent: PageLoading,

front/src/styles/_announcement_banner.scss

@@ -0,0 +1,17 @@
+.announcement-banner {
+    height: 400px;
+    background-color: $color-light;
+    padding: 10px;
+    border: 1px solid $color-dark;
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+
+    img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: auto;
+    }
+}

front/src/styles/_loading_bar.scss

@@ -0,0 +1,103 @@
+.loader {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(100% - 4px);
+    height: 4px;
+    border-radius: 999px;
+    overflow: hidden;
+    animation: start .3s ease-in;
+
+    &.bottom {
+        top: unset;
+        bottom: 2px
+    }
+
+    .bar {
+        position: absolute;
+        background-color: $color-primary;
+        transition: transform .2s linear;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        border-radius: 999px;
+        width: 100%;
+
+        &.bar-1 {
+            animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
+        }
+
+        &.bar-2 {
+            animation: growBar2 2.5s infinite, moveBar2 2.5s infinite;
+        }
+    }
+}
+
+@keyframes growBar1 {
+    0% {
+        animation-timing-function: linear;
+        transform: scaleX(0.1);
+    }
+    36.6% {
+        animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
+        transform: scaleX(0.1);
+    }
+    69.15% {
+        animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
+        transform: scaleX(0.83);
+    }
+    100% {
+        transform: scaleX(0.1);
+    }
+}
+@keyframes moveBar1 {
+    0% {
+        left: -105.16667%;
+        animation-timing-function: linear;
+    }
+    20% {
+        left: -105.16667%;
+        animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
+    }
+    69.15% {
+        left: 21.5%;
+        animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
+    }
+    100% {
+        left: 95.44444%;
+    }
+}
+@keyframes growBar2 {
+    0% {
+        animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397);
+        transform: scaleX(0.1);
+    }
+    19.15% {
+        animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432);
+        transform: scaleX(0.57);
+    }
+    44.15% {
+        animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179);
+        transform: scaleX(0.91);
+    }
+    100% {
+        transform: scaleX(0.1);
+    }
+}
+@keyframes moveBar2 {
+    0% {
+        left: -54.88889%;
+        animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
+    }
+    25% {
+        left: -17.25%;
+        animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
+    }
+    48.35% {
+        left: 29.5%;
+        animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
+    }
+    100% {
+        left: 117.38889%;
+    }
+}

front/src/styles/_navigation_bar.scss

@@ -0,0 +1,41 @@
+nav {
+    width: 100%;
+    height: 55px;
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    background-color: $color-dark;
+    color: $color-light;
+    z-index: 9999999;
+
+    ul {
+        width: 300px;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        list-style: none;
+        li {
+            margin: 0 1rem;
+            a {
+                color: inherit;
+                .active {
+                    color: $color-primary !important;
+                }
+            }
+        }
+    }
+
+    span {
+        margin: 0 1rem;
+        font-weight: bolder;
+        font-size: 25px;
+    }
+
+    &.scrolled {
+        box-shadow: 0 0 10px 1px $color-dark;
+    }
+}

front/src/styles/_reset.scss

@@ -0,0 +1,14 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+body, #app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+body {
+    background-color: $color-light;
+}

front/src/styles/main.scss

@@ -1,9 +1,8 @@
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-}
-body, #app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
+$color-primary: #6A9343;
+$color-dark: #443023;
+$color-light: #fffbf4; // #ccc2ae;
+
+@import "reset";
+@import "loading_bar";
+@import "navigation_bar";
+@import "announcement_banner";