Layout

Optionally customize the page layout by editing app/config/layout.config.ts.

Default layout

The default layout includes:

• Header — Logo, navigation tabs (Casino/Sports), auth buttons
• Sidebar — 220px side navigation with casino/sports sections
• Main content — Scrollable area with your page content
• Footer — Copyright and links

Most forks don't need to change the layout. Start with theming first.

Custom layout

If you need a different layout structure:

1. Create your layout component in app/layouts/:

// app/layouts/MyLayout.tsx
import type { LayoutComponentProps } from '~/config/layout.config';

export default function MyLayout({ brand, clientEnv, children }: LayoutComponentProps) {
  return (
    <div>
      {/* Your custom layout */}
      {children}
    </div>
  );
}

2. Update layout.config.ts to use it:

// app/config/layout.config.ts
import MyLayout from '~/layouts/MyLayout';

export const LayoutComponent = MyLayout;

Important

• The layout component receives brand (configuration), clientEnv (environment), and children (page content)
• Make sure to wrap children with the required providers if you create a fully custom layout
• For most cases, just changing colors in theme.config.ts is sufficient