From 9698506add2faecd3daad5b2769e60cd70acded2 Mon Sep 17 00:00:00 2001
From: Powie <PowieIsCool@gmail.com>
Date: Sun, 4 May 2025 14:19:46 +0800
Subject: [PATCH 1/2] having a long username will no longer affect alignment of
 header

---
 src/lib/components/navbar.svelte | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 34129a5..455fde2 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -35,6 +35,7 @@
     <a href="/" class="icon-link"><img src="/icon.png" alt="icon" class="icon"></a>
 
     {#if hamburger}
+        <div></div>
         <button on:click={() => hamburgerOpen = !hamburgerOpen} use:clickOutside={() => hamburgerOpen = false} class="hamburger hamburger--collapse" class:is-active={hamburgerOpen} type="button">
             <span class="hamburger-box"><span class="hamburger-inner"></span></span>
         </button>
@@ -72,7 +73,7 @@
                     <img src={$user.discordAvatar ? $user.discordAvatar : "/empty-profile.png"} alt="profile"/>
                 </a>
             {:else}
-                <a href="/login"><button>Login</button></a>
+                <a class="login-button" href="/login"><button>Login</button></a>
             {/if}
         {/if}
     {/if}
@@ -81,9 +82,9 @@
 <style>
     nav {
         background-color: var(--accent);
-        display: flex;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
         align-items: center;
-        justify-content: space-between;
     }
 
     a {
@@ -107,13 +108,15 @@
     .user {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: end;
         gap: 0.5rem;
         min-height: 4.5rem;
         padding-left: 1.5rem;
         padding-right: 1.5rem;
         color: var(--text-primary);
         text-decoration: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .user:hover {
@@ -140,6 +143,10 @@
         text-shadow: rgba(0, 0, 0, 0.44) 1px 1px 4px;
     }
 
+    .login-button {
+        place-self: center end;
+    }
+
     button {
         margin-right: 1rem;
     }

From df16e7f11ae693184739dff70ccc1793c40d8211 Mon Sep 17 00:00:00 2001
From: Powie <PowieIsCool@gmail.com>
Date: Mon, 5 May 2025 17:17:27 +0800
Subject: [PATCH 2/2] make header sticky  & fix hamburger not being aligned to
 right side

---
 src/lib/components/navbar.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 455fde2..8d59aa9 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -81,10 +81,13 @@
 
 <style>
     nav {
-        background-color: var(--accent);
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         align-items: center;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: var(--accent);
     }
 
     a {
@@ -152,6 +155,7 @@
     }
 
     .hamburger {
+        place-self: center end;
         background-image: none;
         padding: 0 !important;
         box-shadow: none;