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
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
import { useThemeStore } from '@/stores/theme-store';
|
|
import { themes } from '@/themes';
|
|
import { Sidebar } from '@/components/layouts/sidebar';
|
|
import { TopNav } from '@/components/layouts/topnav';
|
|
import { SidebarCompact } from '@/components/layouts/sidebar-compact';
|
|
import { SidebarFloating } from '@/components/layouts/sidebar-floating';
|
|
import { MobileNav } from '@/components/layouts/mobile-nav';
|
|
import { SubscriptionBanner } from '@/components/subscription-banner';
|
|
import { cn } from '@horux/shared-ui';
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
const { isAuthenticated, _hasHydrated } = useAuthStore();
|
|
const { theme } = useThemeStore();
|
|
|
|
const currentTheme = themes[theme];
|
|
const layout = currentTheme.layout;
|
|
|
|
useEffect(() => {
|
|
// Solo verificar autenticación después de que el store se rehidrate
|
|
if (_hasHydrated && !isAuthenticated) {
|
|
router.push('/login');
|
|
}
|
|
}, [isAuthenticated, _hasHydrated, router]);
|
|
|
|
// Mostrar loading mientras se rehidrata el store
|
|
if (!_hasHydrated) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<div className="animate-pulse text-muted-foreground">Cargando...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return null;
|
|
}
|
|
|
|
// Render layout based on theme
|
|
const renderDesktopNavigation = () => {
|
|
switch (layout) {
|
|
case 'topnav':
|
|
return <TopNav />;
|
|
case 'sidebar-compact':
|
|
return <SidebarCompact />;
|
|
case 'sidebar-floating':
|
|
return <SidebarFloating />;
|
|
case 'sidebar-standard':
|
|
default:
|
|
return <Sidebar />;
|
|
}
|
|
};
|
|
|
|
const getContentClasses = () => {
|
|
switch (layout) {
|
|
case 'topnav':
|
|
return 'pt-16 px-4 md:px-6'; // Top padding for fixed top nav
|
|
case 'sidebar-compact':
|
|
return 'md:pl-16 px-4 md:px-0'; // Small left padding for compact sidebar on desktop
|
|
case 'sidebar-floating':
|
|
return 'px-4 py-4 md:pl-72 md:pr-4 md:py-4'; // Padding for floating sidebar on desktop
|
|
case 'sidebar-standard':
|
|
default:
|
|
return 'px-4 md:pl-64 md:px-0'; // Standard sidebar width on desktop
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={cn(
|
|
'min-h-screen bg-background',
|
|
layout === 'sidebar-floating' && 'bg-gradient-to-br from-background via-background to-muted/20'
|
|
)}>
|
|
{/* Mobile header with hamburger menu */}
|
|
<header className="md:hidden fixed top-0 left-0 right-0 z-40 h-14 border-b bg-card px-4 flex items-center justify-between">
|
|
<MobileNav />
|
|
<span className="font-bold text-lg">Horux</span>
|
|
<div className="w-10" />
|
|
</header>
|
|
|
|
{/* Desktop navigation - hidden on mobile */}
|
|
<div className="hidden md:block">
|
|
{renderDesktopNavigation()}
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className={cn('pt-14 md:pt-0', getContentClasses())}>
|
|
<SubscriptionBanner />
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|