From e055da422402d358880a074d20839dd685bbb7a1 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Fri, 28 Feb 2025 21:12:24 +0530
Subject: [PATCH 1/7] Improve navbar overflow handling and simplify link width
 measurement

---
 src/components/navigation/Header.svelte | 148 ++++++++++++++++++------
 1 file changed, 113 insertions(+), 35 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index 5e18b6c0..70dfac05 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -5,10 +5,15 @@
 		PUBLIC_NAV_BAR_LINKS
 	} from '$env/static/public';
 
+	import { onMount } from 'svelte';
 	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
 	import MobileMenu from './MobileMenu.svelte';
 
 	let isMobileMenuOpen = $state(false);
+	let shouldShowMobile = $state(false);
+	let navContainer;
+	let linksContainer;
+	let linksWidthCache = 0;
 
 	let headerLinks = $state(null);
 
@@ -19,14 +24,81 @@
 	function toggleNavbar() {
 		isMobileMenuOpen = !isMobileMenuOpen;
 	}
+
+	function checkOverflow() {
+		if (!navContainer) return;
+
+		const navWidth = navContainer.clientWidth;
+		const logoWidth = navContainer.querySelector('.logo-container')?.clientWidth || 0;
+		const themeWidth = 48;
+		const availableWidth = navWidth - logoWidth - themeWidth - 32;
+
+		let linksWidth = 0;
+		if (linksContainer) {
+			linksWidth = linksContainer.scrollWidth;
+			linksWidthCache = linksWidth;
+		} else {
+			linksWidth = linksWidthCache;
+		}
+
+		const newShouldShowMobileMenu = linksWidth > availableWidth;
+
+		if (shouldShowMobile !== newShouldShowMobileMenu) {
+			shouldShowMobile = newShouldShowMobileMenu;
+		}
+	}
+
+	function measureLinksWidth() {
+		if (headerLinks && !linksContainer) {
+			const tempDiv = document.createElement('div');
+			tempDiv.style.position = 'absolute';
+			tempDiv.style.visibility = 'hidden';
+			tempDiv.style.display = 'flex';
+			tempDiv.style.gap = '1rem';
+
+			if (Object.keys(headerLinks).length > 0) {
+				Object.keys(headerLinks).forEach((key) => {
+					const linkDiv = document.createElement('div');
+					linkDiv.style.padding = '0.25rem 0.5rem';
+					linkDiv.style.flexShrink = '0';
+					linkDiv.textContent = key;
+					tempDiv.appendChild(linkDiv);
+				});
+			} else {
+				const linkDiv = document.createElement('div');
+				linkDiv.style.width = '600px';
+				tempDiv.appendChild(linkDiv);
+			}
+
+			document.body.appendChild(tempDiv);
+			linksWidthCache = tempDiv.scrollWidth;
+			document.body.removeChild(tempDiv);
+		}
+	}
+
+	onMount(() => {
+		measureLinksWidth();
+		checkOverflow();
+
+		const headerResizeObserver = new ResizeObserver(() => {
+			checkOverflow();
+		});
+
+		headerResizeObserver.observe(navContainer);
+
+		return () => {
+			headerResizeObserver.disconnect();
+		};
+	});
 </script>
 
 <div
-	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white md:flex-row md:px-8"
+	class="bg-blur-md bg-white/80 dark:bg-black dark:text-white md:flex-row md:px-8 flex items-center justify-between px-4 border-b border-gray-500"
+	bind:this={navContainer}
 >
-	<div class="flex flex-1 items-center justify-between md:flex-none">
-		<div class="flex w-full justify-between gap-4 px-2 py-2 md:w-auto">
-			<div class="flex items-center justify-center gap-x-2">
+	<div class="md:flex-none flex items-center justify-between flex-1">
+		<div class="logo-container md:w-auto flex items-center w-full gap-4 px-2 py-2">
+			<div class="gap-x-2 flex items-center justify-center">
 				<a href="/" class="block">
 					<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
 				</a>
@@ -34,42 +106,48 @@
 					{PUBLIC_OBA_REGION_NAME}
 				</a>
 			</div>
-
-			<div class="flex items-center justify-end md:hidden">
-				<button onclick={toggleNavbar} aria-label="Toggle navigation menu">
-					<svg
-						class="burger-icon h-6 w-6 text-gray-900 dark:text-white"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 12h16m-7 6h7"
-						></path>
-					</svg>
-				</button>
-			</div>
 		</div>
 
