From 3fe71af326c7112f6501b902cb41054cfee3fc5c Mon Sep 17 00:00:00 2001
From: Felix Schlegel <felix.schlegel@gmx.de>
Date: Mon, 18 Nov 2024 15:03:28 +0100
Subject: [PATCH] refactor: move drop down menu to separate component

This makes the navigation bar component less clustered
---
 .../navigation-bar/NavigationBar.svelte       | 80 +----------------
 .../composites/navigation-bar/UserMenu.svelte | 89 +++++++++++++++++++
 2 files changed, 92 insertions(+), 77 deletions(-)
 create mode 100644 src/lib/components/composites/navigation-bar/UserMenu.svelte

diff --git a/src/lib/components/composites/navigation-bar/NavigationBar.svelte b/src/lib/components/composites/navigation-bar/NavigationBar.svelte
index a2b10db6..c7ace067 100644
--- a/src/lib/components/composites/navigation-bar/NavigationBar.svelte
+++ b/src/lib/components/composites/navigation-bar/NavigationBar.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
     import ArrowLeft from "lucide-svelte/icons/arrow-left";
-    import * as Avatar from "$lib/components/primitives/avatar/index.js";
     import * as Card from "$lib/components/primitives/card/index.js";
     import * as Tabs from "$lib/components/primitives/tabs/index.js";
