@authdog/react-elements 0.0.46 → 0.0.48

package/src/components/core/navbar.tsx

@@ -24,12 +24,19 @@ 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;
@@ -46,6 +53,19 @@ interface NavbarProps {
   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;
@@ -69,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,
@@ -103,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"
@@ -164,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)}
@@ -181,7 +205,7 @@ export function Navbar({
                 <DropdownMenuTrigger asChild>
                   <Button
                     variant="ghost"
-                    className="relative h-8 w-8 rounded-full"
+                    className="relative h-8 w-8 rounded-full cursor-pointer"
                     disabled={isLoading}
                   >
                     <Avatar className="h-8 w-8">
@@ -219,15 +243,34 @@ export function Navbar({
                           </p>
                         </div>
                       </DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuGroup>
-                        <DropdownMenuItem onClick={onProfileSelected}>
-                          <IconWrapper Icon={User} />
-                          <span>Profile</span>
-                        </DropdownMenuItem>
-                      </DropdownMenuGroup>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={onLogout}>
+                      {dropdownMenuItems.length > 0 && (
+                        <>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuGroup>
+                            {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} className="cursor-pointer">
                         <IconWrapper Icon={LogOut} />
                         <span>Log out</span>
                       </DropdownMenuItem>

package/src/components/ui/theme-toggle.tsx

@@ -46,6 +46,7 @@ export const ThemeToggle = () => {
     <Button
       variant="ghost"
       size="icon"
+      className="cursor-pointer"
       aria-label={mode === "dark" ? "Switch to light theme" : "Switch to dark theme"}
       onClick={toggle}
     >

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";