Topbar

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiDotsGrid } from "@mdi/js";
5import type { ComponentProps, ReactNode } from "react";
6 
7import { Button } from "@/components/ui/button";
8import {
9  NavigationMenu,
10  NavigationMenuContent,
11  NavigationMenuItem,
12  NavigationMenuLink,
13  NavigationMenuList,
14  NavigationMenuTrigger,
15  navigationMenuTriggerStyle,
16} from "@/components/ui/navigation-menu";
17 
18export interface NavDropdownItem {
19  id?: string;
20  label: string;
21  href: string;
22}
23export interface NavItem {
24  id?: string;
25  label: string;
26  href?: string;
27  isActive?: boolean;
28  children?: NavDropdownItem[];
29}
30 
31export interface LogoConfig {
32  light: string;
33  dark: string;
34  alt?: string;
35}
36 
37export interface MenuButtonConfig {
38  icon?: string;
39  onClick?: () => void;
40  ariaLabel?: string;
41}
42 
43export interface RightSideItem {
44  id: string;
45  content: ReactNode;
46}
47 
48/** Main Topbar component props */
49export interface TopbarProps {
50  logo?: LogoConfig;
51  brandName?: string;
52  navigation?: NavItem[];
53  rightSideItems?: RightSideItem[];
54  menuButton?: MenuButtonConfig | false;
55  className?: string;
56}
57 
58// MAIN COMPONENT
59export default function Topbar({
60  logo,
61  brandName,
62  navigation = [],
63  rightSideItems = [],
64  menuButton,
65  className,
66  ...props
67}: TopbarProps & ComponentProps<"header">) {
68  return (
69    <header className={`border-b bg-body-bg ${className ?? ""}`} {...props}>
70      <div className="flex h-16 items-center px-4">
71        {/* Left section: Menu button + Logo + Brand */}
72        <div className="flex items-center gap-4">
73          {menuButton !== false && (
74            <Button
75              variant="ghost"
76              size="icon"
77              colorScheme="neutral"
78              aria-label={menuButton?.ariaLabel ?? "Menu"}
79              onClick={menuButton?.onClick}
80            >
81              <Icon path={menuButton?.icon ?? mdiDotsGrid} size={1} />
82            </Button>
83          )}
84          <div className="flex items-center gap-1">
85            {logo && (
86              <span className="shrink-0">
87                <img
88                  alt={logo.alt ?? "Logo"}
89                  className="shrink-0 grow-0 rounded-md object-cover object-left p-1 block dark:hidden"
90                  src={logo.light}
91                />
92                <img
93                  alt={logo.alt ?? "Logo"}
94                  className="shrink-0 grow-0 rounded-md object-cover object-left p-1 hidden dark:block"
95                  src={logo.dark}
96                />
97// … truncated