chore: Updated UnsignedNav component and update navigation menu structure

src/components/navigationBar/Unsigned.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import * as React from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,8 +23,17 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
 
 export function UnsignedNav() {
+  const components = [
+    {
+      title: "Businesses",
+      href: "",
+      description:
+        "A modal dialog that interrupts the user with important content and expects a response.",
+    },
+  ];
   return (
     <Card className="container bg-card py-3 px-4 border-0 flex items-center justify-between gap-6 rounded-2xl mt-5">
       {/* <ShadcnKit className="text-primary cursor-pointer" /> */}
@@ -33,27 +45,34 @@ export function UnsignedNav() {
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
-              <NavigationMenuTrigger className="text-base font-medium ">
-                <ul>
-                <li>Businesses</li>
+              <NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid w-[400px] ">
+                  {components.map((component) => (
+                    <ListItem
+                      key={component.title}
+                      title={component.title}
+                      href={component.href}
+                    >
+                      {component.description}
+                    </ListItem>
+                  ))}
                 </ul>
-              </NavigationMenuTrigger>
-              <NavigationMenuContent>Appply</NavigationMenuContent>
+              </NavigationMenuContent>
             </NavigationMenuItem>
 
             <NavigationMenuItem>
               <NavigationMenuTrigger className="text-base font-medium ">
-              Projects
+                Projects
               </NavigationMenuTrigger>
               <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
             </NavigationMenuItem>
             <NavigationMenuItem>
               <NavigationMenuTrigger className="text-base font-medium ">
-              Blog
+                Blog
               </NavigationMenuTrigger>
               <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
             </NavigationMenuItem>
-
           </NavigationMenuList>
         </NavigationMenu>
         <li>
@@ -144,3 +163,29 @@ const landings = [
     route: "/crm-landing",
   },
 ];
+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>
+          <hr />
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  );
+});
+ListItem.displayName = "ListItem";