Make toolbar and main menu collapsible

svelte/src/wrap/Bookmarks.svelte

@@ -3,6 +3,8 @@ import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 
+let { menu_collapsed }: { menu_collapsed: boolean } = $props();
+
 let editing = $state(false)
 
 const toggle_edit = () => {
@@ -10,18 +12,20 @@ const toggle_edit = () => {
 }
 </script>
 
-<div class="title">
-	<div class="hide_small">Bookmarks</div>
-	<button onclick={() => toggle_edit()} class:button_highlight={editing}>
-		<i class="icon">edit</i>
-	</button>
-</div>
+{#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">edit</i>
+		</button>
+	</div>
+{/if}
 
 {#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>
+			<span class:hide={menu_collapsed}>{bookmark.label}</span>
 		</a>
 		{#if editing}
 			<button onclick={() => bookmark_del(bookmark.id)}>
@@ -59,9 +63,7 @@ const toggle_edit = () => {
 	background: none;
 	box-shadow: none;
 }
-@media(max-width: 1000px) {
-	.hide_small {
-		display: none;
-	}
+.hide {
+	display: none;
 }
 </style>