Basic layout in place

fresh.gen.ts

@@ -8,6 +8,7 @@ import * as $api_joke from './routes/api/joke.ts'
 import * as $greet_name_ from './routes/greet/[name].tsx'
 import * as $index from './routes/index.tsx'
 import * as $Counter from './islands/Counter.tsx'
+import * as $Dashboard from './islands/Dashboard.tsx'
 import { type Manifest } from '$fresh/server.ts'
 
 const manifest = {
@@ -20,6 +21,7 @@ const manifest = {
 	},
 	islands: {
 		'./islands/Counter.tsx': $Counter,
+		'./islands/Dashboard.tsx': $Dashboard,
 	},
 	baseUrl: import.meta.url,
 } satisfies Manifest

islands/Dashboard.tsx

@@ -0,0 +1,60 @@
+import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
+import { JSX } from 'preact'
+
+// interface Budget {
+// 	name: string
+// 	target: number
+// 	buffer?: number
+// }
+
+interface IconButtonProps {
+	active?: boolean
+	text: string
+	icon: string
+}
+function IconButton(
+	{ icon, text, active, ...props }:
+		& IconButtonProps
+		& JSX.HTMLAttributes<HTMLButtonElement>,
+) {
+	return (
+		<button
+			class={'p-2 flex flex-col sm:flex-row flex-1 sm:flex-none bg-bg justify-center items-center sm:justify-start text-center sm:text-left rounded' +
+				(active ? ' text-primary' : '')}
+			{...props}
+		>
+			<i>{icon}</i>
+			<span>{text}</span>
+		</button>
+	)
+}
+
+export default function Dashboard() {
+	const activeNavItemIndex = useSignal(0)
+	const navItems = [
+		{ text: 'Some Text', icon: 'ICON' },
+		{ text: 'Some Text', icon: 'ICON' },
+		{ text: 'Some Text', icon: 'ICON' },
+	]
+
+	return (
+		<div class='grid grid-rows-[1fr_auto] sm:grid-cols-2 sm:grid-rows-1 sm:grid-cols-[1fr_auto] h-[100vh]'>
+			<main class='p-2'>
+				This is the main content
+			</main>
+
+			<nav class='w-full flex flex-1 sm:flex-col bg-mantle gap-1 p-1'>
+				{navItems.map((props, i) => (
+					<IconButton
+						{...props}
+						active={i == activeNavItemIndex.value}
+						onClick={(ev) => {
+							console.log({ ev, i })
+							activeNavItemIndex.value = i
+						}}
+					/>
+				))}
+			</nav>
+		</div>
+	)
+}

routes/index.tsx

@@ -1,46 +1,5 @@
-import { VNode } from 'https://esm.sh/v128/preact@10.19.6/src/index.js'
+import Dashboard from '../islands/Dashboard.tsx'
-import { JSX } from 'preact'
-
-interface Budget {
-	name: string
-	target: number
-	buffer?: number
-}
-
-interface IconButtonProps {
-	text: string
-	icon: string
-}
-
-function IconButton(
-	{ icon, text, ...props }:
-		& IconButtonProps
-		& JSX.HTMLAttributes<HTMLAnchorElement>,
-) {
-	return (
-		<a
-			href='#'
-			class='p-2 flex flex-col flex-1 bg-bg justify-center items-center text-center'
-			{...props}
-		>
-			<i>{icon}</i>
-			<span>{text}</span>
-		</a>
-	)
-}
 
 export default function Home() {
-	return (
+	return <Dashboard />
-		<div class='flex flex-col sm:flex-row min-h-full'>
-			<main class='p-2'>
-				This is the main content
-			</main>
-
-			<nav class='w-full mt-auto sm:ml-auto flex flex-1 bg-mantle gap-1 p-1'>
-				<IconButton text='Some Text' icon='Some Icon' />
-				<IconButton text='Some Text' icon='Some Icon' />
-				<IconButton text='Some Text' icon='Some Icon' />
-			</nav>
-		</div>
-	)
 }