Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-01 16:13:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make temporary content for pages

Browse source 
Switch to SCSS for styling
This commit is contained in:
Michał Gdula 2024-04-22 12:25:50 +01:00
parent b13a14ffb3
commit 12a33388f6
17 changed files with 186 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

69
front/src/App.svelte
View file

@ -2,7 +2,7 @@
import Router from 'svelte-spa-router';
import { replace, link } from 'svelte-spa-router';
import active from 'svelte-spa-router/active'
import routes from './routes';
import routes from '%/routes.js';
let oldLocation = undefined;
let showNavBar = false;
@ -22,43 +22,56 @@
{#if showNavBar }
<nav>
<ul>
<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>
<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>Shopping Cart</a></li>
<li><a href="/cart" use:link use:active>Cart</a></li>
</ul>
</nav>
{/if}
<Router
{routes}
restoreScrollState={true}
on:routeLoading={routeLoading}
on:conditionsFailed={conditionFailure}
/>
<main>
<Router
{routes}
restoreScrollState={true}
on:routeLoading={routeLoading}
on:conditionsFailed={conditionFailure}
/>
</main>
<footer>
<p>TastyBites is a fake restaurant</p>
</footer>
<style lang="sass">
nav
display: flex
justify-content: center
align-items: center
padding: 1rem
background-color: #f8f9fa
border-bottom: 1px solid #e9ecef
ul
padding: 0
margin: 0
display: flex
list-style: none
li
margin: 0 1rem
span
margin: 0 1rem
font-weight: bolder
<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 {
padding: 1rem;
flex-grow: 1;
}
</style>