Dashboard top bar with a mobile navigation button and space for credits or account controls.
$ npx context-ds add app-top-barUse it for
Above every product page.
Avoid
Dependencies: lucide-react
"use client";import { useState } from "react";import { AppTopBar } from "@/components/product/app-top-bar";import { AppSidebar, SidebarGroup, SidebarLink } from "@/components/product/app-sidebar";import { Product as CreditsExample } from "./credits-menu";export function Product() { const [open, setOpen] = useState(false); return <div className="w-full self-start"><AppTopBar onMenuClick={() => setOpen(true)}><CreditsExample /></AppTopBar> <div className="md:hidden"><AppSidebar open={open} onOpenChange={setOpen} navLabel="Example navigation"><SidebarGroup><SidebarLink href="/preview/overview-page/Block">Overview</SidebarLink><SidebarLink href="/preview/table-page/Block">API keys</SidebarLink></SidebarGroup></AppSidebar></div> </div>;}"use client";import * as React from "react";import { Menu } from "lucide-react";import { cn } from "@/lib/utils";// Level with the sidebar's workspace row (80px, 56px on phones). Every page heads itself, so the bar has no title and// no fill: only the menu button where the sidebar is a drawer, and the credits (or the account) at the right.function AppTopBar({ onMenuClick, className, children }: { onMenuClick?: () => void; className?: string; children?: React.ReactNode }) { return ( <header data-slot="app-top-bar" className={cn("flex h-14 shrink-0 items-center justify-end gap-4 px-3 md:h-20 md:pr-4.5 md:pl-5", className)}> {onMenuClick && ( <button type="button" onClick={onMenuClick} aria-label="Open navigation" className="mr-auto -ml-0.5 grid size-9 shrink-0 place-items-center rounded-control text-fg-muted outline-none transition-colors duration-150 hover:bg-wash-hover hover:text-fg focus-visible:ring-2 focus-visible:ring-focus-ring md:hidden" > <Menu className="size-4.5" strokeWidth={1.5} /> </button> )} {children} </header> );}export { AppTopBar };Reference: context-dashboard c0ddf7a src/components/shell/top-bar.tsx.