deprived-main-website/src/routes/+layout.svelte

<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
<script lang="ts">
    import "$lib/app.css";

    import { fly } from 'svelte/transition';
    import MediaQuery from 'svelte-media-queries';
    export let hideOnPrint: boolean;

    import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
    import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";

    import svelteLogo from "$lib/svelteLogos/svelte-logo.png"

    const footerCollapseThreshold : string = '1000px';
    const headerCollapseThreshold : string = '1000px';
    let footerCollapse : boolean;
    let isMobile : boolean;

    let navbarHidden : boolean = true;

    function resetNavBar() {
        navbarHidden = true;
    }

    import { afterNavigate } from '$app/navigation';
    afterNavigate(() => {
        const params = new URLSearchParams(window.location.search);
        hideOnPrint = params.get('hideOnPrint') === '1';
        //console.log(hideOnPrint);
    });

    import { onMount } from 'svelte';
	import { themeChange } from 'theme-change'
    onMount(() => {
        const lock = document.createElement('meta');
        lock.name = 'darkreader-lock';
        document.head.appendChild(lock);

		themeChange(false) // false parameter is required for svelte
    });
</script>


<!-- Detect mobile -->
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />

<!-- Nav bar -->
<div class="bg-base-200 p-0">
    <header class="{hideOnPrint ? 'hide-on-print' : ''}">
        <div class="nav-bar pr-4 bg-base-200">
            {#if !isMobile}
                <div class="desktop">
                    <a href="/" class="nav-head">
                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
                        <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
                    </a>
                    <div class="nav-spacer" />

                    <!-- <a href="/">Home</a> -->
                    <a href="https://botalex.itch.io/" target="_blank">Games</a>
                    <!-- <a href="/posts">Blog</a>
                    <a href="/about">About</a> -->
                </div>
            {:else}
                <div class="collapsed">
                    <a on:click={resetNavBar} href="/" class="nav-head">
                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
                        <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
                    </a>
                    <div class="nav-spacer" />
                    <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
                        <HamburgerMenuIcon Class="fill-base-content"/>
                    </button>
                </div>
                {#if !navbarHidden}
                    <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
                        <!-- <a on:click={resetNavBar} href="/">Home</a> -->
                        <a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
                        <!-- <a on:click={resetNavBar} href="/posts">Blog</a>
                        <a on:click={resetNavBar} href="/about">About</a> -->
                    </div>
                {/if}
            {/if}
        </div>
    </header>
    
    <!-- Page content -->
    <slot />
    
    <!-- About footer -->
    <footer class="{hideOnPrint ? 'hide-on-print' : ''}">
        <div class="about-container">
            <div class="credits">
                <span>© 2023-2024</span>
                <br>
                <span>Benjamin Dreyer</span>
                <br>
                <span>Oliver Schwenger</span>
                <br>
                <span>Sylvester Junge</span>
                <br>
                <span>Zhentao Wei</span>
            </div>
            <div>
                <h3><b>About this website</b></h3>
                <!-- <a href="/" target="_blank">Recursion</a> -->
                <div class="flex justify-center">
                    This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
                    <img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
                </div>
                <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>

            </div>
            <div class="contact">
                <h3><b>Contact</b></h3>
                <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
                <div class="mt-2"></div>
                <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
                    <!-- <span>Discord</span> -->
                    <img src="/images/icons/discord.svg" alt="Discord"/>
                </a>
            </div>
        </div>
    </footer>
</div>


<style lang="scss">
    /* Nav bar. */
    header {
        display: flex;
        justify-content: center;
    }

    header a {
        text-decoration: none;
    }

    .nav-bar {
        width: 100%;
        max-width: 1400px;
    }

    .desktop {
        width: 100%;
        display: flex;
        gap: 30px;
    }

    .collapsed {
        width: 100%;
        display: flex;
    }

    #toggle-nav {
        background: transparent;
        border: none;
    }


    .nav-list {
        display: flex;
        flex-direction: column;
        gap: 10px;

        align-items: center;
    }

    .nav-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #logo-link {
        width: 64px;
        aspect-ratio: 1 / 1;
    }

    #logo-text {
        font-size: 24px;
        color: oklch(var(--bc));
        font-family: var(--title-font);
        margin: 0;

        min-width: 200px;
    }

    .nav-spacer {
        width: 100%;
    }

    header a {
        display: flex;
        align-items: center;

        font-size: 22px;
        font-family: var(--title-font);
        // Text color
        color: oklch(var(--bc));
    }

    /* Footer. */
    footer {
        margin-top: 50px;
        padding: 25px 0;
        background-color: oklch(var(--b3));

        height: 100%;

        display: flex;
        justify-content: center;
    }

    .about-container {
        width: 80%;
        height: 100%;

        color: oklch(var(--bc));

        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        & h3 {
            font-size: larger;
        }
    }

    .about-container > div {
        align-items: center;
        text-align: center;
    }

    .credits {
        line-height: 2;
    }

    .contact {
        display: flex;
        flex-direction: column;
    }

    .social {
        display: flex;
        align-content: center;
        gap: 10px;
    }

    .social > img {
        width: 24px;
    }

    footer h3 {
        margin-top: 0px;
        color: var(--text2);
    }

    footer a {
        color: var(--text2);
        text-decoration-line: underline;
    }

    a:hover {
        filter: brightness(130%);
    }

    @media print {
    .hide-on-print {
        display: none;
    }
}
</style>

{#if footerCollapse}
    <style>
        .about-container {
            flex-direction: column;
            justify-content: center !important;
            gap: 25px;
        }
    </style>
{/if}

{#if isMobile}
    <style>

    </style>
{/if}