{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "topbar",
  "title": "Topbar",
  "description": "An application top bar for page navigation",
  "dependencies": [
    "@mdi/js"
  ],
  "registryDependencies": [
    "https://blok.sitecore.com/r/theme.json",
    "https://blok.sitecore.com/r/avatar.json",
    "https://blok.sitecore.com/r/button.json",
    "https://blok.sitecore.com/r/navigation-menu.json"
  ],
  "files": [
    {
      "path": "src/components/bloks/top-bar.tsx",
      "content": "\"use client\";\n\nimport { Icon } from \"@/lib/icon\";\nimport { mdiDotsGrid } from \"@mdi/js\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\n\nexport interface NavDropdownItem {\n  id?: string;\n  label: string;\n  href: string;\n}\nexport interface NavItem {\n  id?: string;\n  label: string;\n  href?: string;\n  isActive?: boolean;\n  children?: NavDropdownItem[];\n}\n\nexport interface LogoConfig {\n  light: string;\n  dark: string;\n  alt?: string;\n}\n\nexport interface MenuButtonConfig {\n  icon?: string;\n  onClick?: () => void;\n  ariaLabel?: string;\n}\n\nexport interface RightSideItem {\n  id: string;\n  content: ReactNode;\n}\n\n/** Main Topbar component props */\nexport interface TopbarProps {\n  logo?: LogoConfig;\n  brandName?: string;\n  navigation?: NavItem[];\n  rightSideItems?: RightSideItem[];\n  menuButton?: MenuButtonConfig | false;\n  className?: string;\n}\n\n// MAIN COMPONENT\nexport default function Topbar({\n  logo,\n  brandName,\n  navigation = [],\n  rightSideItems = [],\n  menuButton,\n  className,\n  ...props\n}: TopbarProps & ComponentProps<\"header\">) {\n  return (\n    <header className={`border-b bg-body-bg ${className ?? \"\"}`} {...props}>\n      <div className=\"flex h-16 items-center px-4\">\n        {/* Left section: Menu button + Logo + Brand */}\n        <div className=\"flex items-center gap-4\">\n          {menuButton !== false && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              colorScheme=\"neutral\"\n              aria-label={menuButton?.ariaLabel ?? \"Menu\"}\n              onClick={menuButton?.onClick}\n            >\n              <Icon path={menuButton?.icon ?? mdiDotsGrid} size={1} />\n            </Button>\n          )}\n          <div className=\"flex items-center gap-1\">\n            {logo && (\n              <span className=\"shrink-0\">\n                <img\n                  alt={logo.alt ?? \"Logo\"}\n                  className=\"shrink-0 grow-0 rounded-md object-cover object-left p-1 block dark:hidden\"\n                  src={logo.light}\n                />\n                <img\n                  alt={logo.alt ?? \"Logo\"}\n                  className=\"shrink-0 grow-0 rounded-md object-cover object-left p-1 hidden dark:block\"\n                  src={logo.dark}\n                />\n              </span>\n            )}\n            {brandName && (\n              <span className=\"text-lg font-semibold\">{brandName}</span>\n            )}\n          </div>\n        </div>\n\n        {/* Navigation Menu */}\n        {navigation.length > 0 && (\n          <NavigationMenu\n            className=\"ml-6 md:inline-flex hidden\"\n            viewport={false}\n          >\n            <NavigationMenuList>\n              {navigation.map((item) => (\n                <NavigationMenuItem key={item.id ?? item.label}>\n                  {item.children && item.children.length > 0 ? (\n                    <>\n                      <NavigationMenuTrigger>\n                        {item.label}\n                      </NavigationMenuTrigger>\n                      <NavigationMenuContent>\n                        <ul className=\"grid w-[200px] gap-2\">\n                          {item.children.map((child) => (\n                            <li key={child.id ?? child.label}>\n                              <NavigationMenuLink href={child.href}>\n                                {child.label}\n                              </NavigationMenuLink>\n                            </li>\n                          ))}\n                        </ul>\n                      </NavigationMenuContent>\n                    </>\n                  ) : (\n                    <NavigationMenuLink\n                      href={item.href}\n                      className={`${navigationMenuTriggerStyle()}${item.isActive ? \" active\" : \"\"}`}\n                    >\n                      {item.label}\n                    </NavigationMenuLink>\n                  )}\n                </NavigationMenuItem>\n              ))}\n            </NavigationMenuList>\n          </NavigationMenu>\n        )}\n\n        {/* Right section */}\n        <div className=\"ml-auto flex items-center space-x-4\">\n          {rightSideItems.map((item) => (\n            <div key={item.id}>{item.content}</div>\n          ))}\n        </div>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:block",
      "target": "src/components/bloks/top-bar.tsx"
    },
    {
      "path": "src/lib/icon.tsx",
      "content": "import type { SVGProps } from \"react\";\n\ntype IconProps = SVGProps<SVGSVGElement> & {\n  path: string;\n  title?: string;\n  size?: number | string;\n  className?: string;\n  fill?: string;\n};\n\nexport function Icon({\n  path,\n  title,\n  size = 1,\n  className,\n  fill = \"currentColor\",\n  ...rest\n}: IconProps) {\n  return (\n    <svg\n      transform={`scale(${size})`}\n      viewBox=\"0 0 24 24\"\n      aria-label={title}\n      className={className}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      <path d={path} fill={fill} />\n    </svg>\n  );\n}\n",
      "type": "registry:lib"
    }
  ],
  "type": "registry:block"
}