added navigation component

src/components/Navigation.svelte

@@ -2,68 +2,65 @@
 	import { page } from '$app/stores';
 </script>
 
+<div class="fixed w-full bottom-0 left-0">
 	<div class="flex justify-center align-end">
-	<nav class="absolute bottom-0 max-w-min flex gap-2 m-6 p-2 bg-gray-700 rounded-full">
+		<nav class="absolute bottom-0 max-w-min flex gap-1.5 m-6 p-2 variant-glass-surface rounded-full">
 			<a href="/" class:active={$page.url.pathname == '/'}>
-			<p>Dashboard</p>
+				<p class="badge variant-filled">Dashboard</p>
 				<svg xmlns="http://www.w3.org/2000/svg" height="32" width="36" viewBox="0 0 576 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M298.6 4c-6-5.3-15.1-5.3-21.2 0L5.4 244c-6.6 5.8-7.3 16-1.4 22.6s16 7.3 22.6 1.4L64 235V432c0 44.2 35.8 80 80 80H432c44.2 0 80-35.8 80-80V235l37.4 33c6.6 5.8 16.7 5.2 22.6-1.4s5.2-16.7-1.4-22.6L298.6 4zM96 432V206.7L288 37.3 480 206.7V432c0 26.5-21.5 48-48 48H368V320c0-17.7-14.3-32-32-32H240c-17.7 0-32 14.3-32 32V480H144c-26.5 0-48-21.5-48-48zm144 48V320h96V480H240z"/>
 				</svg>
 			</a>
 			<a href="/control" class:active={$page.url.pathname == '/control'}>
-			<p>Control</p>
+				<p class="badge variant-filled">Control</p>
 				<svg xmlns="http://www.w3.org/2000/svg" height="32" width="28" viewBox="0 0 448 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M304 112a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zm32 0c0 56.4-41.7 103.1-96 110.9V320H208V222.9c-54.3-7.8-96-54.4-96-110.9C112 50.1 162.1 0 224 0s112 50.1 112 112zM64 304c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zM416 416c0-17.7-14.3-32-32-32H64c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416zM64 352H384c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM208 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
 				</svg>
 			</a>
 			<a href="/devices" class:active={$page.url.pathname == '/devices'}>
-			<p>Devices</p>
+				<p class="badge variant-filled">Devices</p>
 				<svg xmlns="http://www.w3.org/2000/svg" height="32" width="36" viewBox="0 0 576 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M352 32c62.9 0 120.4 22.6 165 60.2c6.8 5.7 16.8 4.8 22.5-1.9s4.8-16.8-1.9-22.5C487.5 25.5 422.7 0 352 0S216.5 25.5 166.4 67.8c-6.8 5.7-7.6 15.8-1.9 22.5s15.8 7.6 22.5 1.9C231.6 54.6 289.1 32 352 32zm16 208c0-8.8-7.2-16-16-16s-16 7.2-16 16v80H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V384c0-35.3-28.7-64-64-64H368V240zM64 352H512c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V384c0-17.7 14.3-32 32-32zm40 88a24 24 0 1 0 0-48 24 24 0 1 0 0 48zm104-24a24 24 0 1 0 -48 0 24 24 0 1 0 48 0zm42.2-251.4C277.9 141.7 313.3 128 352 128s74.1 13.7 101.8 36.6c6.8 5.6 16.9 4.7 22.5-2.1s4.7-16.9-2.1-22.5C441 112.5 398.4 96 352 96s-89 16.5-122.2 43.9c-6.8 5.6-7.8 15.7-2.1 22.5s15.7 7.8 22.5 2.1z"/>
 				</svg>
 			</a>
 			<a href="/help" class:active={$page.url.pathname == '/help'}>
-			<p>Help</p>
+				<p class="badge variant-filled">Help</p>
 				<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M480 256A224 224 0 1 0 32 256a224 224 0 1 0 448 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm168.7-86.2c6.5-24.6 28.7-41.8 54.2-41.8H280c35.5 0 64 29 64 64.3c0 24-13.4 46.2-34.9 57.2L272 268.3V288c0 8.8-7.2 16-16 16s-16-7.2-16-16V258.5c0-6 3.4-11.5 8.7-14.3l45.8-23.4c10.7-5.4 17.5-16.6 17.5-28.7c0-17.8-14.4-32.3-32-32.3H222.9c-10.9 0-20.5 7.4-23.2 17.9l-.2 .7c-2.2 8.5-11 13.7-19.5 11.4s-13.7-11-11.4-19.5l.2-.7zM232 352a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/>
 				</svg>
 			</a>
 			<a href="/settings" class:active={$page.url.pathname == '/settings'}>
