Move search bar into modal

svelte/src/filesystem/Breadcrumbs.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { path_link, type FSNavigator } from "./FSNavigator";
-import { menu_is_open } from "wrap/MainMenu.svelte";
 import FileMenu from "./filemanager/FileMenu.svelte";
 import EditWindow from "./edit_window/EditWindow.svelte";
+import { onMount } from "svelte";
+import { breadcrumbs_store } from "wrap/BreadcrumbStore";
 
 let {
 	nav,
@@ -14,9 +15,15 @@ let {
 } = $props();
 
 let file_menu: FileMenu = $state()
+
+onMount(() => {
+	return nav.subscribe(nav => {
+		breadcrumbs_store.set(breadcrumbs)
+	})
+})
 </script>
 
-<div class="breadcrumbs" class:menu_closed={!$menu_is_open}>
+{#snippet breadcrumbs()}
 	{#each $nav.path as node, i (node.path)}
 		<a
 			href={"/d"+fs_encode_path(node.path)}
@@ -37,23 +44,11 @@ let file_menu: FileMenu = $state()
 			<i class="icon">chevron_right</i>
 		{/if}
 	{/each}
-</div>
 
-<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
+	<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
+{/snippet}
 
 <style>
-.breadcrumbs {
-	flex: 0 0 auto;
-	display: flex;
-	align-items: center;
-	justify-content: left;
-	flex-wrap: wrap;
-	flex-direction: row;
-	overflow: hidden;
-	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
-	border-bottom: 1px solid var(--separator);
-}
 .breadcrumb {
 	min-width: 1em;
 	text-align: center;
@@ -73,7 +68,4 @@ let file_menu: FileMenu = $state()
 	/* The base name uses all available space */
 	max-width: unset;
 }
-.menu_closed {
-	padding-left: 2em;
-}
 </style>