diff --git a/src/lib/components/NavigationDock.svelte b/src/lib/components/NavigationDock.svelte
new file mode 100644
index 0000000..c5a114d
--- /dev/null
+++ b/src/lib/components/NavigationDock.svelte
@@ -0,0 +1,80 @@
+
+
+
+
+ {#if $page.url.pathname !== '/'}
+
+
+
+
+
+ {/if}
+
+
+ {#if $page.url.pathname === '/'}
+
+
+ {/if}
+
+
+
+
+
+
+
+
diff --git a/src/lib/components/dock/Dock.svelte b/src/lib/components/dock/Dock.svelte
index 511b783..3792614 100644
--- a/src/lib/components/dock/Dock.svelte
+++ b/src/lib/components/dock/Dock.svelte
@@ -1,55 +1,46 @@
-
+
handleMouseMove(e)}
- on:mouseleave={handleMouseLeave}
+ onmousemove={(e) => handleMouseMove(e)}
+ onmouseleave={handleMouseLeave}
class={dockClass}
>
-
-
- Default
-
+ {@render children()}
diff --git a/src/lib/components/dock/DockItem.svelte b/src/lib/components/dock/DockItem.svelte
index 76c7973..6f70906 100644
--- a/src/lib/components/dock/DockItem.svelte
+++ b/src/lib/components/dock/DockItem.svelte
@@ -6,15 +6,16 @@
useSpring,
useTransform,
} from 'svelte-motion';
+ import { dockContext } from './context.svelte';
+ import type { Snippet } from 'svelte';
- export let magnification = 60;
- export let distance = 160;
- export let mouseX = 0;
- let mint = useMotionValue(mouseX);
- $: mint.set(mouseX);
+ let {
+ class: className = undefined,
+ children,
+ }: { class: string | undefined; children: Snippet } = $props();
- let className: string | undefined = '';
- export { className as class };
+ let mint = useMotionValue(dockContext.mouseX);
+ $effect(() => mint.set(dockContext.mouseX));
let iconElement: HTMLDivElement;
@@ -25,8 +26,8 @@
let widthSync = useTransform(
distanceCalc,
- [-distance, 0, distance],
- [38, magnification, 38],
+ [-dockContext.distance, 0, dockContext.distance],
+ [38, dockContext.magnification, 38],
);
let width = useSpring(widthSync, {
@@ -43,6 +44,6 @@
-
+ {@render children()}
diff --git a/src/lib/components/dock/DockTooltipItem.svelte b/src/lib/components/dock/DockTooltipItem.svelte
index 0b5f5a6..d2b22ef 100644
--- a/src/lib/components/dock/DockTooltipItem.svelte
+++ b/src/lib/components/dock/DockTooltipItem.svelte
@@ -11,13 +11,9 @@
const onClick = () => {
if (item.onClick) item.onClick();
};
-
- export let mouseX: number;
- export let distance: number | undefined;
- export let magnification: number | undefined;
-
+
{#if item.href}
{
- openModalsState.addFlight = true;
- },
- },
- {
- label: 'List flights',
- icon: LayoutList,
- onClick: () => {
- openModalsState.listFlights = true;
- },
- },
- {
- label: 'Statistics',
- icon: ChartColumn,
- onClick: () => {
- openModalsState.statistics = true;
- },
- },
- ];
- const SECONDARY = [
- {
- label: 'Settings',
- icon: Settings,
- onClick: () => {
- openModalsState.settings = true;
- },
- },
- ];
- const OTHER = [
- {
- label: 'Visited countries',
- href: '/visited-countries',
- },
- ];
@@ -92,29 +38,7 @@
{@render children()}
- {#if !['/login', '/setup'].includes($page.url.pathname)}
-
-
- {#if $page.url.pathname !== '/'}
-
-
-
-
-
- {/if}
-
- {#each PRIMARY as item}
-
- {/each}
-
-
-
-
- {#each SECONDARY as item}
-
- {/each}
-
-
-
+ {#if !$page.error && !['/login', '/setup'].includes($page.url.pathname)}
+
{/if}