Pular para o conteúdo principal

Layout

O layout padrão usa flexbox com sidebar fixa e main scrollável.

Estrutura visual​

┌──────────────────────────────────────────────────┐
│ Header (h-14, bg-header-bg, border-b)            │
│ [☰ mobile] [Logo] [Casino|Sports] [🔍] [Auth]   │
├────────┬─────────────────────────────────────────┤
│Sidebar │ main (flex-1, overflow-y-auto)           │
│(220px) │                                          │
│        │ {children}                               │
│ Promo  │                                          │
│ Casino │ Footer (border-t, bg-footer-bg-primary)  │
│ Sports │                                          │
│ Extras │                                          │
└────────┴─────────────────────────────────────────┘

CSS structure​

html/body: h-screen overflow-hidden
└── div.flex.flex-col.h-screen
    ├── Header (flex-shrink-0, h-14)
    └── div.flex.flex-1.overflow-hidden
        ├── Sidebar (w-[220px], fixed mobile / relative desktop)
        └── main.flex-1.overflow-y-auto
            ├── {children}
            └── Footer

Componentes​

DefaultLayout​

Wrapper principal. Recebe brand e clientEnv do loader e envolve com providers:

EnvProvider → BrandProvider → AuthInitializer → Header + Sidebar + Main + Modais
  • Altura: h-14
  • Logo: brand.appearance.logo via getUrlForApiImage(), fallback /logo.svg
  • Tab-switcher (Casino/Sports): desktop only
  • Search: desktop only
  • Auth: mostra nome do usuário + logout (autenticado) ou botões entrar/registrar
  • Hamburger: lg:hidden, abre sidebar mobile
  • Largura: 220px
  • Desktop: lg:relative no flex flow
  • Mobile: fixed com backdrop, controlado por mobileMenuOpen no Zustand
  • Seções: Promoções (pills), Casino, Sports, Extras
  • Items: SidebarMenuItem com NavLink, active = bg-primary/12 + left green bar
  • Dentro do main scrollável
  • Simples border-t com copyright e links

layout.config.ts (fork override)​

// app/config/layout.config.ts
import DefaultLayout from '~/layouts/DefaultLayout';
import type { BrandConfig } from '@cactus-agents/types';

export type LayoutComponentProps = {
  brand: BrandConfig;
  clientEnv: Record<string, string>;
  children: React.ReactNode;
};

export const LayoutComponent = DefaultLayout;

Forks podem criar um layout customizado e exportá-lo aqui.