From b9aa54904ffc793f8f26a3c7a384d0e9f7decb2f Mon Sep 17 00:00:00 2001
From: Ushie <ushiekane@gmail.com>
Date: Tue, 3 Jun 2025 02:15:55 +0300
Subject: [PATCH] feat: Make Settings icon more consistent with the NavItems

---
 src/layout/Navbar/NavButton.svelte |  3 ---
 src/layout/Navbar/NavHost.svelte   | 32 ++++++++++++++++++++----------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/layout/Navbar/NavButton.svelte b/src/layout/Navbar/NavButton.svelte
index 5144649..0df5c65 100644
--- a/src/layout/Navbar/NavButton.svelte
+++ b/src/layout/Navbar/NavButton.svelte
@@ -81,9 +81,6 @@
 	}
 
 	@media (max-width: 767px) {
-		li {
-			border-radius: 100px;
-		}
 		a {
 			padding: 0.75rem 1.25rem;
 			justify-content: left;
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index 0a9a37a..8925bfa 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -91,9 +91,11 @@
 					</ul>
 				</div>
 				<div id="secondary-navigation">
-					<button on:click={() => (modals.settings = !modals.settings)} aria-label="Settings">
-						<Cog size="20px" color="var(--surface-six)" />
-					</button>
+					<span class:selected={modals.settings}>
+						<button on:click={() => (modals.settings = !modals.settings)} aria-label="Settings">
+							<Cog size="20px" color={modals.settings ? 'var(--primary)' : 'var(--surface-six)'} />
+						</button>
+					</span>
 				</div>
 			</div>
 		</div>
@@ -119,6 +121,23 @@
 <SessionExpiredModal bind:loginOpen={modals.login} />
 
 <style lang="scss">
+	#secondary-navigation {
+		display: flex;
+
+		span {
+			border-radius: 10px;
+			padding: 10px 16px;
+
+			&:hover {
+				background-color: var(--surface-three);
+			}
+
+			&.selected {
+				background-color: var(--tertiary);
+			}
+		}
+	}
+
 	#logo {
 		padding: 0.5rem;
 	}
@@ -149,13 +168,6 @@
 		background-color: var(--surface-eight);
 	}
 
-	#main-navigation,
-	#secondary-navigation {
-		align-items: center;
-		display: flex;
-		gap: 2rem;
-	}
-
 	img {
 		height: 22px;
 	}