Layout switch

export const Default = () => (
  <div style={{ position: 'relative', width: 340, height: 100 }}>
    <Float>
      <Bar />
    </Float>
  </div>
);

export const Variants = () => {
  const [mode, setMode] = useState<'wide' | 'split'>('wide');
  return (
    <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
      <Labeled text="stránka bez railu — Detail záznamu neaktivní (výpisy, nastavení)">
        <Float>
          <Bar recordDisabled />
        </Float>
      </Labeled>
      <Labeled text="karta záznamu s railem — oba přepínače aktivní">
        <Float>
          <Bar />
        </Float>
      </Labeled>
      <Labeled text="Pošta — za oddělovačem rozvržení výpisu (široký / s náhledem)">
        <Float>
          <Bar list listMode={mode} onListMode={setMode} />
        </Float>
      </Labeled>
    </div>
  );
};

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="oba zapnuto — plná navigace i rail (výchozí stav)">
      <Float>
        <Bar />
      </Float>
    </Labeled>
    <Labeled text="Navigace vypnuta — navigace skrytá úplně, přepínač Navigace vypnutý (modrý podklad mizí)">
      <Float>
        <Bar nav={false} />
      </Float>
    </Labeled>
    <Labeled text="Detail záznamu vypnut — rail schovaný, obsah přes celou šířku">
      <Float>
        <Bar record={false} />
      </Float>
    </Labeled>
    <Labeled text="oba vypnuty">
      <Float>
        <Bar nav={false} record={false} />
      </Float>
    </Labeled>
  </div>
);