Adjust base styles

src/routes/+layout.svelte

@@ -1,14 +1,26 @@
 <script lang="ts">
 	import { page } from '$app/state';
 
-	import favicon from '$lib/assets/round-logo.svg';
 	import logoText from '$lib/assets/round-logo-text.svg';
 	import logoPlain from '$lib/assets/round-logo.svg';
+	import favicon from '$lib/assets/round-logo.svg';
+
+	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte'; 
 
 	let { children } = $props();
 
-	const isHome = $derived(page.url.pathname === '/');
+	const navItems = [
-	const pageTitle = $derived(page.data.title ?? 'No Title');
+		{ label: 'Home', path: '/', icon: IconHome},
+		{ label: 'PIS', path:'/pis', icon: IconDialpad},
+		{ label: 'Options', path:'/preferences', icon: IconSettings},
+		{ label: 'About', path: '/about', icon: IconHelp},
+	]
+
+	const activePath = $derived(page.url?.pathname ?? '');
+	const isHome = $derived(page.url?.pathname ?? '' === '/');
+	
+
+	const moreIcon = IconDots;
 </script>
 
 <svelte:head>
@@ -24,7 +36,7 @@
 		{/if}
 	</a>
 	{#if !isHome}
-		<h1 class="page-title">{pageTitle}</h1>
+		<h1 class="page-title">{headerState?.title ?? ""}</h1>
 	{/if}
 </header>
 
@@ -34,6 +46,23 @@
 
 <nav>
 	<!-- Dynamic Nav Elements Here! -->
+	{#each navItems as item}
+	   {@const isActive = activePath === item.path}
+	   <a
+			href={item.path}
+			class="nav-item"
+			class:active={isActive}
+			aria-current={isActive ? 'page' : undefined}
+	   >
+	   		<item.icon
+				size={24}
+				stroke={isActive ? 2.5 : 2}
+				class="nav-icon"
+			/>
+
+			<span class="label">{item.label}</span>
+	   </a>
+	{/each}
 </nav>
 
 <style>
@@ -56,34 +85,16 @@
 		padding: 0;
 		background-color: var(--color-accent);
 		overflow-x: hidden;
-	}
+
-	header, nav {
+
-		flex-shrink: 0;
-		height: 80px;
-		width: 100%;
-		background-color: var(--color-accent);
-		box-sizing: border-box;
-		left: 0;
-		position: fixed;
-		align-items: center;
-		padding: 0 1rem;
-		display: flex;
-		z-index: 100;
-		align-items: center;
-		gap: 0rem;
 	}
 
-	header {
+		header {
 		top: 0;
+		height: 80px;
 		box-shadow: var(--shadow-std);
 	}
-
+    	.logo-link {
-	nav {
-		bottom: 0;
-		box-shadow: var(--shadow-up);
-	}
-
-	.logo-link {
 		width: auto;
 		display: block;
 		height: 55px;
@@ -100,13 +111,69 @@
 		padding-bottom: 2px;
 		color: var(--color-title);
 	}
+	header, nav {
+		flex-shrink: 0;
+		width: 100%;
+		background-color: var(--color-accent);
+		box-sizing: border-box;
+		left: 0;
+		position: fixed;
+		align-items: center;
+		padding: 0 1rem;
+		display: flex;
+		z-index: 100;
+		align-items: center;
+		gap: 0rem;
+	}
+
+	nav {
+		bottom: 0;
+		height: 60px;
+		box-shadow: var(--shadow-up);
+	}
+
 
 	main {
 		padding-top: 80px;
-		padding-bottom: 80px;
+		padding-bottom: 60px;
 		min-height: 100dvh;
 		box-sizing: border-box;
 		background-color: var(--color-bg-dark);
 		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
 	}
+
+	.nav-item {
+		flex: 1;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		position:  relative;
+		height: 100%;
+		color: rgba(255,255,255,0.4);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.nav-item.active {
+		color: #ffffff;
+		background: rgba(255,255,255,0.05);
+	}
+
+	.nav-item.active::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		width: 40%;
+		height: 3px;
+		background-color: var(--color-brand);
+		border-radius: 0 0 4px 4px;
+		box-shadow: var(--shadow-std);
+	}
+
+	.label {
+		font-size: 0.65rem;
+		font-weight: 700;
+		margin-top: 4px;
+		letter-spacing: 0.2rem;
+	}
 </style>

src/routes/about/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+    import headerState from '$lib/Header/Header.svelte.ts'
+    headerState.title = "About"
+</script>