import Link from "next/link"; import { NavbarBrand } from "./components/NavbarBrand"; import { navbarStyles } from "./styles/navbarStyles"; import type { CategoryNode, MenuItem } from "./utils/serverNavbarData"; import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon"; interface NavBarProps { categories: CategoryNode[]; menuItems: MenuItem[]; } const DEFAULT_BRAND = "Saleor Storefront"; const DEFAULT_LOGO = "https://webshopmanager.com/files/images/logo.png"; function getBrandConfig() { const brandName = process.env.NEXT_PUBLIC_BRAND_NAME || process.env.NEXT_PUBLIC_TENANT_NAME || DEFAULT_BRAND; const logo = process.env.NEXT_PUBLIC_LOGO_URL || DEFAULT_LOGO; return { brandName, logo }; } function getTargetFromMetadata( metadata?: Array<{ key: string; value: string }> ) { const target = metadata?.find((m) => m.key === "target")?.value; return target === "_blank" ? "_blank" : "_self"; } function ProductsDropdown({ categories }: { categories: CategoryNode[] }) { return (
{categories.length === 0 ? (

No Categories Found

Categories will appear here when available.

) : (
{categories.map((category) => (
{category.name} {category.children?.length ? (
    {[...category.children] .sort((a, b) => a.name.localeCompare(b.name)) .map((child) => (
  • {child.name}
    • ))}
) : null}
))}
View All Products
)}
); } function MenuItemDropdownServer({ item }: { item: MenuItem }) { return (
{item.name}
{(item.children || []).map((child) => ( {child.name} ))}
); } function MobileMenu({ categories, menuItems }: NavBarProps) { // Pure HTML/CSS mobile menu: no JS required. return (
Home
Products
View All Products {categories.map((c) => (
{c.name} {c.children?.length ? (
{c.children.map((cc) => ( {cc.name} ))}
) : null}
))}
{menuItems.length === 0 ? ( <> Blog Contact ) : (
{menuItems.map((item) => item.children?.length ? (
{item.name}
{item.children.map((child) => ( {child.name} ))}
) : ( {item.name} ) )}
)}
Where To Buy
); } function DesktopNav({ categories, menuItems }: NavBarProps) { const brand = getBrandConfig(); return ( ); } export const NavBar = ({ categories, menuItems }: NavBarProps) => { // This is intentionally server-rendered. It pulls menu/category data on the // server and outputs HTML so the main nav does not require client JS. return ( <> ); };