Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2024-12-28 02:16:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile nav bar

Browse source 
Self closing divs to make stuff easier to read
This commit is contained in:
Michał 2024-04-25 23:32:04 +01:00
parent 4433d7cc19
commit 8ab0957a85
7 changed files with 91 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
front/src/App.svelte
View file

@ -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

2
front/src/pages/PageContact.svelte
View file

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

41
front/src/pages/PageIndex.svelte
View file

@ -27,30 +27,29 @@
crossorigin=""/>
</svelte:head>
<div>
<AnnouncementBanner />
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
<div class="spacer"></div>
<AnnouncementBanner />
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
<div class="spacer" />
<h2>Where to find us</h2>
<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>
<h2>Where to find us</h2>
<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 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";

61
front/src/pages/elements/NavigationBar.svelte
View file

@ -3,27 +3,52 @@
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}>
<ul style="justify-content: flex-end">
<li use:active={{path: '/', className: 'active'}}>
<a href="/" use:link>Home</a>
</li>
<li use:active={{path: '/menu', className: 'active'}}>
<a href="/menu" use:link>Menu</a>
</li>
</ul>
<nav class:scrolled={scrolled} class:mobile={mobile}>
{#if !mobile}
<ul style="justify-content: flex-end">
<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>
</ul>
<span><img src={Logo} alt="TastyBites"></span>
<span><img src={Logo} alt="TastyBites"></span>
<ul style="justify-content: flex-start">
<li use:active={{path: '/contact', className: 'active'}}>
<a href="/contact" use:link>Contact Us</a>
</li>
<li use:active={{path: '/cart', className: 'active'}}>
<a href="/cart" use:link>Cart</a>
</li>
</ul>
<ul style="justify-content: flex-start">
<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>
{: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>

18
front/src/styles/_navigation_bar.scss
View file

@ -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;
}
}
}

1
front/src/styles/vars.scss
View file

@ -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;

10
front/src/testData.js
View file

@ -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",