140 lines
4.1 KiB
TypeScript
140 lines
4.1 KiB
TypeScript
import {
|
|
Navbar as HeroUINavbar,
|
|
NavbarContent,
|
|
NavbarMenu,
|
|
NavbarMenuToggle,
|
|
NavbarBrand,
|
|
NavbarItem,
|
|
NavbarMenuItem,
|
|
} from "@heroui/navbar";
|
|
import { Button } from "@heroui/button";
|
|
import { Kbd } from "@heroui/kbd";
|
|
import { Link } from "@heroui/link";
|
|
import { Input } from "@heroui/input";
|
|
import { link as linkStyles } from "@heroui/theme";
|
|
import NextLink from "next/link";
|
|
import clsx from "clsx";
|
|
|
|
import { siteConfig } from "@/config/site";
|
|
import { ThemeSwitch } from "@/components/theme-switch";
|
|
import {
|
|
TwitterIcon,
|
|
GithubIcon,
|
|
DiscordIcon,
|
|
HeartFilledIcon,
|
|
SearchIcon,
|
|
Logo,
|
|
} from "@/components/icons";
|
|
|
|
export const Navbar = () => {
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="Search"
|
|
classNames={{
|
|
inputWrapper: "bg-default-100",
|
|
input: "text-sm",
|
|
}}
|
|
endContent={
|
|
<Kbd className="hidden lg:inline-block" keys={["command"]}>
|
|
K
|
|
</Kbd>
|
|
}
|
|
labelPlacement="outside"
|
|
placeholder="Search..."
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
|
}
|
|
type="search"
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<HeroUINavbar maxWidth="xl" position="sticky">
|
|
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
|
|
<NavbarBrand className="gap-3 max-w-fit">
|
|
<NextLink className="flex justify-start items-center gap-1" href="/">
|
|
<Logo />
|
|
<p className="font-bold text-inherit">Adlerka Space Program</p>
|
|
</NextLink>
|
|
</NavbarBrand>
|
|
<div className="hidden lg:flex gap-4 justify-start ml-2">
|
|
{siteConfig.navItems.map((item) => (
|
|
<NavbarItem key={item.href}>
|
|
<NextLink
|
|
className={clsx(
|
|
linkStyles({ color: "foreground" }),
|
|
"data-[active=true]:text-primary data-[active=true]:font-medium"
|
|
)}
|
|
color="foreground"
|
|
href={item.href}
|
|
>
|
|
{item.label}
|
|
</NextLink>
|
|
</NavbarItem>
|
|
))}
|
|
</div>
|
|
</NavbarContent>
|
|
|
|
<NavbarContent
|
|
className="hidden sm:flex basis-1/5 sm:basis-full"
|
|
justify="end"
|
|
>
|
|
<NavbarItem className="hidden sm:flex gap-2">
|
|
<Link isExternal href={siteConfig.links.twitter} title="Twitter">
|
|
<TwitterIcon className="text-default-500" />
|
|
</Link>
|
|
<Link isExternal href={siteConfig.links.discord} title="Discord">
|
|
<DiscordIcon className="text-default-500" />
|
|
</Link>
|
|
<Link isExternal href={siteConfig.links.github} title="GitHub">
|
|
<GithubIcon className="text-default-500" />
|
|
</Link>
|
|
<ThemeSwitch />
|
|
</NavbarItem>
|
|
<NavbarItem className="hidden md:flex">
|
|
<Button
|
|
isExternal
|
|
as={Link}
|
|
className="text-sm font-normal text-default-600 bg-default-100"
|
|
href={siteConfig.links.sponsor}
|
|
startContent={<HeartFilledIcon className="text-danger" />}
|
|
variant="flat"
|
|
>
|
|
Sponsor
|
|
</Button>
|
|
</NavbarItem>
|
|
</NavbarContent>
|
|
|
|
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
|
<Link isExternal href={siteConfig.links.github}>
|
|
<GithubIcon className="text-default-500" />
|
|
</Link>
|
|
<ThemeSwitch />
|
|
<NavbarMenuToggle />
|
|
</NavbarContent>
|
|
|
|
<NavbarMenu>
|
|
<div className="mx-4 mt-2 flex flex-col gap-2">
|
|
{siteConfig.navMenuItems.map((item, index) => (
|
|
<NavbarMenuItem key={`${item}-${index}`}>
|
|
<Link
|
|
color={
|
|
index === 2
|
|
? "primary"
|
|
: index === siteConfig.navMenuItems.length - 1
|
|
? "danger"
|
|
: "foreground"
|
|
}
|
|
href="#"
|
|
size="lg"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</NavbarMenuItem>
|
|
))}
|
|
</div>
|
|
</NavbarMenu>
|
|
</HeroUINavbar>
|
|
);
|
|
};
|