@authdog/react-elements 0.0.45 → 0.0.47

package/src/components/core/navbar.tsx

@@ -24,22 +24,48 @@ import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet";
 import { IconWrapper } from "../icons";
 import { ThemeToggle } from "../ui/theme-toggle";
 
-interface NavItem {
+export interface NavItem {
   title: string;
   href: string;
   disabled?: boolean;
 }
 
+export interface DropdownMenuItem {
+  name: string;
+  uri: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  disabled?: boolean;
+}
+
 interface NavbarProps {
   items?: NavItem[] | undefined;
   children?: React.ReactNode;
   className?: string;
   logoText?: string;
   logoSrc?: string;
+  /**
+   * Optional custom alt text element rendered next to the logo.
+   * When not provided, the plain `logoText` string is rendered.
+   * Use this to pass in custom typography / font classes.
+   */
+  altText?: React.ReactNode;
   isLoading?: boolean;
   user?: any;
   onNavigateHome?: () => void;
   onNavItemClick?: (href: string) => void;
+  /**
+   * Custom dropdown menu items that appear in the user avatar dropdown.
+   * If not provided, defaults to a "Profile" link.
+   */
+  dropdownMenuItems?: DropdownMenuItem[];
+  /**
+   * Callback when a dropdown menu item is clicked.
+   * Receives the URI of the clicked item.
+   */
+  onDropdownMenuItemClick?: (uri: string) => void;
+  /**
+   * @deprecated Use dropdownMenuItems with a custom item instead
+   */
   onProfileSelected?: () => void;
   onLogout?: () => void;
   // signinUrl?: string;
@@ -55,6 +81,7 @@ export function Navbar({
   className,
   logoText = "ACME Corp",
   logoSrc,
+  altText,
   user = {
     name: "John Doe",
     email: "john@example.com",
@@ -62,6 +89,10 @@ export function Navbar({
   },
   onNavigateHome = () => console.log("Navigating to home"),
   onNavItemClick = (href: string) => console.log(`Navigating to ${href}`),
+  dropdownMenuItems = [
+    { name: "Profile", uri: "/profile", icon: User },
+  ],
+  onDropdownMenuItemClick = (uri: string) => console.log(`Navigating to ${uri}`),
   onProfileSelected,
   onLogout = () => console.log("Logout clicked"),
   isLoading = false,
@@ -96,7 +127,7 @@ export function Navbar({
             type="button"
             onClick={onNavigateHome}
             className={cn(
-              "group inline-flex items-center gap-2 md:gap-3 rounded-md px-1 py-1 text-left",
+              "group inline-flex items-center gap-2 md:gap-3 rounded-md px-1 py-1 text-left cursor-pointer",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
             )}
             aria-label="Go to homepage"
@@ -111,9 +142,11 @@ export function Navbar({
                 />
               </span>
             )}
-            <span className="text-base font-semibold tracking-tight md:text-lg group-hover:text-primary">
-              {logoText}
-            </span>
+            {altText ?? (
+              <span className="text-base font-semibold tracking-tight md:text-lg group-hover:text-primary">
+                {logoText}
+              </span>
+            )}
           </button>
           {children}
         </div>
@@ -155,7 +188,7 @@ export function Navbar({
                       key={index}
                       href={item.href}
                       className={cn(
-                        "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",
+                        "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent cursor-pointer",
                         item.disabled && "cursor-not-allowed opacity-80",
                       )}
                       onClick={() => setOpen(false)}
@@ -212,13 +245,28 @@ export function Navbar({
                       </DropdownMenuLabel>
                       <DropdownMenuSeparator />
                       <DropdownMenuGroup>
-                        <DropdownMenuItem onClick={onProfileSelected}>
-                          <IconWrapper Icon={User} />
-                          <span>Profile</span>
-                        </DropdownMenuItem>
+                        {dropdownMenuItems.map((item, index) => (
+                          <DropdownMenuItem
+                            key={index}
+                            onClick={() => {
+                              if (!item.disabled) {
+                                // Backward compatibility: if it's the profile item and onProfileSelected exists
+                                if (item.uri === "/profile" && onProfileSelected) {
+                                  onProfileSelected();
+                                }
+                                onDropdownMenuItemClick(item.uri);
+                              }
+                            }}
+                            disabled={item.disabled}
+                            className="cursor-pointer"
+                          >
+                            {item.icon && <IconWrapper Icon={item.icon} />}
+                            <span>{item.name}</span>
+                          </DropdownMenuItem>
+                        ))}
                       </DropdownMenuGroup>
                       <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={onLogout}>
+                      <DropdownMenuItem onClick={onLogout} className="cursor-pointer">
                         <IconWrapper Icon={LogOut} />
                         <span>Log out</span>
                       </DropdownMenuItem>

package/src/index.ts

@@ -1,6 +1,7 @@
 export { Button } from "./components/ui/button";
 export { ClientOnly } from "./components/core/client-only";
 export { Navbar } from "./components/core/navbar";
+export type { NavItem, DropdownMenuItem } from "./components/core/navbar";
 export { UserProfile } from "./components/core/user-profile";
 export { UserDropdown } from "./components/core/user-dropdown";
 export { PlaceholderAlert } from "./components/core/placeholder-alert";