feat: Add onLinkClick prop to UserNav and ListItem components

- feat: Enable custom onLinkClick handler in UserNav component - feat: Support onClick event in ListItem component for enhanced interactivity - refactor: Import React in UserNav component for consistency
iforge-uos · Oct 9, 2024 · 32ddbca · 32ddbca
1 parent 0036a8c
commit 32ddbca
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/apps/forge/src/components/navbar/appSwitcher/ListItem.tsx b/apps/forge/src/components/navbar/appSwitcher/ListItem.tsx
@@ -7,10 +7,11 @@ interface ListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   icon?: ReactNode;
   title: string;
   to: string;
+  onClick?: () => void;
 }
 
 const ListItem = React.forwardRef<HTMLAnchorElement, ListItemProps>(
-  ({ className, title, icon, children, to, ...props }, ref) => {
+  ({ className, title, icon, children, to, onClick, ...props }, ref) => {
     return (
       <li>
         <NavigationMenuLink asChild>
@@ -21,6 +22,7 @@ const ListItem = React.forwardRef<HTMLAnchorElement, ListItemProps>(
               "flex items-center space-x-3 select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
               className,
             )}
+            onClick={onClick}
             {...props}
           >
             {icon && <span className="flex-shrink-0">{icon}</span>}

diff --git a/apps/forge/src/components/navbar/appSwitcher/index.tsx b/apps/forge/src/components/navbar/appSwitcher/index.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import ContextMenuWrapper from "@/components/navbar/appSwitcher/ContextMenu.tsx";
 import ListItem from "@/components/navbar/appSwitcher/ListItem";
 import useCurrentApp from "@/hooks/useCurrentApp.ts";
@@ -13,9 +14,19 @@ import {
 } from "@ui/components/ui/navigation-menu";
 import { BookOpen, PenLine, Printer } from "lucide-react";
 
-export default function AppSwitcher() {
+interface AppSwitcherProps {
+  onLinkClick?: () => void;
+}
+
+export default function AppSwitcher({ onLinkClick }: AppSwitcherProps) {
   const currentapp = useCurrentApp();
 
+  const handleLinkClick = () => {
+    if (onLinkClick) {
+      onLinkClick();
+    }
+  };
+
   return (
     <NavigationMenu>
       <NavigationMenuList>
@@ -32,6 +43,7 @@ export default function AppSwitcher() {
                       "flex h-full w-full select-none flex-col justify-end rounded-md p-6 no-underline outline-none focus:shadow-md bg-gradient-to-b from-red-300 to-white dark:bg-gradient-to-b dark:from-red-950 dark:to-black",
                     )}
                     to="/"
+                    onClick={handleLinkClick}
                   >
                     <div className="mb-2 mt-4 text-lg font-medium font-futura">iForge</div>
                     <p className="text-sm leading-tight text-muted-foreground">
@@ -40,13 +52,13 @@ export default function AppSwitcher() {
                   </Link>
                 </NavigationMenuLink>
               </li>
-              <ListItem to={"/signin"} title="Sign In" icon={<PenLine />}>
+              <ListItem to={"/signin"} title="Sign In" icon={<PenLine />} onClick={onLinkClick}>
                 iForge Sign In System
               </ListItem>
-              <ListItem to={"/training"} title="Training" icon={<BookOpen />}>
+              <ListItem to={"/training"} title="Training" icon={<BookOpen />} onClick={onLinkClick}>
                 Handle your iForge training here.
               </ListItem>
-              <ListItem to={"/printing"} title="Printing" icon={<Printer />}>
+              <ListItem to={"/printing"} title="Printing" icon={<Printer />} onClick={onLinkClick}>
                 3D Printing (WIP)
               </ListItem>
             </ul>

diff --git a/apps/forge/src/components/navbar/index.tsx b/apps/forge/src/components/navbar/index.tsx
@@ -21,7 +21,7 @@ export default function NavBar() {
     <div className="sticky top-0 z-40 w-full bg-card text-card-foreground backdrop-filter shadow-lg dark:shadow-none border-b-2">
       <div className="flex items-center h-[60px] px-3 md:px-6">
         <div className="flex items-center flex-1 md:w-1/3 md:flex-none">
-          <AppSwitcher />
+          <AppSwitcher onLinkClick={closeMobileMenu} />
         </div>
 
         {/* Desktop Navigation */}
@@ -31,7 +31,7 @@ export default function NavBar() {
 
         <div className="flex items-center justify-end flex-1 md:w-1/3 space-x-2 md:space-x-4">
           <ThemeSwitcher />
-          <UserNav />
+          <UserNav onLinkClick={closeMobileMenu} />
 
           {/* Mobile Menu Button */}
           <Button variant="ghost" size="icon" className="md:hidden" onClick={toggleMobileMenu}>

diff --git a/apps/forge/src/components/navbar/userNav/index.tsx b/apps/forge/src/components/navbar/userNav/index.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { UserAvatar } from "@/components/avatar";
 import { useUser } from "@/lib/utils";
 import { RootState } from "@/redux/store";
@@ -22,12 +23,22 @@ function isString(value: unknown): value is string {
   return typeof value === "string";
 }
 
-export function UserNav() {
+interface UserNavProps {
+  onLinkClick?: () => void;
+}
+
+export function UserNav({ onLinkClick }: UserNavProps) {
   const isAuthenticated = useSelector((state: RootState) => state.auth.is_authenticated);
   const user = useUser();
 
   const isAdmin = user?.roles.some((role) => role.name === "Admin");
 
+  const handleLinkClick = () => {
+    if (onLinkClick) {
+      onLinkClick();
+    }
+  };
+
   if (isAuthenticated && user && isString(user.email) && isString(user.display_name)) {
     return (
       <DropdownMenu>
@@ -54,13 +65,13 @@ export function UserNav() {
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
-            <Link to="/user/profile">
+            <Link to="/user/profile" onClick={handleLinkClick}>
               <DropdownMenuItem>
                 Profile
                 <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
               </DropdownMenuItem>
             </Link>
-            <Link to="/user/settings">
+            <Link to="/user/settings" onClick={handleLinkClick}>
               <DropdownMenuItem>
                 Settings
                 <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -71,7 +82,7 @@ export function UserNav() {
             <>
               <DropdownMenuSeparator />
               <DropdownMenuGroup>
-                <Link to="/admin/dashboard">
+                <Link to="/admin/dashboard" onClick={handleLinkClick}>
                   <DropdownMenuItem>
                     Admin Dashboard
                     <DropdownMenuShortcut>⇧⌘D</DropdownMenuShortcut>
@@ -81,7 +92,7 @@ export function UserNav() {
             </>
           )}
           <DropdownMenuSeparator />
-          <Link to="/auth/logout">
+          <Link to="/auth/logout" onClick={handleLinkClick}>
             <DropdownMenuItem>
               Log out
               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
@@ -92,7 +103,7 @@ export function UserNav() {
     );
   }
   return (
-    <Link to="/auth/login">
+    <Link to="/auth/login" onClick={handleLinkClick}>
       <Button variant="ghost" className="font-futura">
         Login
       </Button>