pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create comonent for collapsing menu entries

Browse Source
This commit is contained in:
Wim Brand
2026-02-12 19:42:23 +01:00
parent 6a19b5bc18
commit ec1c8b0f5b
7 changed files with 192 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
svelte/src/wrap/Bookmarks.svelte
View File

@@ -2,6 +2,7 @@
import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import MenuEntry from "./MenuEntry.svelte";
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
@@ -13,44 +14,37 @@ const toggle_edit = () => {
</script>
{#if $bookmarks_store.length !== 0}
<div class="title">
<div class:hide={menu_collapsed}>Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon small">edit</i>
</button>
</div>
<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
{#snippet title()}
<div class="title">Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i>
</button>
{/snippet}
{#each $bookmarks_store as bookmark}
<div class="row">
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
<i class="icon small">{bookmark.icon}</i>
<span class:hide={menu_collapsed}>{bookmark.label}</span>
</a>
{#if editing}
<button onclick={() => bookmark_del(bookmark.id)}>
<i class="icon small">delete</i>
</button>
{/if}
</div>
{/each}
<div class="title"></div>
{#snippet body()}
{#each $bookmarks_store as bookmark}
<div class="row">
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
<i class="icon">{bookmark.icon}</i>
<span class:hide={menu_collapsed}>{bookmark.label}</span>
</a>
{#if editing}
<button onclick={() => bookmark_del(bookmark.id)}>
<i class="icon">delete</i>
</button>
{/if}
</div>
{/each}
{/snippet}
</MenuEntry>
{/if}
<style>
.title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title > div {
flex: 1 1 auto;
text-align: center;
}
.title > button {
flex: 0 0 auto;
}
.row {
display: flex;
flex-direction: row;