ClientLayout.tsx

Go to the documentation of this file.

"use client";
import { usePathname } from "next/navigation";
import Navigation from "@/components/Navigation";
import Breadcrumbs from "@/components/Breadcrumbs";
import { StoreProvider } from "@/contexts/StoreContext";
import { ThemeProvider } from "@/contexts/ThemeContext";
import { IconProvider } from "@/contexts/IconContext";
import ThemeIndicator from "@/components/ThemeIndicator";
 
export default function ClientLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  
  // Pages that should be full-screen without navigation
  const fullScreenPages = ["/", "/login", "/pages/landing", "/pages/login", "/pages/sales/display"];
  const isFullScreen = pathname ? (fullScreenPages.includes(pathname) || pathname.startsWith("/pages/login") || pathname.startsWith("/pages/landing") || pathname.startsWith("/pages/sales/display")) : false;
  
  // Pages that don't need authentication/session (login pages)
  const isLoginPage = pathname === "/login" || pathname === "/pages/login" || pathname?.startsWith("/pages/login");
 
  if (isFullScreen) {
    // Login pages don't need StoreProvider (no session required)
    if (isLoginPage) {
      return (
        <ThemeProvider>
          <IconProvider>
            {children}
            <ThemeIndicator />
          </IconProvider>
        </ThemeProvider>
      );
    }
    
    // Other full-screen pages (like customer display) need StoreProvider
    return (
      <ThemeProvider>
        <IconProvider>
          <StoreProvider>
            {children}
            <ThemeIndicator />
          </StoreProvider>
        </IconProvider>
      </ThemeProvider>
    );
  }
 
  return (
    <ThemeProvider>
      <IconProvider>
        <StoreProvider>
          <div className="flex h-screen" style={{ background: 'var(--bg)' }}>
            <Navigation />
            <div className="flex-1 overflow-y-auto flex flex-col">
              <Breadcrumbs />
              <div className="flex-1">
                {children}
              </div>
            </div>
          </div>
          <ThemeIndicator />
        </StoreProvider>
      </IconProvider>
    </ThemeProvider>
  );
}