66 lines
1.4 KiB
Svelte
66 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
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();
|
|
|
|
let editing = $state(false)
|
|
|
|
const toggle_edit = () => {
|
|
editing = !editing
|
|
}
|
|
</script>
|
|
|
|
{#if $bookmarks_store.length !== 0}
|
|
<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}
|
|
|
|
{#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 {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.row>a {
|
|
flex: 1 1 auto;
|
|
}
|
|
.row>button {
|
|
flex: 0 0 auto;
|
|
}
|
|
.button {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
.hide {
|
|
display: none;
|
|
}
|
|
</style>
|