fnx_web/svelte/src/wrap/Bookmarks.svelte

<script lang="ts">
import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI";
import { highlight_current_page } from "lib/HighlightCurrentPage";
</script>

{#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_small">{bookmark.label}</span>
		</a>
		<button onclick={() => bookmark_del(bookmark.id)}>
			<i class="icon">delete</i>
		</button>
	</div>
{/each}

<style>
.row {
	display: flex;
	flex-direction: row;
}
.row>a {
	flex: 1 1 auto;
}
.row>button {
	flex: 0 0 auto;
}
.button {
	background: none;
	box-shadow: none;
}
@media(max-width: 1000px) {
	.hide_small {
		display: none;
	}
}
</style>