Adjust base styles

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "web-pwa",
 			"version": "0.0.1",
+			"dependencies": {
+				"@tabler/icons-svelte": "^3.40.0"
+			},
 			"devDependencies": {
 				"@eslint/compat": "^2.0.2",
 				"@eslint/js": "^9.39.2",
@@ -734,7 +737,6 @@
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
 			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -745,7 +747,6 @@
 			"version": "2.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
 			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -756,7 +757,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -766,14 +766,12 @@
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.31",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
 			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -1164,7 +1162,6 @@
 			"version": "1.0.9",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
 			"integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@@ -1261,6 +1258,32 @@
 				"vite": "^6.3.0 || ^7.0.0"
 			}
 		},
+		"node_modules/@tabler/icons": {
+			"version": "3.40.0",
+			"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.40.0.tgz",
+			"integrity": "sha512-V/Q4VgNPKubRTiLdmWjV/zscYcj5IIk+euicUtaVVqF6luSC9rDngYWgST5/yh3Mrg/mYUwRv1YVTk71Jp0twQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/codecalm"
+			}
+		},
+		"node_modules/@tabler/icons-svelte": {
+			"version": "3.40.0",
+			"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.40.0.tgz",
+			"integrity": "sha512-7j8y7kPWGEmcTjcAry8JJK9RNnv8lLVN3c4GHRfRj/iu0+ovkaRM1lLplITYVPq/fbzhrK52P8i8JkEQBPj0hw==",
+			"license": "MIT",
+			"dependencies": {
+				"@tabler/icons": "3.40.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/codecalm"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <6 || >=5.0.0-next.0"
+			}
+		},
 		"node_modules/@testing-library/svelte-core": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@testing-library/svelte-core/-/svelte-core-1.0.0.tgz",
@@ -1303,7 +1326,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/json-schema": {
@@ -1327,7 +1349,6 @@
 			"version": "2.0.7",
 			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
 			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
@@ -1748,7 +1769,6 @@
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -1811,7 +1831,6 @@
 			"version": "5.3.1",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
 			"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1831,7 +1850,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1912,7 +1930,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -2022,7 +2039,6 @@
 			"version": "5.6.3",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.3.tgz",
 			"integrity": "sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/es-module-lexer": {
@@ -2257,7 +2273,6 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/espree": {
@@ -2295,7 +2310,6 @@
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.3.tgz",
 			"integrity": "sha512-8fOS+GIGCQZl/ZIlhl59htOlms6U8NvX6ZYgYHpRU/b6tVSh3uHkOHZikl3D4cMbYM0JlpBe+p/BkZEi8J9XIQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2559,7 +2573,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -2661,7 +2674,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/locate-path": {
@@ -2691,7 +2703,6 @@
 			"version": "0.30.21",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
 			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -3324,7 +3335,6 @@
 			"version": "5.53.7",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.53.7.tgz",
 			"integrity": "sha512-uxck1KI7JWtlfP3H6HOWi/94soAl23jsGJkBzN2BAWcQng0+lTrRNhxActFqORgnO9BHVd1hKJhG+ljRuIUWfQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
@@ -3849,7 +3859,6 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
 			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-			"dev": true,
 			"license": "MIT"
 		}
 	}

package.json

@@ -39,5 +39,8 @@
 		"vite": "^7.3.1",
 		"vitest": "^4.0.18",
 		"vitest-browser-svelte": "^2.0.2"
+	},
+	"dependencies": {
+		"@tabler/icons-svelte": "^3.40.0"
 	}
 }

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 pageTitle = $derived(page.data.title ?? 'No Title');
+	const navItems = [
+		{ 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);
 	}
-
-	nav {
-		bottom: 0;
-		box-shadow: var(--shadow-up);
-	}
-
-	.logo-link {
+    	.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>