Web app navigation (#293)

package.json

@@ -12,11 +12,15 @@
 		"build": "node scripts/buildNumber.cjs release false && tauri build",
 		"build:alpha": "node scripts/buildNumber.cjs alpha false && tauri build",
 		"build:bundle": "node scripts/build.js",
+		"build:website": "node scripts/buildNumber.cjs alpha false && npm run build -w website",
 		"setup": "node scripts/buildNumber.cjs alpha false && node scripts/build.js",
 		"rename": "node scripts/rename.js",
 		"check": "svelte-check && tsc --noEmit && eslint .",
 		"tauri": "tauri"
 	},
+	"workspaces": [
+		"website"
+	],
 	"devDependencies": {
 		"@baileyherbert/tinro": "^1.0.0",
 		"@rgossiaux/svelte-headlessui": "^1.0.2",

website/package.json

@@ -30,7 +30,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@tauri-apps/api": "^1.5.3",
+		"lucide-svelte": "^0.364.0",
 		"otpauth": "^9.2.2",
 		"ua-parser-js": "^1.0.35"
 	}

website/src/components/navigation.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { FileInput, KeyRound, Settings } from "lucide-svelte"
+</script>
+
+<div
+	class="fixed bottom-0 left-1/2 z-50 h-16 w-full max-w-full -translate-x-1/2 rounded-none border border-gray-600 bg-gray-700 duration-200 ease-in-out md:bottom-4 md:max-w-lg md:rounded-full"
+>
+	<div class="no-scrollbar mx-auto flex h-full max-w-lg flex-1 overflow-x-auto">
+		<a
+			aria-label="Codes"
+			href="/codes"
+			class="group inline-flex flex-shrink-0 flex-grow flex-col items-center justify-center sm:rounded-s-full px-5 text-gray-200 duration-200 ease-in-out hover:bg-gray-800 hover:text-white rounded-none"
+		>
+			<KeyRound />
+		</a>
+		<a
+			aria-label="Import"
+			href="/import"
+			class="group inline-flex flex-shrink-0 flex-grow flex-col items-center justify-center px-5 text-gray-200 duration-200 ease-in-out hover:bg-gray-800 hover:text-white"
+		>
+			<FileInput />
+		</a>
+
+		<a
+			aria-label="Settings"
+			href="/settings"
+			class="group inline-flex flex-shrink-0 flex-grow flex-col items-center justify-center sm:rounded-e-full px-5 text-gray-200 duration-200 ease-in-out hover:bg-gray-800 hover:text-white rounded-none"
+		>
+			<Settings />
+		</a>
+	</div>
+</div>

website/src/routes/(app)/+layout.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import Navigation from "../../components/navigation.svelte"
+</script>
+
+<slot />
+<Navigation />

website/src/routes/(app)/import/+page.svelte

@@ -0,0 +1 @@
+<h1>Import</h1>

website/src/routes/(app)/settings/+page.svelte

@@ -0,0 +1 @@
+<h1>Settings</h1>

website/src/routes/(web)/+layout.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Header from "../../components/header.svelte"
+	import Footer from "../../components/footer.svelte"
+</script>
+
+<Header />
+<slot />
+<Footer />

website/src/routes/+layout.svelte

@@ -1,9 +1,5 @@
 <script>
 	import "../styles/index.css"
-	import Header from "./header.svelte"
-	import Footer from "./footer.svelte"
 </script>
 
-<Header />
 <slot />
-<Footer />