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

<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
<script lang="ts">
    import { fly } from 'svelte/transition';
    import MediaQuery from 'svelte-media-queries';
    export let hideOnPrint: boolean;

    const footerCollapseThreshold : string = '1000px';
    const headerCollapseThreshold : string = '1000px';
    let footerCollapse : boolean;
    let headerCollapse : 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);
    });
</script>

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

<!-- Nav bar -->
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
    <div class="nav-bar">
        {#if !headerCollapse}
            <div class="desktop">
                <a href="/" class="nav-head">
                    <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
                    <h3 id="logo-text">The Deprived Devs</h3>
                </a>
                <div class="nav-spacer" />
                <a href="/">Home</a>
                <a href="/games">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">
                        <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
                        <h3 id="logo-text">The Deprived Devs</h3>
                    </a>
                    <div class="nav-spacer" />
                    <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
                        <img src="/images/icons/hamburger_menu.svg" alt="Toggle Navigation Bar" />
                    </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="/games">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>
            <br>
            <br>
            <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
        </div>
        <div>
            <h3>About Us</h3>
            <a href="/about">About</a>
        </div>
        <div class="contact">
            <h3>Contact</h3>
            <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
                <img src="/images/icons/discord.svg" alt="Discord"/>
                <span>Discord</span>
            </a>
        </div>
    </div>
</footer>


<style>
    /* 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: var(--text2);
        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);
        color: var(--text2);
    }

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

        height: 100%;

        display: flex;
        justify-content: center;
    }

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

        color: var(--text2);

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

    .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 headerCollapse}
    <style>

    </style>
{/if}