chore: Refactor UnsignedNav component and update navigation menu structure

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-08-28 16:06:06 +07:00
parent f4d0416dbe
commit 4cf62b5ee0

View File

@ -14,65 +14,70 @@ import Link from "next/link";
import { import {
NavigationMenu, NavigationMenu,
NavigationMenuContent, NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem, NavigationMenuItem,
NavigationMenuLink, NavigationMenuLink,
NavigationMenuList, NavigationMenuList,
NavigationMenuTrigger, NavigationMenuTrigger,
NavigationMenuViewport, navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"; } from "@/components/ui/navigation-menu";
export function UnsignedNav() { export function UnsignedNav() {
return ( return (
<Card className="container bg-card py-3 px-4 border-0 flex items-center justify-between gap-6 rounded-2xl mt-5"> <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" /> */} {/* <ShadcnKit className="text-primary cursor-pointer" /> */}
<NavigationMenu>
<NavigationMenuList> <ul className="hidden md:flex items-center gap-5 text-card-foreground ml-auto">
<NavigationMenuItem> <li className="text-primary font-medium">
<NavigationMenuTrigger>Businesses</NavigationMenuTrigger> <a href="#home">Home</a>
<NavigationMenuContent> </li>
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> <NavigationMenu>
<li className="row-span-3"> <NavigationMenuList>
<NavigationMenuLink asChild> <NavigationMenuItem>
<a <NavigationMenuTrigger className="text-base font-medium ">
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" <ul>
href="/" <li>Businesses</li>
> </ul>
<div className="mb-2 mt-4 text-lg font-medium"> </NavigationMenuTrigger>
shadcn/ui <NavigationMenuContent>Appply</NavigationMenuContent>
</div> </NavigationMenuItem>
<p className="text-sm leading-tight text-muted-foreground">
Beautifully designed components that you can copy and <NavigationMenuItem>
paste into your apps. Accessible. Customizable. Open <NavigationMenuTrigger className="text-base font-medium ">
Source. Projects
</p> </NavigationMenuTrigger>
</a> <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
</NavigationMenuLink> </NavigationMenuItem>
</li> <NavigationMenuItem>
</ul> <NavigationMenuTrigger className="text-base font-medium ">
</NavigationMenuContent> Blog
</NavigationMenuItem> </NavigationMenuTrigger>
<ul className="hidden md:flex items -center gap-10 text-card-foreground ml-auto"> <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
<li className="text-primary font-medium"> </NavigationMenuItem>
<a href="#home">Home</a>
</li> </NavigationMenuList>
<li> </NavigationMenu>
<a href="#features">Businesses</a> <li>
</li> <DropdownMenu>
<li> <DropdownMenuTrigger asChild>
<a href="#pricing">Projects</a> <span className="cursor-pointer">Docs</span>
</li> </DropdownMenuTrigger>
<li>
<a href="#faqs">Docs</a> <DropdownMenuContent align="start">
</li> {landings.map((page) => (
</ul> <DropdownMenuItem key={page.id}>
</NavigationMenuList> <Link href={page.route}>{page.title}</Link>
</NavigationMenu> </DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</li>
</ul>
<div className="flex items-center"> <div className="flex items-center">
<Button variant="secondary" className="hidden md:block px-2"> <Button variant="secondary" className="hidden md:block px-2">
Login Login
</Button> </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"> <div className="flex md:hidden mr-2 items-center gap-2">
<DropdownMenu> <DropdownMenu>
@ -115,7 +120,7 @@ export function UnsignedNav() {
</Button> </Button>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Button className="w-full text-sm">Get Started</Button> <Button className="w-full text-sm">Sign up</Button>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
@ -138,39 +143,4 @@ const landings = [
title: "Landing 02", title: "Landing 02",
route: "/crm-landing", 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",
},
]; ];