From 71ad89b19793b402e5f266a5f386f8087908803f Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Mon, 12 May 2025 20:18:00 +0200
Subject: [PATCH] Fixed hamburger and slight layout improvement

---
 src/routes/+layout.svelte      | 24 +++++++++++++-----------
 src/routes/comps/Zooter.svelte |  4 ++--
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3fad81d..5667969 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,9 +14,9 @@
     const footerCollapseThreshold : string = '1000px';
     const headerCollapseThreshold : string = '1000px';
     let footerCollapse : boolean;
-    let isMobile : boolean;
+    let isMobile : boolean = $state(false);
 
-    let navbarHidden : boolean = true;
+    let navbarHidden : boolean = $state(true);
 
     function resetNavBar() {
         navbarHidden = true;
@@ -57,11 +57,13 @@
         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" on:click={nextTheme}> <Dices/></button>
+    <button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
 </div>
 {/snippet}
 
@@ -92,26 +94,26 @@
                     <!-- <a href="/posts">Blog</a>
                     <a href="/about">About</a> -->
                 </div>
-                {:else}
-                <div class="collapsed">
-                    <a on:click={resetNavBar} href="/" class="nav-head">
+            {: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" on:click={() => navbarHidden = !navbarHidden}>
+                    <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 on:click={resetNavBar} href="/">Home</a> -->
-                    <a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
+                    <!-- <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 on:click={resetNavBar} href="/posts">Blog</a>
-                        <a on:click={resetNavBar} href="/about">About</a> -->
+                        <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
+                        <a onclick={resetNavBar} href="/about">About</a> -->
                     </div>
                 {/if}
             {/if}
diff --git a/src/routes/comps/Zooter.svelte b/src/routes/comps/Zooter.svelte
index 1f302dd..3229e03 100644
--- a/src/routes/comps/Zooter.svelte
+++ b/src/routes/comps/Zooter.svelte
@@ -18,7 +18,7 @@
     <!-- About footer -->
     <div class="{hideOnPrint ? 'hide-on-print' : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8">
         <div class="flex justify-center">
-            <div class="grid gap-8 mg:grid-cols-3 items-center w-full">
+            <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
                 <div class="flex flex-col items-center">
                     <span class="font-bold">© 2023-2025</span>
                     <br>
@@ -37,7 +37,7 @@
                     <!-- <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>
+                        <img class="pl-2" src={svelteLogo} style="height: 1.5rem;" alt="SvelteKit logo"/></a>
                     </div>
                     <span>Website <a href="https://git.spoodythe.one/sveske-juice/deprived-main-website" target="_blank">source code</a></span>