"use client"; import Topbar, { type NavItem, type LogoConfig, type RightSideItem, type MenuButtonConfig, } from "@/components/bloks/top-bar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Icon } from "@/lib/icon"; import { mdiDotsGrid, mdiHelpCircleOutline } from "@mdi/js"; const defaultLogo: LogoConfig = { light: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-sitecore", dark: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-sitecore-dark", alt: "Logo", }; const defaultNavigation: NavItem[] = [ { id: "home", label: "Home", href: "#" }, { id: "content-model", label: "Content model", children: [ { id: "components", label: "Components", href: "#" }, { id: "documentation", label: "Documentation", href: "#" }, { id: "blocks", label: "Blocks", href: "#" }, ], }, { id: "content", label: "Content", href: "#", isActive: true }, { id: "media", label: "Media", href: "#" }, { id: "settings", label: "Settings", href: "#" }, ]; const defaultRightSideItems: RightSideItem[] = [ { id: "help", content: ( ), }, { id: "avatar", content: ( {}}> SC ), }, ]; const defaultMenuButton: MenuButtonConfig = { icon: mdiDotsGrid, onClick: () => {}, ariaLabel: "Menu", }; export default function TopbarDemo() { return ( ); }

Topbar

Installation

Usage