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 => (
-
+
{/* Content */}
@@ -30,32 +20,4 @@ const UserBillingPage = (): ReactElement => (
);
-
-const Header = (): ReactElement => {
- const user: User | undefined = useUserContext(
- (state: UserState) => state.user
- );
- return (
-
-
Billing
-
-
-
-
-
- Dashboard
-
-
-
- {user?.username}
-
-
- Billing
-
-
-
-
- );
-};
-
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 => (
-
+
{/* Content */}
@@ -40,32 +30,4 @@ const UserProfilePage = (): ReactElement => (
);
-
-const Header = (): ReactElement => {
- const user: User | undefined = useUserContext(
- (state: UserState) => state.user
- );
- return (
-
-
My Profile
-
-
-
-
-
- Dashboard
-
-
-
- {user?.username}
-
-
- My Profile
-
-
-
-
- );
-};
-
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 => (
-
+
{/* Content */}
@@ -31,32 +21,4 @@ const UserSettingsPage = (): ReactElement => (
);
-
-const Header = (): ReactElement => {
- const user: User | undefined = useUserContext(
- (state: UserState) => state.user
- );
- return (
-
-
Settings
-
-
-
-
-
- Dashboard
-
-
-
- {user?.username}
-
-
- Settings
-
-
-
-
- );
-};
-
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.icon}
+ {link.name}
+
+
+ );
+ })}
+ >
+ );
+};
+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: ,
+ href: "/dashboard/user/profile",
+ },
+ {
+ name: "Billing",
+ icon: ,
+ href: "/dashboard/user/billing",
+ },
+ {
+ name: "Settings",
+ icon: ,
+ href: "/dashboard/user/settings",
+ },
+];
/**
* The menu to manage the user.
@@ -93,24 +112,7 @@ const MyAccount = (): ReactElement => (
My Account
-
-
-
- Profile
-
-
-
-
-
- Billing
-
-
-
-
-
- Settings
-
-
+
);
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 (
+
+
{title}
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+
+ @{user?.username}
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+};
+export default UserSettingsHeader;