From 4cf62b5ee03e64e0c5e611bc321e0cdd48f2bb55 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 28 Aug 2024 16:06:06 +0700
Subject: [PATCH] chore: Refactor UnsignedNav component and update navigation
 menu structure

---
 src/components/navigationBar/Unsigned.tsx | 132 +++++++++-------------
 1 file changed, 51 insertions(+), 81 deletions(-)

diff --git a/src/components/navigationBar/Unsigned.tsx b/src/components/navigationBar/Unsigned.tsx
index 4cff6d3..27fb047 100644
--- a/src/components/navigationBar/Unsigned.tsx
+++ b/src/components/navigationBar/Unsigned.tsx
@@ -14,65 +14,70 @@ import Link from "next/link";
 import {
   NavigationMenu,
   NavigationMenuContent,
-  NavigationMenuIndicator,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
 
 export function UnsignedNav() {
   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" /> */}
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Businesses</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                <li className="row-span-3">
-                  <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="/"
-                    >
-                      <div className="mb-2 mt-4 text-lg font-medium">
-                        shadcn/ui
-                      </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        Beautifully designed components that you can copy and
-                        paste into your apps. Accessible. Customizable. Open
-                        Source.
-                      </p>
-                    </a>
-                  </NavigationMenuLink>
-                </li>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <ul className="hidden md:flex items -center gap-10 text-card-foreground ml-auto">
-            <li className="text-primary font-medium">
-              <a href="#home">Home</a>
-            </li>
-            <li>
-              <a href="#features">Businesses</a>
-            </li>
-            <li>
-              <a href="#pricing">Projects</a>
-            </li>
-            <li>
-              <a href="#faqs">Docs</a>
-            </li>
-          </ul>
-        </NavigationMenuList>
-      </NavigationMenu>
+
+      <ul className="hidden md:flex items-center gap-5 text-card-foreground ml-auto">
+        <li className="text-primary font-medium">
+          <a href="#home">Home</a>
+        </li>
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="text-base font-medium ">
+                <ul>
+                <li>Businesses</li>
+                </ul>
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>Appply</NavigationMenuContent>
+            </NavigationMenuItem>
+
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="text-base font-medium ">
+              Projects
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="text-base font-medium ">
+              Blog
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
+            </NavigationMenuItem>
+
+          </NavigationMenuList>
+        </NavigationMenu>
+        <li>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <span className="cursor-pointer">Docs</span>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="start">
+              {landings.map((page) => (
+                <DropdownMenuItem key={page.id}>
+                  <Link href={page.route}>{page.title}</Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </li>
+      </ul>
+
       <div className="flex items-center">
         <Button variant="secondary" className="hidden md:block px-2">
           Login
         </Button>
-        <Button className="hidden md:block ml-2 mr-2">Get Started</Button>
+        <Button className="hidden md:block ml-2 mr-2">Sign up</Button>
 
         <div className="flex md:hidden mr-2 items-center gap-2">
           <DropdownMenu>
@@ -115,7 +120,7 @@ export function UnsignedNav() {
                 </Button>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <Button className="w-full text-sm">Get Started</Button>
+                <Button className="w-full text-sm">Sign up</Button>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -138,39 +143,4 @@ const landings = [
     title: "Landing 02",
     route: "/crm-landing",
   },
-  {
-    id: 3,
-    title: "Landing 03",
-    route: "/ai-content-landing",
-  },
-  {
-    id: 4,
-    title: "Landing 04",
-    route: "/new-intro-landing",
-  },
-  {
-    id: 5,
-    title: "Landing 05",
-    route: "/about-us-landing",
-  },
-  {
-    id: 6,
-    title: "Landing 06",
-    route: "/contact-us-landing",
-  },
-  {
-    id: 7,
-    title: "Landing 07",
-    route: "/faqs-landing",
-  },
-  {
-    id: 8,
-    title: "Landing 08",
-    route: "/pricing-landing",
-  },
-  {
-    id: 9,
-    title: "Landing 09",
-    route: "/career-landing",
-  },
 ];