Layout Switcher

The Gallery app provides a runtime layout switcher to preview all 8 MetronicLayout variants.

Running the Gallery

pnpm --filter @gtcx/gallery dev

The gallery renders a variant picker with buttons for each layout:

Sidebar — Standard 280px sidebar (Layout 1)
Horizontal — Full-width header + navbar (Layout 2)
Mini Sidebar — 58px icon-only sidebar (Layout 3)
Card Sidebar — Sidebar + muted background + card content (Layouts 4/6/8)
Content Sidebar — Sticky header + tabs + in-flow sidebar (Layout 5)
Top Only — Header only, no sidebar (Layout 7)
Mega Menu — Header + mega-menu navbar (Layout 9)
Dark Sidebar — Dark-themed sidebar (Layout 10)

Implementing a Layout Switcher

To add a layout switcher in your own application:

import { useState } from 'react';
import { MetronicLayout } from '@gtcx/ui';
import type { MetronicLayoutVariant } from '@gtcx/ui';
 
const VARIANTS: MetronicLayoutVariant[] = [
  'sidebar', 'horizontal', 'mini-sidebar', 'card-sidebar',
  'content-sidebar', 'top-only', 'mega-menu', 'dark-sidebar',
];
 
function App() {
  const [variant, setVariant] = useState<MetronicLayoutVariant>('sidebar');
 
  return (
    <MetronicLayout variant={variant} menu={menu} logo={logo}>
      <select value={variant} onChange={(e) => setVariant(e.target.value)}>
        {VARIANTS.map((v) => <option key={v} value={v}>{v}</option>)}
      </select>
      <PageContent />
    </MetronicLayout>
  );
}

See the Gallery source (opens in a new tab) for the full implementation.

Tokens Overview