-			<p>Settings</p>
+				<p class="badge variant-filled">Settings</p>
 				<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M215 62.8l4.9-24.3-15.7-3.1 15.7 3.1c.3-1.5 1-2.8 1.9-3.8C232.9 32.9 244.4 32 256 32s23.1 .9 34.2 2.6c1 1.1 1.6 2.4 1.9 3.8L297 62.8c2.9 14.4 13.2 25.2 25.5 30.3l0 0 1.5 .6 0 0c12.3 5.2 27.3 4.8 39.5-3.3l20.6-13.8c1.2-.8 2.6-1.3 4.1-1.3c9.1 6.7 17.7 14 25.6 21.9l.8 .8 0 0c7.9 8 15.3 16.5 21.9 25.6c-.1 1.4-.5 2.8-1.3 4.1l-13.8 20.6c-8.1 12.2-8.5 27.1-3.3 39.5l0 0 .6 1.5 0 0c5.1 12.4 15.9 22.6 30.3 25.5l24.3 4.9c1.5 .3 2.8 1 3.8 1.9c1.7 11.1 2.6 22.4 2.6 34v.4c0 11.6-.9 22.9-2.6 34c-1.1 1-2.4 1.6-3.8 1.9L449.2 297c-14.4 2.9-25.2 13.2-30.3 25.5l0 0-.6 1.5 0 0c-5.2 12.3-4.8 27.3 3.3 39.5l13.8 20.6c.8 1.2 1.3 2.6 1.3 4.1c-13.6 18.5-29.9 34.9-48.4 48.4c-1.4-.1-2.8-.5-4.1-1.3l-20.6-13.8c-12.2-8.1-27.1-8.5-39.5-3.3l0 0-1.5 .6 0 0c-12.4 5.1-22.6 15.9-25.5 30.3l-4.9 24.3c-.3 1.5-1 2.8-1.9 3.8c-11.1 1.7-22.6 2.6-34.2 2.6s-23.1-.9-34.2-2.6c-1-1.1-1.6-2.4-1.9-3.8L215 449.2c-2.9-14.4-13.2-25.2-25.5-30.3l0 0-1.5-.6 0 0c-12.3-5.2-27.3-4.8-39.5 3.3l-20.6 13.8c-1.2 .8-2.6 1.3-4.1 1.3c-18.5-13.6-34.9-29.9-48.4-48.4c.1-1.4 .5-2.8 1.3-4.1l13.8-20.6c8.1-12.2 8.5-27.1 3.3-39.5l0 0-.6-1.5 0 0c-5.1-12.4-15.9-22.6-30.3-25.5l-24.3-4.9c-1.5-.3-2.8-1-3.8-1.9C32.9 279.1 32 267.6 32 256s.9-23.1 2.6-34.2c1.1-1 2.4-1.6 3.8-1.9L62.8 215c14.4-2.9 25.2-13.2 30.3-25.5l0 0 .6-1.5 0 0c5.2-12.3 4.8-27.3-3.3-39.5L76.6 127.7c-.8-1.2-1.3-2.6-1.3-4.1c6.7-9.1 14-17.7 22-25.7l.8-.8 0 0c8-7.9 16.6-15.3 25.7-22c1.4 .1 2.8 .5 4.1 1.3l20.6 13.8c12.2 8.1 27.1 8.5 39.5 3.3l0 0 1.5-.6 0 0c12.4-5.1 22.7-15.9 25.5-30.3zM256 0c-14.8 0-29.3 1.3-43.4 3.7c-2 .3-3.9 1-5.6 2.1c-9.4 5.6-16.3 15.1-18.6 26.4l-4.9 24.3c-.5 2.6-2.6 5.4-6.3 6.9l0 0-.1 0-1.7 .7 0 0-.1 0c-3.7 1.5-7.1 1-9.4-.4L145.5 50c-9.6-6.4-21.2-8.2-31.7-5.6c-1.9 .5-3.8 1.3-5.4 2.5C96.6 55.2 85.6 64.4 75.4 74.5l0 0-.8 .8 0 0C64.4 85.6 55.2 96.6 46.9 108.3c-1.2 1.6-2 3.5-2.5 5.4c-2.6 10.6-.8 22.1 5.6 31.7l13.8 20.6c1.5 2.2 2 5.7 .4 9.4l0 .1-.7 1.7 0 0 0 .1c-1.5 3.7-4.3 5.8-6.9 6.3l-24.3 4.9c-11.4 2.3-20.8 9.2-26.4 18.6c-1 1.7-1.7 3.6-2.1 5.6C1.3 226.7 0 241.2 0 256s1.3 29.3 3.7 43.4c.3 2 1 3.9 2.1 5.6c5.6 9.4 15.1 16.3 26.4 18.6l24.3 4.9c2.6 .5 5.4 2.6 6.9 6.3l0 .1 .7 1.7 0 .1c1.5 3.7 1 7.1-.4 9.4L50 366.5c-6.4 9.6-8.2 21.2-5.6 31.7c.5 1.9 1.3 3.8 2.5 5.4c16.8 23.8 37.6 44.6 61.5 61.5c1.6 1.2 3.5 2 5.4 2.5c10.6 2.6 22.1 .8 31.7-5.6l20.6-13.8c2.2-1.5 5.7-2 9.4-.4l.1 0 1.7 .7 .1 0c3.7 1.5 5.8 4.3 6.3 6.9l4.9 24.3c2.3 11.4 9.2 20.8 18.6 26.4c1.7 1 3.6 1.7 5.6 2.1c14.1 2.4 28.6 3.7 43.4 3.7s29.3-1.3 43.4-3.7c2-.3 3.9-1 5.6-2.1c9.4-5.6 16.3-15.1 18.6-26.4l4.9-24.3c.5-2.6 2.6-5.4 6.3-6.9l.1 0 1.7-.7 .1 0c3.7-1.5 7.1-1 9.4 .4L366.5 462c9.6 6.4 21.2 8.2 31.7 5.6c1.9-.5 3.8-1.3 5.4-2.5c23.8-16.8 44.6-37.6 61.5-61.4c1.2-1.6 2-3.5 2.5-5.4c2.6-10.6 .8-22.1-5.6-31.7l-13.8-20.6c-1.5-2.2-2-5.7-.4-9.4l0-.1 .7-1.7 0-.1c1.5-3.7 4.3-5.8 6.9-6.3l24.3-4.9-3.1-15.7 3.1 15.7c11.4-2.3 20.8-9.2 26.4-18.6c1-1.7 1.7-3.6 2.1-5.6c2.4-14 3.7-28.5 3.7-43.2v0-.4 0c0-14.7-1.3-29.1-3.7-43.2c-.3-2-1-3.9-2.1-5.6c-5.6-9.4-15.1-16.3-26.4-18.6l-24.3-4.9c-2.6-.5-5.4-2.6-6.9-6.3l0-.1-.7-1.7 0-.1c-1.5-3.7-1-7.1 .4-9.4L462 145.5c6.4-9.6 8.2-21.2 5.6-31.7c-.5-1.9-1.3-3.8-2.5-5.4c-8.3-11.7-17.5-22.7-27.6-32.9l0 0-.9-.9 0 0c-10.1-10.1-21.1-19.3-32.9-27.6c-1.6-1.2-3.5-2-5.4-2.5c-10.6-2.6-22.1-.8-31.7 5.6L345.9 63.7c-2.2 1.5-5.7 2-9.4 .4l-.1 0-1.7-.7-.1 0c-3.7-1.5-5.8-4.3-6.3-6.9l-4.9-24.3c-2.3-11.4-9.2-20.8-18.6-26.4c-1.7-1-3.6-1.7-5.6-2.1C285.3 1.3 270.8 0 256 0zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm160 0a96 96 0 1 0 -192 0 96 96 0 1 0 192 0z"/>
 				</svg>
 			</a>
 		</nav>
 	</div>
+</div>
 
 <style lang="postcss">
-	a, p, svg {
-		transition: all 300ms;
-	}
-	
 	a {
-		@apply flex w-14 bg-gray-700 p-2 rounded-full aspect-square content-center justify-center;
+		@apply btn-icon btn-icon-xl;
 	}
-	a:hover {
+	a:not(.active) {
-		@apply bg-gray-600;
+		@apply bg-transparent hover:bg-surface-100 hover:bg-opacity-30;
 	}
 	a.active {
-		@apply bg-gray-200;
+		@apply variant-filled-primary;
 	}
 
 	a p {
-		@apply absolute -top-6 px-3 py-1 text-sm bg-gray-700 text-gray-200 rounded-full opacity-0 pointer-events-none;
+		@apply absolute -top-6 opacity-0 font-normal pointer-events-none;
 	}
 	a:hover p {
 		@apply -top-9 opacity-100;
 	}
 
 	a svg {
-		@apply h-6;
+		@apply h-6 m-0 !important;
-		fill: #ffffff;
-	}
-	a.active svg {
-		fill: #333;
 	}
+	/* a.active svg {
+		@apply fill-gray-950;
+	} */
 </style>