From 41b7420ec650a2d41dc8b63b58e865a0691244bf Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Thu, 19 Sep 2024 21:39:07 -0400
Subject: [PATCH] make a user menu links component

---
 .../(pages)/dashboard/user/billing/page.tsx   | 42 +-----------
 .../(pages)/dashboard/user/profile/page.tsx   | 42 +-----------
 .../(pages)/dashboard/user/settings/page.tsx  | 42 +-----------
 src/app/provider/user-provider.tsx            |  1 -
 src/app/types/{ => dashboard}/sidebar-link.ts |  0
 src/app/types/dashboard/user-menu-link.ts     | 21 ++++++
 .../sidebar/{links.tsx => sidebar-links.tsx}  |  2 +-
 src/components/dashboard/sidebar/sidebar.tsx  |  4 +-
 .../sidebar/user-menu/user-menu-links.tsx     | 32 ++++++++++
 .../sidebar/{ => user-menu}/user-menu.tsx     | 40 ++++++------
 .../dashboard/user/user-settings-header.tsx   | 64 +++++++++++++++++++
 11 files changed, 147 insertions(+), 143 deletions(-)
 rename src/app/types/{ => dashboard}/sidebar-link.ts (100%)
 create mode 100644 src/app/types/dashboard/user-menu-link.ts
 rename src/components/dashboard/sidebar/{links.tsx => sidebar-links.tsx} (97%)
 create mode 100644 src/components/dashboard/sidebar/user-menu/user-menu-links.tsx
 rename src/components/dashboard/sidebar/{ => user-menu}/user-menu.tsx (77%)
 create mode 100644 src/components/dashboard/user/user-settings-header.tsx

diff --git a/src/app/(pages)/dashboard/user/billing/page.tsx b/src/app/(pages)/dashboard/user/billing/page.tsx
index 3079fef..368e77f 100644
--- a/src/app/(pages)/dashboard/user/billing/page.tsx
+++ b/src/app/(pages)/dashboard/user/billing/page.tsx
@@ -1,18 +1,8 @@
 "use client";
 
 import { ReactElement } from "react";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { User } from "@/app/types/user/user";
-import { useUserContext } from "@/app/provider/user-provider";
-import { UserState } from "@/app/store/user-store";
 import { Separator } from "@/components/ui/separator";
