sidebar

src/routes/+layout.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
+	import { page } from "$app/state";
 	import favicon from "$lib/assets/favicon.svg";
 	import "../app.css";
 
+	const links = [
+		{ name: "Standards", path: "/standards" },
+		{ name: "Commerce", path: "/commerce" },
+	];
+
 	let { children } = $props();
 </script>
 
@@ -9,4 +15,30 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children?.()}
+<div class="drawer lg:drawer-open">
+	<input id="sidebar" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-content p-10 flex flex-col items-center justify-center">
+		{@render children?.()}
+		<label for="sidebar" class="btn btn-primary drawer-button lg:hidden">
+			Open drawer
+		</label>
+	</div>
+	<div class="drawer-side">
+		<label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
+		></label>
+		<ul
+			class="menu menu-lg bg-base-200 text-base-content min-h-full w-72 p-4"
+		>
+			{#each links as link}
+				<li>
+					<a
+						class={{
+							"menu-active": page.url.pathname === link.path,
+						}}
+						href={link.path}>{link.name}</a
+					>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>

src/routes/+page.server.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ }) => {
+	redirect(308, '/standards');
+};

src/routes/standards/+page.svelte

@@ -76,15 +76,9 @@
 	};
 </script>
 
-<div class="container m-auto">
-	<section
-		class="w-full flex flex-col md:flex-row justify-between gap-2 pt-10"
-	>
+<section class="w-full flex justify-between gap-2 pt-10 items-center">
 	<fieldset class="fieldset bg-base-200 p-6 max-w-lg">
-			<legend class="fieldset-legend text-lg font-semibold">
-				Metrics
-			</legend>
-
+		<legend class="fieldset-legend text-lg font-semibold"> Metrics </legend>
 		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 			<label>
 				<span class="label mb-1">Activity</span>
@@ -134,9 +128,7 @@
 					type="number"
 					min="0"
 					max="600"
-						placeholder={selected.metrics.age
-							? "170"
-							: "Requires age"}
+					placeholder={selected.metrics.age ? "170" : "Requires age"}
 					bind:value={input.metrics.weight}
 					disabled={!selected.metrics.age}
 				/>
@@ -149,16 +141,17 @@
 			Parameters
 		</legend>
 
-			<fieldset class="fieldset bg-base-250 p-3 max-w-xl">
+		<div class="flex gap-4">
+			<fieldset class="fieldset bg-base-300 p-3 max-w-xl">
 				<legend class="fieldset-legend text-sm font-semibold">
 					General
 				</legend>
 
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div class="grid grid-cols-1 gap-4">
 					<label>
 						<span class="label mb-1">Max level</span>
 						<input
-							class="input"
+							class="input w-full"
 							type="number"
 							min="1"
 							max="100"
@@ -169,7 +162,7 @@
 				</div>
 			</fieldset>
 
-			<fieldset class="fieldset bg-base-300 p-3 max-w-xl">
+			<fieldset class="fieldset bg-base-300 p-3 max-w-3xs">
 				<legend class="fieldset-legend text-sm font-semibold">
 					Data Generation
 				</legend>
@@ -178,7 +171,7 @@
 					<label>
 						<span class="label mb-1">Weight modifier</span>
 						<input
-							class="input"
+							class="input w-full"
 							type="number"
 							min="0"
 							max="1"
@@ -190,7 +183,7 @@
 					<label>
 						<span class="label mb-1">Weight skew</span>
 						<input
-							class="input"
+							class="input w-full"
 							type="number"
 							min="0"
 							max="1"
@@ -202,7 +195,7 @@
 					<label>
 						<span class="label mb-1">Age modifier</span>
 						<input
-							class="input"
+							class="input w-full"
 							type="number"
 							min="0"
 							max="1"
@@ -213,19 +206,16 @@
 					</label>
 				</div>
 			</fieldset>
+		</div>
 	</fieldset>
-	</section>
+</section>
 
-	<div class="divider"></div>
+<div class="divider"></div>
 
-	<section>
+<section class="w-full">
 	<div>
-			<h1 class="text-2xl font-bold mb-2.5">
-				{allStandards.byActivity(selected.activity).getMetadata().name}
-			</h1>
 		<div class="flex items-center">
-				<h2 class="text-xl">{selected.metrics.gender}</h2>
-				<p class="text-xs label ml-2.5">
+			<p class="text-xs label">
 				{#if allStandards
 					.byActivity(selected.activity)
 					.getMetadata().generators.length}
@@ -251,8 +241,7 @@
 	{:else}
 		{@render standardsTable(selected.activity, selected.metrics)}
 	{/if}
-	</section>
-</div>
+</section>
 
 {#snippet standardsTable(activity: Activity, metrics: Metrics)}
 	{#snippet standardsTableRow(standard: Standard)}