feat: complete navbar structure

src/app.css

@@ -4,6 +4,19 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    border: none;
+    outline: none;
     font-family: "Manrope", sans-serif;
     font-optical-sizing: auto;
+}
+
+.rounded {
+    border-radius: 10px;
+}
+
+.unselectable, .unselectable * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }

src/lib/components/molecules/NavBar.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import logo from '$assets/logo.svg';
+	import Announcement from 'virtual:icons/mdi/announcement';
+	import Gear from 'virtual:icons/mdi/gear';
 
 	const navItems = [
 		{ label: 'Home', href: '/' },
@@ -11,47 +14,72 @@
 </script>
 
 <nav>
-	<ul>
+	<div class="nav-group">
+		<a href="/" class="nav-item unselectable">
+			<img src={logo} alt="ReVanced Logo" class="logo" />
+		</a>
+
 		{#each navItems as { href, label }}
-			<li>
-				<a {href} class:active={page.url.pathname === href}>
-					{label}
-				</a>
-			</li>
+			<a {href} class="rounded nav-button unselectable" class:active={page.url.pathname === href}>
+				{label}
+			</a>
 		{/each}
-	</ul>
+	</div>
+
+	<div class="nav-group">
+		<a href="/announcements" class="rounded nav-button unselectable"><Announcement /></a>
+		<button class="rounded nav-button unselectable" type="button"><Gear /></button>
+	</div>
 </nav>
 
 <style>
 	nav {
-		padding: 1rem;
-		background: #f5f5f5;
-		border-bottom: 1px solid #ddd;
-	}
-
-	ul {
 		display: flex;
-		gap: 1.5rem;
-		list-style: none;
-		max-width: 1200px;
-		margin: 0 auto;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 2rem;
+		height: 70px;
+		position: sticky;
+		top: 0;
+		left: 0;
+		z-index: 9999;
 	}
 
-	a {
+	.nav-group {
+		display: flex;
+		align-items: stretch;
+		justify-content: center;
+		gap: 1.5rem;
+		height: 100%;
+	}
+
+	.nav-item,
+	.nav-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.nav-button {
 		text-decoration: none;
 		color: #333;
 		font-weight: 500;
 		padding: 0.5rem 1rem;
-		border-radius: 4px;
 		transition: background-color 0.2s;
+		background-color: transparent;
+
+		&:hover {
+			background-color: #e0e0e0;
+		}
+
+		&.active {
+			color: #fff;
+			background-color: #333;
+		}
 	}
 
-	a:hover {
-		background-color: #e0e0e0;
-	}
-
-	a.active {
-		color: #fff;
-		background-color: #333;
+	.logo {
+		height: 22px;
+		width: auto;
 	}
 </style>