121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Menu, X } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { Button } from "@/src/components/ui/button";
|
|
|
|
const navItems = [
|
|
{ key: "home", path: "" },
|
|
{ key: "portfolio", path: "/portfolio" },
|
|
{ key: "products", path: "/products" },
|
|
{ key: "about", path: "/about" },
|
|
{ key: "contact", path: "/contact" },
|
|
];
|
|
|
|
type NavbarProps = {
|
|
isAdmin?: boolean;
|
|
};
|
|
|
|
export function Navbar({ isAdmin = false }: NavbarProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const locale = useLocale();
|
|
const t = useTranslations("navigation");
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-default bg-surface backdrop-blur">
|
|
<div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8">
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href={`/${locale}`}
|
|
className="inline-flex items-center rounded-md border border-input bg-card px-3 py-2 shadow-xs"
|
|
>
|
|
<Image
|
|
src="/logos/light-primary.svg"
|
|
alt="mohfarawati logo"
|
|
width={140}
|
|
height={24}
|
|
className="block h-6 w-auto dark:hidden"
|
|
priority
|
|
/>
|
|
<Image
|
|
src="/logos/dark-primary.svg"
|
|
alt="mohfarawati logo"
|
|
width={140}
|
|
height={24}
|
|
className="hidden h-6 w-auto dark:block"
|
|
priority
|
|
/>
|
|
</Link>
|
|
<nav className="hidden items-center gap-5 md:flex">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.key}
|
|
href={`/${locale}${item.path}`}
|
|
className="text-sm text-muted transition hover:text-fg"
|
|
>
|
|
{t(item.key)}
|
|
</Link>
|
|
))}
|
|
{isAdmin ? (
|
|
<a href="/root" className="text-sm text-muted transition hover:text-fg">
|
|
{t("root")}
|
|
</a>
|
|
) : null}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="hidden items-center gap-2 md:flex">
|
|
<ThemeToggle />
|
|
<Button type="button" variant="outline" size="sm" className="text-xs">
|
|
{t("languagePlaceholder")}
|
|
</Button>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
onClick={() => setIsOpen((open) => !open)}
|
|
variant="outline"
|
|
size="icon"
|
|
className="md:hidden"
|
|
aria-label={isOpen ? t("closeMenu") : t("openMenu")}
|
|
>
|
|
{isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{isOpen ? (
|
|
<div className="border-t border-default px-4 py-4 md:hidden">
|
|
<nav className="flex flex-col gap-3">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.key}
|
|
href={`/${locale}${item.path}`}
|
|
className="text-sm text-muted"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{t(item.key)}
|
|
</Link>
|
|
))}
|
|
{isAdmin ? (
|
|
<a href="/root" className="text-sm text-muted" onClick={() => setIsOpen(false)}>
|
|
{t("root")}
|
|
</a>
|
|
) : null}
|
|
</nav>
|
|
<div className="mt-4 flex items-center gap-2">
|
|
<ThemeToggle />
|
|
<Button type="button" variant="outline" size="sm" className="text-xs">
|
|
{t("languagePlaceholder")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
);
|
|
}
|