Navigation component uses primitive components to enable dropdown men…

…u with list of items

src/custom/docs/components/navmenu/NavigationMenu.tsx

@@ -3,13 +3,17 @@ import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
+  NavigationMenuTrigger,
   NavigationMenuList,
-  navigationMenuTriggerStyle,
+  NavigationMenuContent,
+  cn
 } from 'src'
 
 import { Link } from './config'
 import { NavConfig } from './schema'
 
+import React from 'react';
+
 export const Navigation = (props: {
   activePath: string
   linkComponent: Link
@@ -23,19 +27,57 @@ export const Navigation = (props: {
         { props.navTextLinks.map((item) => {
           return (
             <NavigationMenuItem key={item.title}>
-              <NavigationMenuLink
-                className={navigationMenuTriggerStyle()}
-                asChild
-                active={isActivePath(props.activePath, item.href)}
-              >
-                <props.linkComponent href={item.href}>
-                  {item.title}
-                </props.linkComponent>
-              </NavigationMenuLink>
+              <NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> 
+                  <li className="row-span-4">
+                    <NavigationMenuLink asChild>
+                      <a
+                        className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                        href={item.href}
+                      >
+                        {item.logo}
+                        <p className="text-sm leading-tight text-muted-foreground">
+                          {item.description}
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                  { item.dropDown.map((item2) => {
+                    return (<ListItem key={item2.title} title={item2.title} href={item2.href}></ListItem>
+                  )})}
+                  </ul>
+                </NavigationMenuContent>
             </NavigationMenuItem>
           )
         })}
       </NavigationMenuList>
     </NavigationMenu>
   )
 }
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 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
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  );
+});
+ListItem.displayName = "ListItem";