37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Menu, NotebookPen } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { ThemeToggle } from "@/components/theme/theme-toggle";
|
|
import { useSideNav } from "@/components/nav/side-nav-provider";
|
|
|
|
/**
|
|
* Mobile (< md) app top bar: hamburger (opens the nav drawer) + brand,
|
|
* with the theme picker on the right so it's reachable without opening
|
|
* the drawer. The page's own header (board title, counts, actions) sits
|
|
* in the content area just below this bar.
|
|
*/
|
|
export function MobileTopBar() {
|
|
const { setMobileOpen } = useSideNav();
|
|
|
|
return (
|
|
<header className="flex h-14 shrink-0 items-center gap-1.5 border-b bg-background px-2.5 md:hidden">
|
|
<Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)} aria-label="Open menu">
|
|
<Menu className="size-5" />
|
|
</Button>
|
|
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
|
|
<NotebookPen className="size-4" />
|
|
</span>
|
|
<span className="truncate font-heading text-[15px] font-bold tracking-tight">Organize</span>
|
|
</div>
|
|
|
|
<div className="ml-auto flex shrink-0 items-center">
|
|
<ThemeToggle collapsed menuSide="bottom" menuAlign="end" />
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|