-    import * as DropdownMenu from "$lib/components/primitives/dropdown-menu/index.js";
-    import BookOpen from "lucide-svelte/icons/book-open";
-    import Archive from "lucide-svelte/icons/archive";
-    import Inbox from "lucide-svelte/icons/inbox";
-    import Settings from "lucide-svelte/icons/settings";
-    import LogOut from "lucide-svelte/icons/log-out";
-    import type { ComponentType, Snippet } from "svelte";
-    import type { Icon } from "lucide-svelte";
+    import type { Snippet } from "svelte";
+    import UserMenu from "./UserMenu.svelte";
 
     interface Props {
         user: {
@@ -34,80 +27,13 @@
         defaultTabValue,
         children = undefined,
     }: Props = $props();
-    const getInitial = (text: string) => (text.length > 0 ? text[0].toUpperCase() : "");
-    const userInitials = `${getInitial(user.firstName)}${getInitial(user.lastName)}`;
-    const menuItems: {
-        // The icon library still uses the deprecated ComponentType type
-        icon: ComponentType<Icon>;
-        label: string;
-        shortcut: string;
-        href: string;
-    }[] = [
-        {
-            icon: BookOpen,
-            label: "Reading List",
-            shortcut: "⌘⇧R",
-            href: "/readinglist",
-        },
-        {
-            icon: Archive,
-            label: "Archived Projects",
-            shortcut: "⌘⇧A",
-            href: "/archivedprojects",
-        },
-        {
-            icon: Inbox,
-            label: "Invitations",
-            shortcut: "⌘⇧I",
-            href: "/invitations",
-        },
-        {
-            icon: Settings,
-            label: "Settings",
-            shortcut: "⌘⇧S",
-            href: "/settings/account",
-        },
-    ];
 </script>
 
 <header>
     <Card.Root class="shadow-lg w-fit">
         <nav>
             <Card.Content class="grid grid-flow-col gap-[0.625rem] items-center px-4 py-3">
-                <DropdownMenu.Root>
-                    <DropdownMenu.Trigger>
-                        <Avatar.Root>
-                            <Avatar.Fallback>{userInitials}</Avatar.Fallback>
-                        </Avatar.Root>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content class="w-56">
-                        <DropdownMenu.Group>
-                            <DropdownMenu.GroupHeading>
-                                {`${user.firstName} ${user.lastName}`}
-                            </DropdownMenu.GroupHeading>
-                            <DropdownMenu.Separator />
-                            <DropdownMenu.Group>
-                                {#each menuItems as item}
-                                    <a href={item.href}>
-                                        <DropdownMenu.Item>
-                                            <item.icon class="mr-2 size-4" />
-                                            <span>{item.label}</span>
-                                            <DropdownMenu.Shortcut>
-                                                {item.shortcut}
-                                            </DropdownMenu.Shortcut>
-                                        </DropdownMenu.Item>
-                                    </a>
-                                {/each}
-                            </DropdownMenu.Group>
-                            <DropdownMenu.Separator />
-                            <DropdownMenu.Item>
-                                <LogOut class="mr-2 size-4" />
-                                <span>Sign out</span>
-                                <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
-                            </DropdownMenu.Item>
-                        </DropdownMenu.Group>
-                    </DropdownMenu.Content>
-                </DropdownMenu.Root>
+                <UserMenu {user} />
                 {#if backRef !== undefined}
                     <a href={backRef}><ArrowLeft class="w-6 h-6" /></a>
                 {/if}
diff --git a/src/lib/components/composites/navigation-bar/UserMenu.svelte b/src/lib/components/composites/navigation-bar/UserMenu.svelte
new file mode 100644
index 00000000..4a8d418f
--- /dev/null
+++ b/src/lib/components/composites/navigation-bar/UserMenu.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import * as Avatar from "$lib/components/primitives/avatar/index.js";
+    import * as DropdownMenu from "$lib/components/primitives/dropdown-menu/index.js";
+    import BookOpen from "lucide-svelte/icons/book-open";
+    import Archive from "lucide-svelte/icons/archive";
+    import Inbox from "lucide-svelte/icons/inbox";
+    import Settings from "lucide-svelte/icons/settings";
+    import LogOut from "lucide-svelte/icons/log-out";
+    import type { ComponentType } from "svelte";
+    import type { Icon } from "lucide-svelte";
+
+    interface Props {
+        user: {
+            firstName: string;
+            lastName: string;
+        };
+    }
+    const { user }: Props = $props();
+
+    const getInitial = (text: string) => (text.length > 0 ? text[0].toUpperCase() : "");
+    const userInitials = `${getInitial(user.firstName)}${getInitial(user.lastName)}`;
+    const menuItems: {
+        // The icon library still uses the deprecated ComponentType type
+        icon: ComponentType<Icon>;
+        label: string;
+        shortcut: string;
+        href: string;
+    }[] = [
+        {
+            icon: BookOpen,
+            label: "Reading List",
+            shortcut: "⌘⇧R",
+            href: "/readinglist",
+        },
+        {
+            icon: Archive,
+            label: "Archived Projects",
+            shortcut: "⌘⇧A",
+            href: "/archivedprojects",
+        },
+        {
+            icon: Inbox,
+            label: "Invitations",
+            shortcut: "⌘⇧I",
+            href: "/invitations",
+        },
+        {
+            icon: Settings,
+            label: "Settings",
+            shortcut: "⌘⇧S",
+            href: "/settings/account",
+        },
+    ];
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        <Avatar.Root>
+            <Avatar.Fallback>{userInitials}</Avatar.Fallback>
+        </Avatar.Root>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content class="w-56">
+        <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>
+                {`${user.firstName} ${user.lastName}`}
+            </DropdownMenu.GroupHeading>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Group>
+                {#each menuItems as item}
+                    <a href={item.href}>
+                        <DropdownMenu.Item>
+                            <item.icon class="mr-2 size-4" />
+                            <span>{item.label}</span>
+                            <DropdownMenu.Shortcut>
+                                {item.shortcut}
+                            </DropdownMenu.Shortcut>
+                        </DropdownMenu.Item>
+                    </a>
+                {/each}
+            </DropdownMenu.Group>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item>
+                <LogOut class="mr-2 size-4" />
+                <span>Sign out</span>
+                <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+        </DropdownMenu.Group>
+    </DropdownMenu.Content>
+</DropdownMenu.Root>