feat: made sidebar and top bar generic

r-Techsupport · Jun 22, 2024 · eea8790 · eea8790
1 parent 912eafa
commit eea8790
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 33 deletions.
diff --git a/...tend/src/routes/editor/nav/SideBar.svelte → frontend/src/routes/SideBar.svelte b/...tend/src/routes/editor/nav/SideBar.svelte → frontend/src/routes/SideBar.svelte
@@ -1,15 +1,6 @@
 <script lang="ts">
-	import { apiAddress } from '$lib/net';
-	import FileNavigation from './FileNavigation.svelte';
-	import { onMount } from 'svelte';
 	/** Binding to the css variable determining sidebar width */
 	export let sidebarWidth: string;
-
-	let rootNode = {
-		name: '',
-		children: []
-	};
-	$: rootNode;
 	// const MOCK_DIRECTORY = {
 	//     name: "Root",
 	//     children: [
@@ -43,19 +34,10 @@
 	//     ],
 	// }
 	let draggingWindow = false;
-
-	onMount(async () => {
-		const response = await fetch(`${apiAddress}/api/tree`);
-		rootNode = await response.json();
-	});
 </script>
 
 <div class="side-bar">
-	<!-- Because FileNavigation renders recursively, -->
-	<!-- any "outside" css needs to be done in a separate div -->
-	<div class="directory-nav">
-		<FileNavigation on:fileselect {...rootNode} />
-	</div>
+	<slot></slot>
 </div>
 
 <div
@@ -95,11 +77,4 @@
 		width: 0.5rem;
 		cursor: col-resize;
 	}
-
-	.directory-nav {
-		margin-top: 1rem;
-		margin-left: 0.25rem;
-		margin-right: calc(0.5rem - 3px);
-		overflow-x: hidden;
-	}
 </style>
diff --git a/frontend/src/routes/editor/nav/TopBar.svelte → frontend/src/routes/TopBar.svelte b/frontend/src/routes/editor/nav/TopBar.svelte → frontend/src/routes/TopBar.svelte
@@ -16,9 +16,6 @@
 
 <div class="top-bar">
 	<div class="account">
-		<!-- <span class="dot"></span> -->
-		<!-- <svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg> -->
-		<!-- <p><b>{username}</b></p> -->
 		<p>{username}</p>
 		<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem"
 			><path
@@ -29,7 +26,6 @@
 </div>
 
 <style>
-	/* @import '/css/theme.css'; */
 	.top-bar {
 		/* float: right; */
 		display: flex;

diff --git a/frontend/src/routes/editor/+page.svelte b/frontend/src/routes/editor/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import SideBar from './nav/SideBar.svelte';
-	import TopBar from './nav/TopBar.svelte';
+	import SideBar from '../SideBar.svelte';
+	import FileNavigation from './nav/FileNavigation.svelte';
+	import TopBar from '../TopBar.svelte';
 	import ChangeDialogue from './ChangeDialogue.svelte';
 	import { renderMarkdown } from '$lib/render';
 	import { cache } from '$lib/cache';
@@ -27,6 +28,17 @@
 	const DEBOUNCE_TIME: number = 500;
 	let lastKeyPressedTime = Date.now();
 
+	/** The base directory for filesystem navigation */
+	let rootNode = {
+		name: '',
+		children: []
+	};
+	$: rootNode;
+	onMount(async () => {
+		const response = await fetch(`${apiAddress}/api/tree`);
+		rootNode = await response.json();
+	});
+
 	/**
 	 * This function is called whenever a key is pressed.
 	 *
@@ -116,7 +128,11 @@
 
 <div style="--sidebar-width: {sidebarWidth}" class="container">
 	<Toasts />
-	<SideBar on:fileselect={fileSelectionHandler} bind:sidebarWidth />
+	<SideBar on:fileselect={fileSelectionHandler} bind:sidebarWidth>
+		<div class="directory-nav">
+			<FileNavigation on:fileselect {...rootNode} />
+		</div>
+	</SideBar>
 	<div style="display: flex; flex-direction: column; height: 100vh;">
 		<TopBar />
 		<div class="editor-controls">