- {getIcon(item.icon)}
+ {getAccountMenuOptionIcon(item.icon)}
{item.text}
@@ -165,7 +122,7 @@ export function ProfilePopoutMenu({
tabIndex={0}
>
- {getIcon(item.icon)}
+ {getAccountMenuOptionIcon(item.icon)}
{item.text}
diff --git a/autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenuLogoutButton.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/AccountLogoutOption.tsx
similarity index 90%
rename from autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenuLogoutButton.tsx
rename to autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/AccountLogoutOption.tsx
index fa4c8f955a..dc2c166797 100644
--- a/autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenuLogoutButton.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/AccountLogoutOption.tsx
@@ -1,14 +1,14 @@
"use client";
import { IconLogOut } from "@/components/ui/icons";
+import { LoadingSpinner } from "@/components/ui/loading";
import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
import { cn } from "@/lib/utils";
import * as Sentry from "@sentry/nextjs";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
-import { LoadingSpinner } from "../ui/loading";
-import { toast } from "../molecules/Toast/use-toast";
+import { toast } from "@/components/molecules/Toast/use-toast";
-export function ProfilePopoutMenuLogoutButton() {
+export function AccountLogoutOption() {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const supabase = useSupabase();
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/LoginButton.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/LoginButton.tsx
new file mode 100644
index 0000000000..d060fcf4ad
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/LoginButton.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { SignInIcon } from "@phosphor-icons/react/dist/ssr";
+import { usePathname, useRouter } from "next/navigation";
+
+export function LoginButton() {
+ const router = useRouter();
+ const pathname = usePathname();
+ const isLoginPage = pathname.includes("/login");
+
+ if (isLoginPage) return null;
+
+ function handleLogin() {
+ router.push("/login");
+ }
+
+ return (
+ (
@@ -49,76 +30,15 @@ const Overlay = React.forwardRef(
),
);
+
Overlay.displayName = "Overlay";
-const PopoutMenuItem: React.FC<{
- icon: IconType;
- isActive: boolean;
- text: React.ReactNode;
- href?: string;
- onClick?: () => void;
-}> = ({ icon, isActive, text, href, onClick }) => {
- const getIcon = (iconType: IconType) => {
- const iconClass = "w-6 h-6 relative";
- switch (iconType) {
- case IconType.Marketplace:
- return
;
- case IconType.Library:
- return
;
- case IconType.Builder:
- return
;
- case IconType.Edit:
- return
;
- case IconType.LayoutDashboard:
- return
;
- case IconType.UploadCloud:
- return
;
- case IconType.Settings:
- return
;
- case IconType.LogOut:
- return
;
- default:
- return null;
- }
- };
-
- const content = (
-
- {getIcon(icon)}
-
-
- {text}
-
- {isActive && (
-
- )}
-
-
- );
-
- if (onClick)
- return (
-
- {content}
-
- );
- if (href)
- return (
-
- {content}
-
- );
- return content;
-};
-
-export const MobileNavBar: React.FC
= ({
+export function MobileNavBar({
userName,
userEmail,
avatarSrc,
menuItemGroups,
-}) => {
+}: MobileNavBarProps) {
const [isOpen, setIsOpen] = React.useState(false);
const pathname = usePathname();
const parts = pathname.split("/");
@@ -173,7 +93,7 @@ export const MobileNavBar: React.FC = ({
{menuItemGroups.map((group, groupIndex) => (
{group.items.map((item, itemIndex) => (
- = ({
);
-};
+}
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/MobileNavbar/components/MobileNavbarMenuItem.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/MobileNavbar/components/MobileNavbarMenuItem.tsx
new file mode 100644
index 0000000000..e4955946a3
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/MobileNavbar/components/MobileNavbarMenuItem.tsx
@@ -0,0 +1,55 @@
+import { IconType } from "@/components/ui/icons";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { getAccountMenuOptionIcon } from "../../../helpers";
+
+interface Props {
+ icon: IconType;
+ isActive: boolean;
+ text: string;
+ href?: string;
+ onClick?: () => void;
+}
+
+export function MobileNavbarMenuItem({
+ icon,
+ isActive,
+ text,
+ href,
+ onClick,
+}: Props) {
+ const content = (
+
+ {getAccountMenuOptionIcon(icon)}
+
+
+ {text}
+
+ {isActive && (
+
+ )}
+
+
+ {content}
+
+ );
+ if (href)
+ return (
+
+ {href === "/marketplace" && (
+
+ {name}
+
+
+
+ );
+}
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarLoading.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarLoading.tsx
new file mode 100644
index 0000000000..6aa6252b77
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarLoading.tsx
@@ -0,0 +1,21 @@
+import { IconAutoGPTLogo } from "@/components/ui/icons";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function NavbarLoading() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/data.ts b/autogpt_platform/frontend/src/components/layout/Navbar/data.ts
new file mode 100644
index 0000000000..f7f79737dc
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/data.ts
@@ -0,0 +1,29 @@
+import { getV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
+import { getServerUser } from "@/lib/supabase/server/getServerUser";
+
+export async function getNavbarAccountData() {
+ const { user } = await getServerUser();
+ const isLoggedIn = Boolean(user);
+
+ if (!isLoggedIn) {
+ return {
+ profile: null,
+ isLoggedIn,
+ };
+ }
+
+ let profile = null;
+
+ try {
+ const profileResponse = await getV2GetUserProfile();
+ profile = profileResponse.data || null;
+ } catch (error) {
+ console.error("Error fetching profile:", error);
+ profile = null;
+ }
+
+ return {
+ profile,
+ isLoggedIn,
+ };
+}
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/helpers.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/helpers.tsx
new file mode 100644
index 0000000000..d2ef1bc241
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/helpers.tsx
@@ -0,0 +1,115 @@
+import {
+ IconBuilder,
+ IconEdit,
+ IconLayoutDashboard,
+ IconLibrary,
+ IconLogOut,
+ IconMarketplace,
+ IconRefresh,
+ IconSettings,
+ IconType,
+ IconUploadCloud,
+} from "@/components/ui/icons";
+
+type Link = {
+ name: string;
+ href: string;
+};
+
+export const loggedInLinks: Link[] = [
+ {
+ name: "Marketplace",
+ href: "/marketplace",
+ },
+ {
+ name: "Library",
+ href: "/library",
+ },
+ {
+ name: "Build",
+ href: "/build",
+ },
+];
+
+export const loggedOutLinks: Link[] = [
+ {
+ name: "Marketplace",
+ href: "/marketplace",
+ },
+];
+
+export type MenuItemGroup = {
+ groupName?: string;
+ items: {
+ icon: IconType;
+ text: string;
+ href?: string;
+ onClick?: () => void;
+ }[];
+};
+
+export const accountMenuItems: MenuItemGroup[] = [
+ {
+ items: [
+ {
+ icon: IconType.Edit,
+ text: "Edit profile",
+ href: "/profile",
+ },
+ ],
+ },
+ {
+ items: [
+ {
+ icon: IconType.LayoutDashboard,
+ text: "Creator Dashboard",
+ href: "/profile/dashboard",
+ },
+ {
+ icon: IconType.UploadCloud,
+ text: "Publish an agent",
+ },
+ ],
+ },
+ {
+ items: [
+ {
+ icon: IconType.Settings,
+ text: "Settings",
+ href: "/profile/settings",
+ },
+ ],
+ },
+ {
+ items: [
+ {
+ icon: IconType.LogOut,
+ text: "Log out",
+ },
+ ],
+ },
+];
+
+export function getAccountMenuOptionIcon(icon: IconType) {
+ const iconClass = "w-6 h-6";
+ switch (icon) {
+ case IconType.LayoutDashboard:
+ return
- Our border radius system uses a simplified naming convention (xs, s,
- m, l, xl, 2xl, full) based on our Figma design tokens. This creates
- visual hierarchy and maintains design consistency across all
- components.
+ Our border radius system uses a descriptive naming convention
+ (xsmall, small, medium, large, xlarge, 2xlarge, full) based on our
+ Figma design tokens. This creates visual hierarchy and maintains
+ design consistency across all components while avoiding conflicts
+ with Tailwind's built-in classes.