From 37d54f3873b9d667963a2e06fe102bf1b74ada58 Mon Sep 17 00:00:00 2001
From: Vargha Csongor <Culisa1023@gmail.com>
Date: Wed, 30 Apr 2025 11:29:28 +0200
Subject: [PATCH] remove sidebar

---
 apps/app/src/lib/sidebar/hamburgerIcon.svelte |  65 ++++++-----
 apps/app/src/routes/+page.svelte              | 102 ++++++++----------
 2 files changed, 84 insertions(+), 83 deletions(-)

diff --git a/apps/app/src/lib/sidebar/hamburgerIcon.svelte b/apps/app/src/lib/sidebar/hamburgerIcon.svelte
index f11e9fe..ccfe036 100644
--- a/apps/app/src/lib/sidebar/hamburgerIcon.svelte
+++ b/apps/app/src/lib/sidebar/hamburgerIcon.svelte
@@ -1,32 +1,45 @@
 <script lang="ts">
-	export let show = false;
-	export let clicked = false;
+	import { managed_profiles } from "$lib/paraglide/messages";
+	let clicked = $state(false);
 </script>
 
-{#if show}
-	<label for="my-drawer" class={"drawer-button btn btn-circle swap swap-rotate" + (clicked?" swap-active":"")}>
-		<!-- hamburger icon -->
-		<svg
-			class="swap-off fill-current"
-			xmlns="http://www.w3.org/2000/svg"
-			width="32"
-			height="32"
-			viewBox="0 0 512 512"
+	<div class="dropdown">
+		<button
+			tabindex="0"
+			class={'btn btn-circle swap swap-rotate' + (clicked ? ' swap-active' : '')}
+			onclick={() => (clicked = !clicked)}
 		>
-			<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-		</svg>
+			<input type="checkbox" />
+			<!-- hamburger icon -->
+			<svg
+				class="swap-off fill-current"
+				xmlns="http://www.w3.org/2000/svg"
+				width="32"
+				height="32"
+				viewBox="0 0 512 512"
+			>
+				<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+			</svg>
 
-		<!-- close icon -->
-		<svg
-			class="swap-on fill-current"
-			xmlns="http://www.w3.org/2000/svg"
-			width="32"
-			height="32"
-			viewBox="0 0 512 512"
+			<!-- close icon -->
+			<svg
+				class="swap-on fill-current"
+				xmlns="http://www.w3.org/2000/svg"
+				width="32"
+				height="32"
+				viewBox="0 0 512 512"
+			>
+				<polygon
+					points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
+				/>
+			</svg>
+		</button>
+		<ul
+			class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
 		>
-			<polygon
-				points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
-			/>
-		</svg>
-	</label>
-{/if}
+			<li>
+				<button tabindex="0" class="btn btn-primary" aria-label="close sidebar">{managed_profiles()}</button>
+			</li>
+		</ul>
+	</div>
+
diff --git a/apps/app/src/routes/+page.svelte b/apps/app/src/routes/+page.svelte
index 3ab14b5..26dbf58 100644
--- a/apps/app/src/routes/+page.svelte
+++ b/apps/app/src/routes/+page.svelte
@@ -24,7 +24,6 @@
 	import { FamilyTree } from '$lib/graph/layout';
 	import { tailwindClassToPixels } from '$lib/tailwindSizeToPx';
 	import type { Layout } from '$lib/graph/model';
-	import SideBar from '$lib/sidebar/sideBar.svelte';
 	import HamburgerIcon from '$lib/sidebar/hamburgerIcon.svelte';
 
 	let { data }: { data: Layout & { id: string } } = $props();
@@ -45,8 +44,6 @@
 		'TB'
 	);
 	console.log('layout', layout);
-	console.log('dagEdges',familyTreeDAG.edges());
-	console.log('dagNodes',familyTreeDAG.nodes());
 	let nodes = $state.raw<Node[]>(layout.Nodes);
 	let edges = $state.raw<Edge[]>(layout.Edges);
 
