@syscore/ui-library 1.7.1 → 1.7.2

package/client/components/ui/navigation.tsx

@@ -367,13 +367,14 @@ const NavigationTray = React.forwardRef<HTMLDivElement, NavigationTrayProps>(
       children,
       _index,
       _renderTriggerOnly,
+     
       ...props
     },
     ref,
   ) => {
-    const { light, activeIndex, setActiveIndex, setIsOpen } = useNavigation();
+    const { light, activeIndex, setActiveIndex, setIsOpen, isOpen } = useNavigation();
     const isActive = activeIndex === _index;
-
+    
     const handleMouseEnter = () => {
       setIsOpen(true);
       setActiveIndex(_index ?? null);
@@ -417,7 +418,7 @@ const NavigationTray = React.forwardRef<HTMLDivElement, NavigationTrayProps>(
 
     // Render the tray content
     return (
-      <div ref={ref} className={cn("navigation-tray", className)} {...props}>
+      <div ref={ref} className={cn("navigation-tray", className)} {...props} data-open={isOpen}>
         <h2
           className="heading-xsmall navigation-tray__title"
           style={{
@@ -506,10 +507,16 @@ interface NavigationLinkProps extends React.ComponentPropsWithoutRef<"a"> {
 }
 
 const NavigationLink = React.forwardRef<HTMLAnchorElement, NavigationLinkProps>(
-  ({ className, asChild, sub, bullet, badge, children, ...props }, ref) => {
+  ({ className, asChild, sub, bullet, badge, children, onClick, ...props }, ref) => {
     const { light } = useNavigation();
     const Comp = asChild ? Slot : "a";
 
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      // Prevent navigation from closing when clicking on links
+      e.stopPropagation();
+      onClick?.(e);
+    };
+
     const isSubItem = sub || bullet;
     const baseClassName = isSubItem
       ? cn(
@@ -533,7 +540,7 @@ const NavigationLink = React.forwardRef<HTMLAnchorElement, NavigationLinkProps>(
         <li>
           <div className="navigation-link__container">
             {bulletElement}
-            <Comp ref={ref} className={cn(baseClassName, className)} {...props}>
+            <Comp ref={ref} className={cn(baseClassName, className)} onClick={handleClick} {...props}>
               {children}
             </Comp>
           </div>
@@ -554,7 +561,7 @@ const NavigationLink = React.forwardRef<HTMLAnchorElement, NavigationLinkProps>(
       return (
         <li>
           <span className="navigation-link__badge-wrapper">
-            <Comp ref={ref} className={cn(baseClassName, className)} {...props}>
+            <Comp ref={ref} className={cn(baseClassName, className)} onClick={handleClick} {...props}>
               {children}
             </Comp>
             <span className="overline-small navigation-link__badge">
@@ -567,7 +574,7 @@ const NavigationLink = React.forwardRef<HTMLAnchorElement, NavigationLinkProps>(
 
     return (
       <li>
-        <Comp ref={ref} className={linkClassName} {...props}>
+        <Comp ref={ref} className={linkClassName} onClick={handleClick} {...props}>
           {children}
         </Comp>
       </li>

package/client/global.css

@@ -7175,6 +7175,7 @@ body {
 .navigation-tray__content {
   display: flex;
   gap: 5rem;
+  pointer-events: auto;
 }
 
 .navigation-column {
@@ -7204,6 +7205,7 @@ body {
 .navigation-link {
   display: block;
   font-weight: 500;
+  pointer-events: auto;
 }
 
 .navigation-link--light {