+import UserSettingsHeader from "@/components/dashboard/user/user-settings-header";
 
 /**
  * The user billing page.
@@ -21,7 +11,7 @@ import { Separator } from "@/components/ui/separator";
  */
 const UserBillingPage = (): ReactElement => (
     <main className="w-[47rem] p-10 flex flex-col gap-5">
-        <Header />
+        <UserSettingsHeader title="Billing" />
 
         {/* Content */}
         <div className="flex flex-col gap-5">
@@ -30,32 +20,4 @@ const UserBillingPage = (): ReactElement => (
         </div>
     </main>
 );
-
-const Header = (): ReactElement => {
-    const user: User | undefined = useUserContext(
-        (state: UserState) => state.user
-    );
-    return (
-        <div className="flex flex-col gap-1.5 select-none">
-            <h1 className="text-2xl font-bold">Billing</h1>
-
-            <Breadcrumb>
-                <BreadcrumbList>
-                    <BreadcrumbItem>
-                        <BreadcrumbLink href="/dashboard">
-                            Dashboard
-                        </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>{user?.username}</BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <BreadcrumbPage>Billing</BreadcrumbPage>
-                    </BreadcrumbItem>
-                </BreadcrumbList>
-            </Breadcrumb>
-        </div>
-    );
-};
-
 export default UserBillingPage;
diff --git a/src/app/(pages)/dashboard/user/profile/page.tsx b/src/app/(pages)/dashboard/user/profile/page.tsx
index 47758ff..a154b51 100644
--- a/src/app/(pages)/dashboard/user/profile/page.tsx
+++ b/src/app/(pages)/dashboard/user/profile/page.tsx
@@ -1,22 +1,12 @@
 "use client";
 
 import { ReactElement } from "react";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { User } from "@/app/types/user/user";
-import { useUserContext } from "@/app/provider/user-provider";
-import { UserState } from "@/app/store/user-store";
 import { Separator } from "@/components/ui/separator";
 import AvatarSetting from "@/components/dashboard/user/profile/avatar-setting";
 import UsernameSetting from "@/components/dashboard/user/profile/username-setting";
 import EmailSetting from "@/components/dashboard/user/profile/email-setting";
 import TierSetting from "@/components/dashboard/user/profile/tier-setting";
+import UserSettingsHeader from "@/components/dashboard/user/user-settings-header";
 
 /**
  * The user profile page.
@@ -25,7 +15,7 @@ import TierSetting from "@/components/dashboard/user/profile/tier-setting";
  */
 const UserProfilePage = (): ReactElement => (
     <main className="w-[47rem] p-10 flex flex-col gap-5">
-        <Header />
+        <UserSettingsHeader title="My Profile" />
 
         {/* Content */}
         <div className="flex flex-col gap-5">
@@ -40,32 +30,4 @@ const UserProfilePage = (): ReactElement => (
         </div>
     </main>
 );
-
-const Header = (): ReactElement => {
-    const user: User | undefined = useUserContext(
-        (state: UserState) => state.user
-    );
-    return (
-        <div className="flex flex-col gap-1.5 select-none">
-            <h1 className="text-2xl font-bold">My Profile</h1>
-
-            <Breadcrumb>
-                <BreadcrumbList>
-                    <BreadcrumbItem>
-                        <BreadcrumbLink href="/dashboard">
-                            Dashboard
-                        </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>{user?.username}</BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <BreadcrumbPage>My Profile</BreadcrumbPage>
-                    </BreadcrumbItem>
-                </BreadcrumbList>
-            </Breadcrumb>
-        </div>
-    );
-};
-
 export default UserProfilePage;
diff --git a/src/app/(pages)/dashboard/user/settings/page.tsx b/src/app/(pages)/dashboard/user/settings/page.tsx
index a30d346..c71435b 100644
--- a/src/app/(pages)/dashboard/user/settings/page.tsx
+++ b/src/app/(pages)/dashboard/user/settings/page.tsx
@@ -1,19 +1,9 @@
 "use client";
 
 import { ReactElement } from "react";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { User } from "@/app/types/user/user";
-import { useUserContext } from "@/app/provider/user-provider";
-import { UserState } from "@/app/store/user-store";
 import { Separator } from "@/components/ui/separator";
 import TFASetting from "@/components/dashboard/user/settings/tfa/tfa-setting";
+import UserSettingsHeader from "@/components/dashboard/user/user-settings-header";
 
 /**
  * The user settings page.
@@ -22,7 +12,7 @@ import TFASetting from "@/components/dashboard/user/settings/tfa/tfa-setting";
  */
 const UserSettingsPage = (): ReactElement => (
     <main className="w-[47rem] p-10 flex flex-col gap-5">
-        <Header />
+        <UserSettingsHeader title="Settings" />
 
         {/* Content */}
         <div className="flex flex-col gap-5">
@@ -31,32 +21,4 @@ const UserSettingsPage = (): ReactElement => (
         </div>
     </main>
 );
-
-const Header = (): ReactElement => {
-    const user: User | undefined = useUserContext(
-        (state: UserState) => state.user
-    );
-    return (
-        <div className="flex flex-col gap-1.5 select-none">
-            <h1 className="text-2xl font-bold">Settings</h1>
-
-            <Breadcrumb>
-                <BreadcrumbList>
-                    <BreadcrumbItem>
-                        <BreadcrumbLink href="/dashboard">
-                            Dashboard
-                        </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>{user?.username}</BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <BreadcrumbPage>Settings</BreadcrumbPage>
-                    </BreadcrumbItem>
-                </BreadcrumbList>
-            </Breadcrumb>
-        </div>
-    );
-};
-
 export default UserSettingsPage;
diff --git a/src/app/provider/user-provider.tsx b/src/app/provider/user-provider.tsx
index 01d927d..dc4e63c 100644
--- a/src/app/provider/user-provider.tsx
+++ b/src/app/provider/user-provider.tsx
@@ -23,7 +23,6 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
 import DashboardLoader from "@/components/dashboard/loader";
 import { hasFlag } from "@/lib/user";
 import { UserFlag } from "@/app/types/user/user-flag";
-import EmailVerificationScreen from "@/components/dashboard/user/email-verification-screen";
 
 /**
  * The provider that will provide user context to children.
diff --git a/src/app/types/sidebar-link.ts b/src/app/types/dashboard/sidebar-link.ts
similarity index 100%
rename from src/app/types/sidebar-link.ts
rename to src/app/types/dashboard/sidebar-link.ts
diff --git a/src/app/types/dashboard/user-menu-link.ts b/src/app/types/dashboard/user-menu-link.ts
new file mode 100644
index 0000000..16d51d6
--- /dev/null
+++ b/src/app/types/dashboard/user-menu-link.ts
@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+
+/**
+ * A link in the user menu on the dashboard.
+ */
+export type UserMenuLink = {
+    /**
+     * The name of this link.
+     */
+    name: string;
+
+    /**
+     * The icon for this link.
+     */
+    icon: ReactElement;
+
+    /**
+     * The href for this link.
+     */
+    href: string;
+};
diff --git a/src/components/dashboard/sidebar/links.tsx b/src/components/dashboard/sidebar/sidebar-links.tsx
similarity index 97%
rename from src/components/dashboard/sidebar/links.tsx
rename to src/components/dashboard/sidebar/sidebar-links.tsx
index ce64eb7..eccc23b 100644
--- a/src/components/dashboard/sidebar/links.tsx
+++ b/src/components/dashboard/sidebar/sidebar-links.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ReactElement } from "react";
-import { SidebarLink } from "@/app/types/sidebar-link";
+import { SidebarLink } from "@/app/types/dashboard/sidebar-link";
 import SimpleTooltip from "@/components/simple-tooltip";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
diff --git a/src/components/dashboard/sidebar/sidebar.tsx b/src/components/dashboard/sidebar/sidebar.tsx
index 816b720..7158cfc 100644
--- a/src/components/dashboard/sidebar/sidebar.tsx
+++ b/src/components/dashboard/sidebar/sidebar.tsx
@@ -5,13 +5,13 @@ import Branding from "@/components/branding";
 import { Separator } from "@/components/ui/separator";
 import Link from "next/link";
 import OrganizationSelector from "@/components/dashboard/sidebar/organization-selector";
-import Links from "@/components/dashboard/sidebar/links";
+import Links from "@/components/dashboard/sidebar/sidebar-links";
 import { User } from "@/app/types/user/user";
 import { useUserContext } from "@/app/provider/user-provider";
 import { UserState } from "@/app/store/user-store";
 import { hasFlag } from "@/lib/user";
 import { UserFlag } from "@/app/types/user/user-flag";
-import UserMenu from "@/components/dashboard/sidebar/user-menu";
+import UserMenu from "@/components/dashboard/sidebar/user-menu/user-menu";
 
 /**
  * The sidebar to display on the dashboard.
diff --git a/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx b/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx
new file mode 100644
index 0000000..e78baa0
--- /dev/null
+++ b/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx
@@ -0,0 +1,32 @@
+import { userMenuLinks } from "@/components/dashboard/sidebar/user-menu/user-menu";
+import Link from "next/link";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ReactElement } from "react";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { UserMenuLink } from "@/app/types/dashboard/user-menu-link";
+
+const UserMenuLinks = (): ReactElement => {
+    const path: string = usePathname();
+    return (
+        <>
+            {userMenuLinks.map((link: UserMenuLink, index: number) => {
+                const active = path.startsWith(link.href);
+                return (
+                    <Link key={index} href={link.href} draggable={false}>
+                        <DropdownMenuItem
+                            className={cn(
+                                "gap-2.5 cursor-pointer",
+                                active && "opacity-70"
+                            )}
+                        >
+                            <div className="relative w-5 h-5">{link.icon}</div>
+                            <span>{link.name}</span>
+                        </DropdownMenuItem>
+                    </Link>
+                );
+            })}
+        </>
+    );
+};
+export default UserMenuLinks;
diff --git a/src/components/dashboard/sidebar/user-menu.tsx b/src/components/dashboard/sidebar/user-menu/user-menu.tsx
similarity index 77%
rename from src/components/dashboard/sidebar/user-menu.tsx
rename to src/components/dashboard/sidebar/user-menu/user-menu.tsx
index 1e11937..109fe1b 100644
--- a/src/components/dashboard/sidebar/user-menu.tsx
+++ b/src/components/dashboard/sidebar/user-menu/user-menu.tsx
@@ -20,12 +20,31 @@ import {
     CreditCardIcon,
     UserIcon,
 } from "@heroicons/react/24/outline";
-import Link from "next/link";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
 import { Cookies, useCookies } from "next-client-cookies";
 import { Session } from "@/app/types/user/session";
 import { apiRequest } from "@/lib/api";
+import UserMenuLinks from "@/components/dashboard/sidebar/user-menu/user-menu-links";
+import { UserMenuLink } from "@/app/types/dashboard/user-menu-link";
+
+export const userMenuLinks: UserMenuLink[] = [
+    {
+        name: "Profile",
+        icon: <UserIcon />,
+        href: "/dashboard/user/profile",
+    },
+    {
+        name: "Billing",
+        icon: <CreditCardIcon />,
+        href: "/dashboard/user/billing",
+    },
+    {
+        name: "Settings",
+        icon: <Cog6ToothIcon />,
+        href: "/dashboard/user/settings",
+    },
+];
 
 /**
  * The menu to manage the user.
@@ -93,24 +112,7 @@ const MyAccount = (): ReactElement => (
             My Account
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <Link href="/dashboard/user/profile" draggable={false}>
-            <DropdownMenuItem className="gap-2.5 cursor-pointer">
-                <UserIcon className="w-5 h-5" />
-                <span>Profile</span>
-            </DropdownMenuItem>
-        </Link>
-        <Link href="/dashboard/user/billing" draggable={false}>
-            <DropdownMenuItem className="gap-2.5 cursor-pointer">
-                <CreditCardIcon className="w-5 h-5" />
-                <span>Billing</span>
-            </DropdownMenuItem>
-        </Link>
-        <Link href="/dashboard/user/settings" draggable={false}>
-            <DropdownMenuItem className="gap-2.5 cursor-pointer">
-                <Cog6ToothIcon className="w-5 h-5" />
-                <span>Settings</span>
-            </DropdownMenuItem>
-        </Link>
+        <UserMenuLinks />
     </DropdownMenuGroup>
 );
 
diff --git a/src/components/dashboard/user/user-settings-header.tsx b/src/components/dashboard/user/user-settings-header.tsx
new file mode 100644
index 0000000..6f2ed54
--- /dev/null
+++ b/src/components/dashboard/user/user-settings-header.tsx
@@ -0,0 +1,64 @@
+import { ReactElement } from "react";
+import { User } from "@/app/types/user/user";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import UserMenuLinks from "@/components/dashboard/sidebar/user-menu/user-menu-links";
+
+/**
+ * The header to display
+ * on user settings pages.
+ *
+ * @param title the title of this header
+ * @return the header jsx
+ */
+const UserSettingsHeader = ({ title }: { title: string }): ReactElement => {
+    const user: User | undefined = useUserContext(
+        (state: UserState) => state.user
+    );
+    return (
+        <div className="flex flex-col gap-1.5 select-none">
+            <h1 className="text-2xl font-bold">{title}</h1>
+
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/dashboard">
+                            Dashboard
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger className="flex gap-1.5 items-center">
+                                @{user?.username}
+                                <ChevronDownIcon className="w-3 h-3" />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start">
+                                <UserMenuLinks />
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbPage>{title}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+};
+export default UserSettingsHeader;