MaigoLabs/amaoke.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[F] Fix appbar

Browse Source
This commit is contained in:
Azalea Gui
2025-11-19 20:30:24 +08:00
parent e077e2d589
commit 15b6d64446
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IconButton.svelte
+5 -2
View File
@@ -1,7 +1,10 @@
<script lang="ts"> <script lang="ts">
import { Layer } from "m3-svelte";
let { icon, ...rest } = $props(); let { icon, ...rest } = $props();
</script> </script>
<button class="cbox size-48px" {...rest}> <button class="cbox size-48px relative rounded-8px" {...rest}>
<span class="size-24px {icon}"></span> <Layer/>
<span class="size-24px {icon}"></span>
</button> </button>
src/components/appbar/AppBar.svelte
+8 -6
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fly, slide } from "svelte/transition"; import { fly, slide, fade } from "svelte/transition";
import { Menu } from "m3-svelte"; import { Menu } from "m3-svelte";
import IconButton from "../IconButton.svelte"; import IconButton from "../IconButton.svelte";
@@ -42,9 +42,11 @@
</div> </div>
{#if children && showMenu} {#if children && showMenu}
<div class="absolute right-0 p-16px mt-[-16px]" transition:fly={{ duration: 200, y: -10 }}> <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-sm z-10" onclick={() => showMenu = false} transition:fade={{ duration: 200 }} aria-hidden="true">
<Menu> <div class="absolute right-0 top-48px p-16px mt-[-16px] z-11" transition:fly={{ duration: 200, y: -10 }}>
{@render children()} <Menu>
</Menu> {@render children()}
</div> </Menu>
</div>
</div>
{/if} {/if}