d3b326e78c
- Add Sheet primitive component for mobile drawers - Add MobileNav with hamburger menu for dashboard layout - Hide desktop sidebars on mobile; show mobile header - Make dashboard header responsive with stacked layout on small screens - Hide selector text on mobile, show icons only - Convert fixed-width filters to responsive widths (CFDI, Clientes, Admin, Documentos, Alertas) - Cap dialog widths to 95vw on mobile (CFDI viewer, Documentos, Reportes, Contribuyentes, Facturación) - Make calendar grid smaller and use single-letter weekdays on mobile - Update viewport to include viewport-fit=cover for Samsung safe areas
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useThemeStore } from '@/stores/theme-store';
|
|
import { themes, type ThemeName } from '@/themes';
|
|
import { Button } from '@horux/shared-ui';
|
|
import { TenantSelector } from '@/components/tenant-selector';
|
|
import { MembershipSwitcher } from '@/components/membership-switcher';
|
|
import { ContribuyenteSelector } from '@/components/contribuyente-selector';
|
|
import { Sun, Moon, Palette } from 'lucide-react';
|
|
|
|
const themeIcons: Record<ThemeName, React.ReactNode> = {
|
|
light: <Sun className="h-4 w-4" />,
|
|
vibrant: <Palette className="h-4 w-4" />,
|
|
corporate: <Palette className="h-4 w-4" />,
|
|
dark: <Moon className="h-4 w-4" />,
|
|
};
|
|
|
|
const themeOrder: ThemeName[] = ['light', 'dark'];
|
|
|
|
interface HeaderProps {
|
|
title: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function Header({ title, children }: HeaderProps) {
|
|
const { theme, setTheme } = useThemeStore();
|
|
|
|
const cycleTheme = () => {
|
|
const currentIndex = themeOrder.indexOf(theme);
|
|
const nextIndex = (currentIndex + 1) % themeOrder.length;
|
|
setTheme(themeOrder[nextIndex]);
|
|
};
|
|
|
|
return (
|
|
<header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur">
|
|
<div className="flex h-auto min-h-16 flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6 md:py-0">
|
|
{/* Title section */}
|
|
<div className="flex items-center gap-4 min-w-0">
|
|
<h1 className="text-lg font-semibold truncate md:text-xl">{title}</h1>
|
|
{children}
|
|
</div>
|
|
|
|
{/* Actions section */}
|
|
<div className="flex flex-wrap items-center gap-2 md:gap-3">
|
|
<div className="flex flex-1 items-center gap-2 min-w-0 md:flex-initial md:gap-3">
|
|
<ContribuyenteSelector />
|
|
<MembershipSwitcher />
|
|
<TenantSelector />
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={cycleTheme}
|
|
title={`Tema: ${themes[theme].name}`}
|
|
>
|
|
{themeIcons[theme]}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|