vcscsvcscs/GenerationsHeritage
1
0
Fork 0
mirror of https://github.com/vcscsvcscs/GenerationsHeritage.git synced 2025-08-12 13:59:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

remove sidebar

Browse Source
This commit is contained in:
Vargha Csongor
2025-04-30 11:29:28 +02:00
parent 9814c76643
commit 37d54f3873
2 changed files with 84 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/app/src/lib/sidebar/hamburgerIcon.svelte
View File

@@ -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>

102
apps/app/src/routes/+page.svelte
View File

@@ -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>
<HamburgerIcon />
</div>