Mobile nav bar

Self closing divs to make stuff easier to read

front/src/App.svelte

@@ -8,7 +8,9 @@
     let oldLocation = undefined;
     let showNavBar = false;
     let fullWidth = false;
-    let scrollY = 0;
+
+    let windowScrollY = 0;
+    let windowWidth = 0;
 
     function routeLoading(event) {
         if (event.detail.location === oldLocation) {
@@ -24,14 +26,15 @@
     }
 </script>
 
-<svelte:window bind:scrollY={scrollY} />
+<svelte:window bind:scrollY={windowScrollY} bind:innerWidth={windowWidth} />
 <svelte:head>
     <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=erode@300,301,400,401,500,501,600,601,700,701,1,2&display=swap">
 </svelte:head>
 
 {#if showNavBar }
     <NavigationBar
-        scrolled={scrollY > 0}
+        scrolled={windowScrollY > 0}
+        mobile={windowWidth < 700}
     />
 {/if}
 <main

front/src/pages/PageContact.svelte

@@ -23,7 +23,7 @@
     </DropDown>
 </div>
 
-<div class="spacer"></div>
+<div class="spacer" />
 
 <h2>Contact From</h2>
 <form>

front/src/pages/PageIndex.svelte

@@ -27,30 +27,29 @@
           crossorigin=""/>
 </svelte:head>
 
-<div>
+<AnnouncementBanner />
-    <AnnouncementBanner />
+<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
-    <a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
+<div class="spacer" />
-    <div class="spacer"></div>
 
-    <h2>Where to find us</h2>
+<h2>Where to find us</h2>
-    <div id="contact">
+<div id="contact">
     <div id="map"></div>
     <div class="container">
         <h2>Some Title</h2>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis dolore maiores, dolorem unde, illo vero dolores magnam omnis, explicabo vel eos voluptatem libero ullam ipsa molestias laboriosam voluptas nisi sunt.</p>
     </div>
-    </div>
-    <div class="spacer"></div>
-
-    <h2>Popular Today</h2>
-    <MenuList {items} />
-    <a href="/menu" use:link>See All <ArrowUpRight /></a>
-    <div class="spacer"></div>
-
-    <h2>About Us</h2>contact
-    <p>Want to know the story of the restaurant?</p>
-    <a href="/about" use:link>Continue reading <ArrowUpRight /></a>
 </div>
+<div class="spacer" />
+
+<h2>Popular Today</h2>
+<MenuList {items} />
+<a href="/menu" use:link>See All <ArrowUpRight /></a>
+<div class="spacer" />
+
+<h2>About Us</h2>contact
+<p>Want to know the story of the restaurant?</p>
+<a href="/about" use:link>Continue reading <ArrowUpRight /></a>
+
 
 <style lang="scss">
     @import "%/styles/vars";

front/src/pages/elements/NavigationBar.svelte

@@ -3,15 +3,24 @@
     import active from 'svelte-spa-router/active'
     import Logo from '/LogoAlt.svg';
 
+    const links = {
+        home: {path: '/', className: 'active'},
+        menu: {path: '/menu', className: 'active'},
+        contact: {path: '/contact', className: 'active'},
+        cart: {path: '/cart', className: 'active'},
+    }
+
     export let scrolled = false;
+    export let mobile = false;
 </script>
 
-<nav class:scrolled={scrolled}>
+<nav class:scrolled={scrolled} class:mobile={mobile}>
+    {#if !mobile}
         <ul style="justify-content: flex-end">
-        <li use:active={{path: '/', className: 'active'}}>
+            <li use:active={links.home}>
                 <a href="/" use:link>Home</a>
             </li>
-        <li use:active={{path: '/menu', className: 'active'}}>
+            <li use:active={links.menu}>
                 <a href="/menu" use:link>Menu</a>
             </li>
         </ul>
@@ -19,11 +28,27 @@
         <span><img src={Logo} alt="TastyBites"></span>
 
         <ul style="justify-content: flex-start">
-        <li use:active={{path: '/contact', className: 'active'}}>
+            <li use:active={links.contact}>
-            <a href="/contact" use:link>Contact Us</a>
+                <a href="/contact" use:link>Contact&nbsp;Us</a>
             </li>
-        <li use:active={{path: '/cart', className: 'active'}}>
+            <li use:active={links.cart}>
                 <a href="/cart" use:link>Cart</a>
             </li>
         </ul>
+    {:else}
+        <ul>
+            <li use:active={links.home}>
+                <a href="/" use:link>Home</a>
+            </li>
+            <li use:active={links.menu}>
+                <a href="/menu" use:link>Menu</a>
+            </li>
+            <li use:active={links.contact}>
+                <a href="/contact" use:link>Contact&nbsp;Us</a>
+            </li>
+            <li use:active={links.cart}>
+                <a href="/cart" use:link>Cart</a>
+            </li>
+        </ul>
+    {/if}
 </nav>

front/src/styles/_navigation_bar.scss

@@ -1,5 +1,5 @@
 nav {
-    padding: $spacing-small;
+    padding: $spacing-small $spacing-normal;
 
     width: 100%;
     height: $sizing-navigation-height;
@@ -31,16 +31,21 @@ nav {
         list-style: none;
 
         li {
-            padding: 0 $spacing-small;
-
             font-weight: $font-weight-normal;
             font-size: $font-size-h6;
+            border-radius: $border-radius-circle;
 
             a {
+                padding: $spacing-xsmall $spacing-normal;
+                display: block;
                 text-decoration: none;
                 color: inherit;
             }
 
+            &:hover {
+                background-color: rgba($color-light, 0.05);
+            }
+
             &.active {
                 color: $color-primary !important;
             }
@@ -63,4 +68,11 @@ nav {
     &.scrolled {
         //box-shadow: 0 0 15px 1px $color-background;
     }
+
+    &.mobile {
+        ul {
+            width: 100%;
+            justify-content: space-around;
+        }
+    }
 }

front/src/styles/vars.scss

@@ -25,6 +25,7 @@ $sizing-full-width: 1200px;
 $sizing-navigation-height: 55px;
 
 // PADDING/MARGIN
+$spacing-xsmall: 5px;
 $spacing-small: 10px;
 $spacing-normal: 16px;
 $spacing-large: 32px;

front/src/testData.js

@@ -3,19 +3,19 @@
 let Items;
 export default Items = [
     {
-        name: "Breakfast",
+        name: "Bar of Soap",
         price: 69.99,
-        labels: ["vegan", "spicy",],
+        labels: ["vegan", "spicy"],
     },
     {
-        name: "Dinner",
+        name: "Sock",
         price: 21,
-        labels: ["vegan", "fish", "nut", "spicy",],
+        labels: ["vegan", "fish", "nut", "spicy"],
     },
     {
         name: "Brick",
         price: 0,
-        labels: ["spicy",],
+        labels: ["spicy"],
     },
     {
         name: "Toast",