[F] App bar

src/components/IconButton.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { icon, ...rest } = $props();
+</script>
+
+<button class="cbox w-48px h-48px" {...rest}>
+    <span class="h-24px w-24px {icon}"></span>
+</button>

src/components/appbar/AppBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Icon } from "m3-svelte";
+  import IconButton from "../IconButton.svelte";
+
+  let { title, account, settings }: {
+    title?: string
+    account?: () => void
+    settings?: () => void
+  } = $props()
+</script>
+
+<div class="hbox h-64px">
+  {#if account}
+    <IconButton icon="i-material-symbols:account-circle" onclick={account} aria-label="Account" />
+  {:else}
+    <IconButton icon="i-material-symbols:arrow-back-rounded" onclick={() => history.back()} aria-label="Account" />
+  {/if}
+  <div class="m3-font-title-large flex-1">{title}</div>
+  {#if settings}
+    <IconButton icon="i-material-symbols:settings-rounded" onclick={settings} aria-label="Settings" />
+  {/if}
+</div>

src/routes/+layout.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg'
-	import "@fontsource/roboto"
-	import "./app.sass"
-	import "./material.scss"
-    import { AppBar } from "m3-svelte"
+  import favicon from "$lib/assets/favicon.svg"
+  import "@fontsource/roboto"
+  import 'virtual:uno.css'
+  import "./app.sass"
+  import "./material.scss"
+  import '@unocss/reset/normalize.css'
+  import '@unocss/reset/tailwind-v4.css'
 
-	let { children } = $props()
+  import AppBar from "../components/appbar/AppBar.svelte"
+  import type { LayoutProps } from "./$types";
+
+  let { data, children }: LayoutProps = $props();
+  
 </script>
 
 <svelte:head>
-	<link rel="icon" href={favicon} />
+  <link rel="icon" href={favicon} />
 </svelte:head>
 
 {@render children()}

src/routes/+page.svelte

@@ -1,8 +1,7 @@
 <script>
   import { Button } from "m3-svelte"
+  import AppBar from "../components/appbar/AppBar.svelte";
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
 
-<Button>Next</Button>
+<AppBar account={() => alert('Account clicked')} settings={() => alert('Settings clicked')} />

src/routes/app.sass

@@ -1,3 +1,7 @@
-html
+:root
     font-family: 'Roboto', system-ui, sans-serif
-    color-scheme: light
+    // color-scheme: light
+
+body
+    margin: 0
+    background: rgb(var(--m3-scheme-background))

src/routes/material.scss

@@ -5,9 +5,9 @@
     color-scheme: light;
   }
   :root, ::backdrop {
-    --m3-scheme-background: 253 247 254;
+    --m3-scheme-background: 254 247 255;
     --m3-scheme-on-background: 52 49 58;
-    --m3-scheme-surface: 253 247 254;
+    --m3-scheme-surface: 254 247 255;
     --m3-scheme-surface-dim: 222 215 228;
     --m3-scheme-surface-bright: 253 247 254;
     --m3-scheme-surface-container-lowest: 255 255 255;