From c4fe50876b381e7daf7b3a47b987a5ee1be54a73 Mon Sep 17 00:00:00 2001
From: Dalai Jotisalikorn Surenjargal <dalai2547@gmail.com>
Date: Mon, 16 Sep 2024 00:40:42 +0700
Subject: [PATCH 1/6] fix: refactor file and responsiveness

---
 src/lib/components/Navbar.svelte          | 21 +++++++++++----------
 {static => src/lib/icons}/sucu_logo_1.svg |  0
 2 files changed, 11 insertions(+), 10 deletions(-)
 rename {static => src/lib/icons}/sucu_logo_1.svg (100%)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 4ddc907..af7008c 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -14,7 +14,7 @@
 
 <nav class="bg-sucu-pink-01 p-4 px-11 flex justify-between items-center">
 	<div class="flex items-center space-x-3 z-50">
-		<img src="/sucu_logo_1.svg" alt="Logo" class="h-12" />
+		<img alt="Logo" class="h-12" src="/src/lib/icons/sucu_logo_1.svg" />
 		<div class="hidden md:block text-white font-bold">
 			<p>สโมสรนิสิต</p>
 			<p>จุฬาลงกรณ์มหาวิทยาลัย</p>
@@ -22,7 +22,7 @@
 	</div>
 
 	{#if isMenuOpen}
-		<button class="text-white text-4xl self-end focus:outline-none z-50" on:click={toggleMenu}>
+		<button class="text-white md:hidden text-4xl self-end focus:outline-none z-50" on:click={toggleMenu}>
 			&times;
 		</button>
 	{:else}
@@ -47,9 +47,9 @@
 	</div>
 
 	<div
-		class="fixed inset-0 bg-sucu-pink-01 flex flex-col items-end justify-end space-y-8 p-8 text-white transform duration-300 ease-in-out"
-		class:menu-open={isMenuOpen}
+		class="fixed inset-0 bg-sucu-pink-01 md:hidden flex flex-col items-end h-[800px] justify-end space-y-8 p-8 text-white transform duration-300 ease-in-out"
 		class:menu-closed={!isMenuOpen}
+		class:menu-open={isMenuOpen}
 	>
 		{#each navItems as item}
 			<a href={item.href} class="text-white text-lg hover:underline">{item.name}</a>
@@ -58,10 +58,11 @@
 </nav>
 
 <style>
-	.menu-open {
-		transform: translateY(-60%);
-	}
-	.menu-closed {
-		transform: translateY(-100%);
-	}
+    .menu-open {
+        transform: translateY(-60%);
+    }
+
+    .menu-closed {
+        transform: translateY(-100%);
+    }
 </style>
diff --git a/static/sucu_logo_1.svg b/src/lib/icons/sucu_logo_1.svg
similarity index 100%
rename from static/sucu_logo_1.svg
rename to src/lib/icons/sucu_logo_1.svg

From 9fe9c9a2baa7e169f699329ef3b24d83012277e7 Mon Sep 17 00:00:00 2001
From: Dalai Jotisalikorn Surenjargal <dalai2547@gmail.com>
Date: Mon, 16 Sep 2024 00:51:55 +0700
Subject: [PATCH 2/6] style: prettier

---
 src/lib/components/Navbar.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index af7008c..27c7153 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -22,7 +22,10 @@
 	</div>
 
 	{#if isMenuOpen}
-		<button class="text-white md:hidden text-4xl self-end focus:outline-none z-50" on:click={toggleMenu}>
+		<button
+			class="text-white md:hidden text-4xl self-end focus:outline-none z-50"
+			on:click={toggleMenu}
+		>
 			&times;
 		</button>
 	{:else}
@@ -58,11 +61,11 @@
 </nav>
 
 <style>
-    .menu-open {
-        transform: translateY(-60%);
-    }
+	.menu-open {
+		transform: translateY(-60%);
+	}
 
-    .menu-closed {
-        transform: translateY(-100%);
-    }
+	.menu-closed {
+		transform: translateY(-100%);
+	}
 </style>

From fe1fc6020e94e62ee351323395f0cdf650951ecf Mon Sep 17 00:00:00 2001
From: Dalai Jotisalikorn Surenjargal <dalai2547@gmail.com>
Date: Mon, 16 Sep 2024 01:26:41 +0700
Subject: [PATCH 3/6] fix: logo and etc...

---
 src/lib/components/Navbar.svelte | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 27c7153..c604d3a 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,4 +1,8 @@
 <script>
+	import Fa from 'svelte-fa';
+	import sucuLogo from '/src/lib/icons/sucu_logo_1.svg';
+	import { faBars } from '@fortawesome/free-solid-svg-icons';
+
 	let isMenuOpen = false;
 	const toggleMenu = () => {
 		isMenuOpen = !isMenuOpen;
@@ -13,33 +17,21 @@
 </script>
 
 <nav class="bg-sucu-pink-01 p-4 px-11 flex justify-between items-center">
-	<div class="flex items-center space-x-3 z-50">
-		<img alt="Logo" class="h-12" src="/src/lib/icons/sucu_logo_1.svg" />
+	<a href="/" class="flex items-center space-x-3 z-50">
+		<img alt="Logo" class="h-12" src={sucuLogo} />
 		<div class="hidden md:block text-white font-bold">
 			<p>สโมสรนิสิต</p>
 			<p>จุฬาลงกรณ์มหาวิทยาลัย</p>
 		</div>
-	</div>
+	</a>
 
 	{#if isMenuOpen}
-		<button
-			class="text-white md:hidden text-4xl self-end focus:outline-none z-50"
-			on:click={toggleMenu}
-		>
+		<button class="text-white md:hidden text-4xl focus:outline-none z-50" on:click={toggleMenu}>
 			&times;
 		</button>
 	{:else}
 		<button class="block md:hidden text-white focus:outline-none z-50" on:click={toggleMenu}>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-8 w-8"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
-			</svg>
+			<Fa icon={faBars} class="text-2xl" />
 		</button>
 	{/if}
 

From 9f0a2f2e6594525ec82686f7e50a2254543d8194 Mon Sep 17 00:00:00 2001
From: Dalai Jotisalikorn Surenjargal <dalai2547@gmail.com>
Date: Wed, 18 Sep 2024 14:42:11 +0700
Subject: [PATCH 4/6] fix: change to absolute

---
 src/lib/components/Navbar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index c604d3a..9570d8b 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -42,7 +42,7 @@
 	</div>
 
 	<div
-		class="fixed inset-0 bg-sucu-pink-01 md:hidden flex flex-col items-end h-[800px] justify-end space-y-8 p-8 text-white transform duration-300 ease-in-out"
+		class="absolute inset-0 bg-sucu-pink-01 md:hidden flex flex-col items-end h-[800px] justify-end space-y-8 p-8 text-white transform duration-300 ease-in-out"
 		class:menu-closed={!isMenuOpen}
 		class:menu-open={isMenuOpen}
 	>

From 17eaa1bded29e4de286230595aff328f913fbb01 Mon Sep 17 00:00:00 2001
From: Dalai Jotisalikorn Surenjargal <dalai2547@gmail.com>
Date: Sun, 22 Sep 2024 20:56:49 +0700
Subject: [PATCH 5/6] feat: add background blurry

---
 src/lib/components/Navbar.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 9570d8b..20923cb 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -26,6 +26,7 @@
 	</a>
 
 	{#if isMenuOpen}
+		<div class="absolute inset-0 bg-gray-700 bg-opacity-40 backdrop-blur-sm" />
 		<button class="text-white md:hidden text-4xl focus:outline-none z-50" on:click={toggleMenu}>
 			&times;
 		</button>

From 75665cd2484f8a7db5f0cff14e0461d2c198bfe6 Mon Sep 17 00:00:00 2001
From: Sirawit Chanaburanasak <ext.sirawit@skooldio.com>
Date: Sun, 22 Sep 2024 22:35:32 +0700
Subject: [PATCH 6/6] fix: not blur entired screen

---
 src/lib/components/Navbar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 20923cb..6d064f1 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -26,7 +26,7 @@
 	</a>
 
 	{#if isMenuOpen}
-		<div class="absolute inset-0 bg-gray-700 bg-opacity-40 backdrop-blur-sm" />
+		<div class="fixed inset-0 bg-gray-700 bg-opacity-40 backdrop-blur-sm" />
 		<button class="text-white md:hidden text-4xl focus:outline-none z-50" on:click={toggleMenu}>
 			&times;
 		</button>