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

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

  let { children } = $props();

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

  const footerCollapseThreshold: string = "1000px";
  const headerCollapseThreshold: string = "1000px";
  let footerCollapse: boolean;
  let isMobile: boolean = $state(false);

  let navbarHidden: boolean = $state(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 Zooter from "./comps/Zooter.svelte";

  onMount(async () => {
    const lock = document.createElement("meta");
    lock.name = "darkreader-lock";
    document.head.appendChild(lock);
  });

  function nextTheme() {
    let theme: string | null = null;

    if (typeof localStorage !== "undefined") {
      theme = localStorage.getItem("theme");
    }

    const themesArr = (window as any).AvailableThemes;
    let nextTheme = "dark";
    if (
      theme == "null" ||
      theme == "undefined" ||
      theme == undefined ||
      theme == null
    ) {
    } else {
      nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
    }

    console.log("Slecting: " + nextTheme);
    document.documentElement.setAttribute("data-theme", nextTheme);
    localStorage.setItem("theme", nextTheme);
  }
</script>

{#snippet SwitchThemeButton()}
  <div
    class="tooltip tooltip-bottom grid place-content-center"
    data-tip="Switch theme"
  >
    <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
  </div>
{/snippet}

<!-- 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' : ''} bg-base-300">
    <div class="nav-bar pr-4">
      {#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="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->

          {@render SwitchThemeButton()}

          <a
            href="/zhen/cv/rev2?hideOnPrint=1"
            target="_blank"
            style="width: 7.5rem;">Zhen CV</a
          >
          <a href="/tools" style="width: 7.5rem;">Tools</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 shadow-xl">
          <a onclick={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" />
          {@render SwitchThemeButton()}
          <div class="px-1"></div>
          <button
            id="toggle-nav"
            onclick={() => {
              navbarHidden = !navbarHidden;
              console.log(navbarHidden);
            }}
          >
            <HamburgerMenuIcon Class="fill-base-content" />
          </button>
        </div>
        {#if !navbarHidden}
          <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
            <!-- <a onclick={resetNavBar} href="/">Home</a> -->
            <a
              onclick={resetNavBar}
              href="https://botalex.itch.io/"
              target="_blank">Games</a
            >
            <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
            <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
                        <a onclick={resetNavBar} href="/about">About</a> -->
          </div>
        {/if}
      {/if}
    </div>
  </header>

  <!-- Page content -->
  {@render children?.()}

  <Zooter bind:hideOnPrint />
</div>

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

{#if isMobile}
  <style>
  </style>
{/if}

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