-		<div class="hidden items-center gap-4 px-2 py-2 md:flex">
-			<div class="flex gap-x-4">
-				{#each Object.entries(headerLinks) as [key, value]}
-					<div class="rounded-md border bg-white/80 dark:bg-gray-800">
-						<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white"
-							>{key}</a
-						>
-					</div>
-				{/each}
+		{#if !shouldShowMobile}
+			<div class="flex items-center px-2 py-2" bind:this={linksContainer}>
+				<div class="no-scrollbar gap-x-4 flex overflow-x-auto">
+					{#if headerLinks && Object.keys(headerLinks).length > 0}
+						{#each Object.entries(headerLinks) as [key, value]}
+							<div class="bg-white/80 dark:bg-gray-800 flex-shrink-0 border rounded-md">
+								<a href={value} class="dark:text-white block px-2 py-1 font-semibold text-gray-900"
+									>{key}</a
+								>
+							</div>
+						{/each}
+					{/if}
+				</div>
 			</div>
-		</div>
+		{/if}
 	</div>
 
-	<div class="hidden md:flex">
-		<ThemeSwitcher />
+	<div class="flex items-center">
+		{#if shouldShowMobile}
+			<button onclick={toggleNavbar} aria-label="Toggle navigation menu" class="mr-2">
+				<svg
+					class="burger-icon dark:text-white w-6 h-6 text-gray-900"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h16m-7 6h7"
+					></path>
+				</svg>
+			</button>
+		{:else}
+			<div class={shouldShowMobile ? '' : 'flex'}>
+				<ThemeSwitcher />
+			</div>
+		{/if}
 	</div>
 </div>
 

From f0593e44ade5a8bf8c68df414ca1d6a33c36be8a Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Fri, 28 Feb 2025 21:26:54 +0530
Subject: [PATCH 2/7] linting

---
 src/components/navigation/Header.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index 70dfac05..05a97ad3 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -93,12 +93,12 @@
 </script>
 
 <div
-	class="bg-blur-md bg-white/80 dark:bg-black dark:text-white md:flex-row md:px-8 flex items-center justify-between px-4 border-b border-gray-500"
+	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white md:flex-row md:px-8"
 	bind:this={navContainer}
 >
-	<div class="md:flex-none flex items-center justify-between flex-1">
-		<div class="logo-container md:w-auto flex items-center w-full gap-4 px-2 py-2">
-			<div class="gap-x-2 flex items-center justify-center">
+	<div class="flex flex-1 items-center justify-between md:flex-none">
+		<div class="logo-container flex w-full items-center gap-4 px-2 py-2 md:w-auto">
+			<div class="flex items-center justify-center gap-x-2">
 				<a href="/" class="block">
 					<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
 				</a>
@@ -110,11 +110,11 @@
 
 		{#if !shouldShowMobile}
 			<div class="flex items-center px-2 py-2" bind:this={linksContainer}>
-				<div class="no-scrollbar gap-x-4 flex overflow-x-auto">
+				<div class="no-scrollbar flex gap-x-4 overflow-x-auto">
 					{#if headerLinks && Object.keys(headerLinks).length > 0}
 						{#each Object.entries(headerLinks) as [key, value]}
-							<div class="bg-white/80 dark:bg-gray-800 flex-shrink-0 border rounded-md">
-								<a href={value} class="dark:text-white block px-2 py-1 font-semibold text-gray-900"
+							<div class="flex-shrink-0 rounded-md border bg-white/80 dark:bg-gray-800">
+								<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white"
 									>{key}</a
 								>
 							</div>
@@ -129,7 +129,7 @@
 		{#if shouldShowMobile}
 			<button onclick={toggleNavbar} aria-label="Toggle navigation menu" class="mr-2">
 				<svg
-					class="burger-icon dark:text-white w-6 h-6 text-gray-900"
+					class="burger-icon h-6 w-6 text-gray-900 dark:text-white"
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"

From 07ac60007dbd1e024a03f2955262f7ce159a186e Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Fri, 28 Feb 2025 21:30:49 +0530
Subject: [PATCH 3/7] chore: added null state to headerLinks

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

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index 05a97ad3..d70f7a00 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -12,7 +12,7 @@
 	let isMobileMenuOpen = $state(false);
 	let shouldShowMobile = $state(false);
 	let navContainer;
-	let linksContainer;
+	let linksContainer = $state(null);
 	let linksWidthCache = 0;
 
 	let headerLinks = $state(null);

From 9578ed798a3a64102ff7b4d54bc70f8dc2618019 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Wed, 5 Mar 2025 13:26:15 +0530
Subject: [PATCH 4/7] chore: defined constants for THEME_SWITCHER_WIDTH and
 EXTRA_PADDING to calculate the proper layout width

---
 src/components/navigation/Header.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index d70f7a00..b1d2c916 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -15,6 +15,9 @@
 	let linksContainer = $state(null);
 	let linksWidthCache = 0;
 
+	const THEME_SWITCHER_WIDTH = 56; // Width of the theme switcher component in pixels
+	const EXTRA_PADDING = 32; // Extra padding to account for padding and margins in pixels
+
 	let headerLinks = $state(null);
 
 	if (PUBLIC_NAV_BAR_LINKS) {
@@ -30,8 +33,7 @@
 
 		const navWidth = navContainer.clientWidth;
 		const logoWidth = navContainer.querySelector('.logo-container')?.clientWidth || 0;
-		const themeWidth = 48;
-		const availableWidth = navWidth - logoWidth - themeWidth - 32;
+		const availableWidth = navWidth - logoWidth - THEME_SWITCHER_WIDTH - EXTRA_PADDING;
 
 		let linksWidth = 0;
 		if (linksContainer) {

From afb407588a64931df89096461618708920e0288b Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Wed, 5 Mar 2025 13:33:15 +0530
Subject: [PATCH 5/7] chore: renamed linksWidthCache to cachedLinksWidth

---
 src/components/navigation/Header.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index b1d2c916..dca4ef51 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -13,7 +13,7 @@
 	let shouldShowMobile = $state(false);
 	let navContainer;
 	let linksContainer = $state(null);
-	let linksWidthCache = 0;
+	let cachedLinksWidth = 0;
 
 	const THEME_SWITCHER_WIDTH = 56; // Width of the theme switcher component in pixels
 	const EXTRA_PADDING = 32; // Extra padding to account for padding and margins in pixels
@@ -38,9 +38,9 @@
 		let linksWidth = 0;
 		if (linksContainer) {
 			linksWidth = linksContainer.scrollWidth;
-			linksWidthCache = linksWidth;
+			cachedLinksWidth = linksWidth;
 		} else {
-			linksWidth = linksWidthCache;
+			linksWidth = cachedLinksWidth;
 		}
 
 		const newShouldShowMobileMenu = linksWidth > availableWidth;
@@ -73,7 +73,7 @@
 			}
 
 			document.body.appendChild(tempDiv);
-			linksWidthCache = tempDiv.scrollWidth;
+			cachedLinksWidth = tempDiv.scrollWidth;
 			document.body.removeChild(tempDiv);
 		}
 	}

From 495c0b504325dd2271945893194eccdce2a887f4 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Wed, 5 Mar 2025 13:37:35 +0530
Subject: [PATCH 6/7] chore: add an early return instead of deep nesting

---
 src/components/navigation/Header.svelte | 46 +++++++++++++------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index dca4ef51..a288f27a 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -51,31 +51,33 @@
 	}
 
 	function measureLinksWidth() {
-		if (headerLinks && !linksContainer) {
-			const tempDiv = document.createElement('div');
-			tempDiv.style.position = 'absolute';
-			tempDiv.style.visibility = 'hidden';
-			tempDiv.style.display = 'flex';
-			tempDiv.style.gap = '1rem';
-
-			if (Object.keys(headerLinks).length > 0) {
-				Object.keys(headerLinks).forEach((key) => {
-					const linkDiv = document.createElement('div');
-					linkDiv.style.padding = '0.25rem 0.5rem';
-					linkDiv.style.flexShrink = '0';
-					linkDiv.textContent = key;
-					tempDiv.appendChild(linkDiv);
-				});
-			} else {
+		if (!headerLinks && linksContainer) {
+			return;
+		}
+
+		const tempDiv = document.createElement('div');
+		tempDiv.style.position = 'absolute';
+		tempDiv.style.visibility = 'hidden';
+		tempDiv.style.display = 'flex';
+		tempDiv.style.gap = '1rem';
+
+		if (Object.keys(headerLinks).length > 0) {
+			Object.keys(headerLinks).forEach((key) => {
 				const linkDiv = document.createElement('div');
-				linkDiv.style.width = '600px';
+				linkDiv.style.padding = '0.25rem 0.5rem';
+				linkDiv.style.flexShrink = '0';
+				linkDiv.textContent = key;
 				tempDiv.appendChild(linkDiv);
-			}
-
-			document.body.appendChild(tempDiv);
-			cachedLinksWidth = tempDiv.scrollWidth;
-			document.body.removeChild(tempDiv);
+			});
+		} else {
+			const linkDiv = document.createElement('div');
+			linkDiv.style.width = '600px';
+			tempDiv.appendChild(linkDiv);
 		}
+
+		document.body.appendChild(tempDiv);
+		cachedLinksWidth = tempDiv.scrollWidth;
+		document.body.removeChild(tempDiv);
 	}
 
 	onMount(() => {

From a32d249f88ecaa729c87d9668161dc767b996b51 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Wed, 5 Mar 2025 14:01:14 +0530
Subject: [PATCH 7/7] chore: add constants for tempDiv padding and gap

---
 src/components/navigation/Header.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index a288f27a..09c7fed3 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -17,6 +17,8 @@
 
 	const THEME_SWITCHER_WIDTH = 56; // Width of the theme switcher component in pixels
 	const EXTRA_PADDING = 32; // Extra padding to account for padding and margins in pixels
+	const LINKS_GAP = '1rem'; // Matches gap-x-4 in the template
+	const LINK_PADDING = '0.25rem 0.5rem'; // Matches px-2 py-1 in the template
 
 	let headerLinks = $state(null);
 
@@ -59,12 +61,12 @@
 		tempDiv.style.position = 'absolute';
 		tempDiv.style.visibility = 'hidden';
 		tempDiv.style.display = 'flex';
-		tempDiv.style.gap = '1rem';
+		tempDiv.style.gap = LINKS_GAP;
 
 		if (Object.keys(headerLinks).length > 0) {
 			Object.keys(headerLinks).forEach((key) => {
 				const linkDiv = document.createElement('div');
-				linkDiv.style.padding = '0.25rem 0.5rem';
+				linkDiv.style.padding = LINK_PADDING;
 				linkDiv.style.flexShrink = '0';
 				linkDiv.textContent = key;
 				tempDiv.appendChild(linkDiv);