@@ -135,7 +132,6 @@
 			tailwindClassToPixels('h-40') || 160,
 			'TB'
 		);
-		console.log('newLayout', newLayout);
 		edges = newLayout.Edges;
 		nodes = newLayout.Nodes;
 	};
@@ -184,64 +180,56 @@
 		if (sourceNodeId === undefined) return;
 		relationshipStart = Number(sourceNodeId);
 		createPerson = true;
-		console.log('createPerson', createPerson);
-		console.log('relationshipStart', relationshipStart);
 	};
-	let sideBarOpen = $state(false);
 </script>
 
 <svelte:head>
 	<title>{title({ page: family_tree() })}</title>
 </svelte:head>
-<div class="drawer">
-	<!-- this hidden checkbox controls the state -->
-	<input id="my-drawer" type="checkbox" class="drawer-toggle" onchange={()=>{sideBarOpen = !sideBarOpen}}/>
-	<div style="height:100vh;" class="!bg-base-200 drawer-content flex flex-col">
-		<SvelteFlowProvider>
-			<SvelteFlow
-				bind:nodes
-				bind:edges
-				onconnectend={handleConnectEnd}
-				onnodeclick={handleNodeClickFunc}
-				onnodecontextmenu={handleContextMenu}
-				onpaneclick={handlePaneClick}
-				class="!bg-base-200"
-				{nodeTypes}
-				{edgeTypes}
-				fitView
-				onlyRenderVisibleElements
-				connectionLineType={ConnectionLineType.SmoothStep}
-			>
-				<MiniMap class="!bg-base-300" />
-				<Controls class="!bg-base-300" />
-				{#if openPersonPanel}
-					<PersonModal
-						person={selectedPerson}
-						closeModal={() => {
-							openPersonPanel = false;
-						}}
-					/>
-				{/if}
-				{#if createPerson}
-					<CreatePerson
-						onOnlyPersonCreation={() => {
-							createPerson = false;
-						}}
-						{onCreation}
-						closeModal={() => {
-							createPerson = false;
-						}}
-						relationshipStartID={relationshipStart}
-					></CreatePerson>
-				{/if}
-				{#if openPersonMenu !== undefined}
-					<PersonMenu {...openPersonMenu!} />
-				{/if}
-			</SvelteFlow>
-		</SvelteFlowProvider>
-	</div>
-	<SideBar />
+<div style="height:100vh;" class="!bg-base-200 drawer-content flex flex-col">
+	<SvelteFlowProvider>
+		<SvelteFlow
+			bind:nodes={nodes}
+			bind:edges={edges}
+			onconnectend={handleConnectEnd}
+			onnodeclick={handleNodeClickFunc}
+			onnodecontextmenu={handleContextMenu}
+			onpaneclick={handlePaneClick}
+			class="!bg-base-200"
+			{nodeTypes}
+			{edgeTypes}
+			fitView
+			onlyRenderVisibleElements={false}
+		>
+			<MiniMap class="!bg-base-300" />
+			<Controls class="!bg-base-300" />
+			{#if openPersonPanel}
+				<PersonModal
+					person={selectedPerson}
+					closeModal={() => {
+						openPersonPanel = false;
+					}}
+				/>
+			{/if}
+			{#if createPerson}
+				<CreatePerson
+					onOnlyPersonCreation={() => {
+						createPerson = false;
+					}}
+					{onCreation}
+					closeModal={() => {
+						createPerson = false;
+					}}
+					relationshipStartID={relationshipStart}
+				></CreatePerson>
+			{/if}
+			{#if openPersonMenu !== undefined}
+				<PersonMenu {...openPersonMenu!} />
+			{/if}
+		</SvelteFlow>
+	</SvelteFlowProvider>
 </div>
+
 <div class="absolute top-2 left-2 flex flex-row items-center gap-2">
-	<HamburgerIcon clicked={sideBarOpen} show={true} />
-</div>
\ No newline at end of file
+	<HamburgerIcon />
+</div>