[+] Menu

src/components/appbar/AppBar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { fly, slide } from "svelte/transition";
+  import { Menu } from "m3-svelte";
   import IconButton from "../IconButton.svelte";
 
   interface Icon {
@@ -6,12 +8,15 @@
     onclick: () => void
   }
 
-  let { title, sub, account, right }: {
+  let { title, sub, account, right, children }: {
     title?: string
     sub?: string
     account?: () => void
     right?: Icon[]
+    children?: any
   } = $props()
+
+  let showMenu = $state(false)
 </script>
 
 <div class="hbox h-64px">
@@ -30,4 +35,16 @@
   {#each right as item}
     <IconButton icon={item.icon} onclick={item.onclick} />
   {/each}
-</div>
+
+  {#if children}
+    <IconButton icon="i-material-symbols:more-vert" onclick={() => showMenu = !showMenu} />
+  {/if}
+</div>
+
+{#if children && showMenu}
+  <div class="absolute right-0 p-16px mt-[-16px]" transition:fly={{ duration: 200, y: -10 }}>
+    <Menu>
+      {@render children()}
+    </Menu>
+  </div>  
+{/if}

src/components/material3/README.md

@@ -0,0 +1,3 @@
+## Material 3
+
+These files are modified from https://github.com/KTibow/m3-svelte to fit the needs of this project.

src/routes/song/[slug]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import AppBar from "../../../components/appbar/AppBar.svelte";
   import type { PageProps } from "./$types"
-  import { LinearProgress } from "m3-svelte";
+  import { LinearProgress, MenuItem } from "m3-svelte";
   import { onMount } from "svelte";
   import type { LyricSegment } from "../../../shared/types.ts";
   import { isKana, isKanji, toHiragana } from "wanakana";
@@ -93,13 +93,13 @@
   let totalRight = $derived(flat.filter(s => s === 'right' || s === 'fuzzy').length)
 </script>
 
-<AppBar title={data.brief.name} sub={data.brief.artists.map(a => a.name).join(", ") + " - " + data.brief.album} right={[
-  // TODO
-  {icon: "i-material-symbols:more-vert", onclick: () => alert('More clicked')}
-]} />
+<AppBar title={data.brief.name} sub={data.brief.artists.map(a => a.name).join(", ") + " - " + data.brief.album}>
+  <MenuItem onclick={() => console.log("clicked")}>Mewo</MenuItem>
+</AppBar>
 
 <LinearProgress percent={progress} />
 
+
 <input bind:this={hiddenInput} oncompositionend={() => inputChanged(inp, true)} bind:value={inp} class="absolute opacity-0 top-[-9999px] left-[-9999px]" />
 
 <!-- Stats -->