TastyBites/front/src/App.svelte

<script>
    import Router from 'svelte-spa-router';
    import { replace, link } from 'svelte-spa-router';
    import active from 'svelte-spa-router/active'
    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';

    import Cart from './lib/cart';
    import routes from './routes';
    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'},
    }

    let cartItemCount = 0;
    Cart.subscribe(() => {
        cartItemCount = Cart.getTotalLength();
    });

    let scrollY = 0;
    let width = 0;

    let oldLocation = undefined;
    let fullWidth = false;
    let showNavBar = false;

    function routeLoading(event) {
        if (event.detail.location === oldLocation) {
            console.log("Fake!");
            return; // not an actual change
        }

        showNavBar = event.detail.userData.showNavBar;
        fullWidth = event.detail.userData.fullWidth;
        oldLocation = event.detail.location;
    }

    function conditionFailure() {
        replace("/");
    }
</script>


<svelte:window
    bind:scrollY={scrollY}
    bind:innerWidth={width}
/>
<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"
    />
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""
    />
</svelte:head>


{#if showNavBar }
    <nav class:scrolled={scrollY > 0} class:mobile={width < 700}>
        {#if !(width < 700)}
            <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 class="nav-logo"><img src={Logo} alt="TastyBites"></span>
            <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&nbsp;&nbsp;<span class="nav-basket">{cartItemCount}</span></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&nbsp;&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
            </ul>
        {/if}
    </nav>
{/if}
<main class:nav-space={showNavBar} class:full-width={fullWidth}>
    <Router
        routes={routes}
        restoreScrollState={true}
        on:routeLoading={routeLoading}
        on:conditionsFailed={conditionFailure}
    />
</main>
<footer>
    <div class="footer-section">
        <p>TastyBites is not a real restaurant</p>
        <p>gwagwa</p>
    </div>
    <div class="footer-section">
        <h4>Find us on:</h4>
        <ul>
            <li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
            <li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
            <li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
            <li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
        </ul>
    </div>
</footer>

<style lang="scss">
    // ToDo: Move this SCSS to its own _footer.scss file
    footer {
        padding: 16px;

        position: relative;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        border-top: 2px solid #6A9343;
        background-color: #443023;
        color: #e1dcd3;

        overflow: hidden;
    }

    .footer-section {
        padding: 16px;

        min-width: 200px;
        width: 100%;
        max-width: 500px;

        > ul {
            padding: 0;

            display: flex;
            flex-direction: row;

            > li {
                margin: 0 16px 0 0;
                list-style: none;

                > a {
                    height: 40px;
                    width: 40px;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    text-decoration: none;
                    font-size: 16px;

                    border-radius: 99999px;
                    background-color: transparent;
                    color: #e1dcd3;

                    &:hover {
                        background-color: #fffbf4;
                        color: #33251a;
                    }
                }
            }
        }

        > h4 {
            margin-bottom: 10px;
        }
    }
</style>