131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
//* PACKAGES
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
navigationMenuTriggerStyle,
|
|
} from "@/components/ui/navigation-menu";
|
|
import { Link } from "@inertiajs/react";
|
|
import React from "react";
|
|
//* THEME
|
|
import Logo from "$/uwil/Logo";
|
|
import SocialNetworks from "$/uwil/SocialNetworks";
|
|
import { cn } from "@/lib/utils";
|
|
import { FrontNavLinkProps } from "@/types/front";
|
|
import SearchInput from "../../Base/Inputs/SearchInput";
|
|
|
|
function ListItem({
|
|
title,
|
|
href,
|
|
external,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<"li"> & {
|
|
href: string;
|
|
external?: boolean;
|
|
}) {
|
|
return (
|
|
/* eslint-disable react/jsx-props-no-spreading */
|
|
<li {...props}>
|
|
<NavigationMenuLink asChild>
|
|
{external ? (
|
|
<a href={href} target="_blank" rel="noopener noreferrer">
|
|
<div className="flex flex-col gap-1 text-sm py-1.5">
|
|
<div className="leading-none font-medium">{title}</div>
|
|
</div>
|
|
</a>
|
|
) : (
|
|
<Link href={href}>
|
|
<div className="flex flex-col gap-1 text-sm py-1.5">
|
|
<div className="leading-none font-medium">{title}</div>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</NavigationMenuLink>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default function DesktopNav({
|
|
navLinks,
|
|
}: {
|
|
navLinks: FrontNavLinkProps[];
|
|
}) {
|
|
return (
|
|
<div className="hidden lg:block">
|
|
<div className="flex items-center justify-between my-3 pr-3">
|
|
<div>
|
|
<SearchInput />
|
|
</div>
|
|
<SocialNetworks />
|
|
</div>
|
|
<nav className="flex items-center justify-between">
|
|
<Logo className="w-[95px] h-auto" />
|
|
<NavigationMenu viewport={false} className="uppercase">
|
|
<NavigationMenuList className="gap-4">
|
|
{navLinks.map((link) => {
|
|
if (link.children) {
|
|
return (
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="text-md font-bold uppercase">
|
|
{link.title}
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent className="z-50">
|
|
<div className="flex items-start gap-8 justify-between">
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={cn(
|
|
navigationMenuTriggerStyle(),
|
|
"text-sm font-semibold",
|
|
)}
|
|
>
|
|
<Link href={link.href}>{link.title}</Link>
|
|
</NavigationMenuLink>
|
|
<ul className="w-max list-disc pl-5 space-y-0.5">
|
|
{link.children.map((child) => {
|
|
return (
|
|
<ListItem
|
|
href={child.href ?? ""}
|
|
title={child.title}
|
|
external={child.external}
|
|
/>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
);
|
|
}
|
|
return (
|
|
<NavigationMenuItem>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={cn(
|
|
navigationMenuTriggerStyle(),
|
|
"text-md font-bold",
|
|
)}
|
|
>
|
|
{link.external ? (
|
|
<a
|
|
href={link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{link.title}
|
|
</a>
|
|
) : (
|
|
<Link href={link.href}>{link.title}</Link>
|
|
)}
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
);
|
|
})}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|