Sidebar nav item

export const Default = () => {
  const [active, setActive] = useState('obchody');
  return (
    <Side>
      <Row icon="home" active={active === 'prehled'} onClick={() => setActive('prehled')}>
        Přehled
      </Row>
      <Row icon="target" active={active === 'obchody'} onClick={() => setActive('obchody')}>
        Obchody
      </Row>
      <Row icon="users" active={active === 'lide'} onClick={() => setActive('lide')}>
        Lidé
      </Row>
      <Row icon="building" active={active === 'firmy'} onClick={() => setActive('firmy')}>
        Firmy
      </Row>
    </Side>
  );
};

export const Variants = () => {
  const [colGrp, setColGrp] = useState(false);
  const [colRow, setColRow] = useState(false);
  return (
    <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
      <Labeled text="section divider — click the label to fold the block under it (.as-grp)">
        <Side>
          <Group collapsed={colGrp} onToggle={() => setColGrp((v) => !v)}>
            Obchod
          </Group>
          {colGrp ? null : (
            <>
              <Row icon="target">Obchody</Row>
              <Row icon="clipboard-list">Úkoly</Row>
            </>
          )}
          <Group>Nastavení</Group>
        </Side>
      </Labeled>

      <Labeled text="split parent row — the body navigates, the chevron folds; two sibling controls, both reachable by keyboard">
        <Side>
          <ParentRow icon="users" collapsed={colRow} onToggle={() => setColRow((v) => !v)} active>
            Lidé
          </ParentRow>
          {colRow ? null : (
            <>
              <Sub icon="star" color="var(--ic-amber)">
                Moji klienti
              </Sub>
              <Sub icon="filter" color="var(--ic-green)">
                Bonitní Pražané
              </Sub>
            </>
          )}
        </Side>
      </Labeled>

      <Labeled text="sub-items and their indents — a saved segment (colour tile) and the segment wizard (wand)">
        <Side>
          <Row icon="users">Lidé</Row>
          <Sub icon="star" color="var(--ic-amber)">
            Moji klienti
          </Sub>
          <Sub indent="lvl1" icon="filter" color="var(--ic-green)">
            Praha 30–45
          </Sub>
          <Sub indent="lvl2" icon="filter" color="var(--ic-purple)">
            S termínem
          </Sub>
          <button type="button" className="as-sub">
            <span className="wand">
              <Icon name="adjustments-horizontal" />
            </span>
            <span className="lbl">Nový segment</span>
          </button>
        </Side>
      </Labeled>
    </div>
  );
};

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="rest and active — the active row is the one the screen was opened from, not the raw URL (P230); it carries aria-current=„page“">
      <Side>
        <Row icon="home">Přehled</Row>
        <Row icon="target" active>
          Obchody
        </Row>
        <Row icon="users">Lidé</Row>
      </Side>
    </Labeled>

    <Labeled text="with a count — top-level rows use the blue pill, sub-items the amber one (pending additions in a saved segment)">
      <Side>
        <Row icon="inbox" badge="12">
          Pošta
        </Row>
        <Row icon="clipboard-list" badge="3">
          Úkoly
        </Row>
        <Sub icon="filter" color="var(--ic-green)" badge="5">
          Bonitní Pražané
        </Sub>
      </Side>
    </Labeled>

    <Labeled text="rail — icon-only sidebar (≥901px); labels, groups and sub-items are hidden, the name survives as title/aria-label">
      <div style={{ width: 56 }}>
        <Side rail>
          <Row icon="home">Přehled</Row>
          <Row icon="target" active>
            Obchody
          </Row>
          <Row icon="users">Lidé</Row>
          <Row icon="building">Firmy</Row>
        </Side>
      </div>
    </Labeled>

    <Labeled text="long navigation — the nav scrolls inside the sidebar, the footer with the rail toggle stays put">
      <div style={{ height: 260, display: 'grid' }}>
        <aside
          className="as-side"
          style={{
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius-md)',
            minHeight: 0,
          }}
        >
          <nav className="as-nav" style={{ overflowY: 'auto' }}>
            {Array.from({ length: 14 }, (_, i) => (
              <Row key={i} icon="folder">{`Položka ${i + 1}`}</Row>
            ))}
          </nav>
          <div className="as-side-foot">
            <button type="button" className="as-row as-rail-toggle" aria-expanded="true">
              <Icon name="chevron-left" />
              <span className="lbl">Sbalit navigaci</span>
            </button>
          </div>
        </aside>
      </div>
    </Labeled>
  </div>
);

export const WithIconAndKbd = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="every row carries an icon — in the rail it is the only thing left, so a row without one is not allowed">
      <Side>
        <Row icon="home">Přehled</Row>
        <Row icon="target">Obchody</Row>
        <Row icon="calendar">Kalendář</Row>
      </Side>
    </Labeled>
    <span style={label}>
      Nav rows carry no keyboard shortcut chips — the only shortcut in the shell is ⌘K for global
      search, and it lives in the top bar.
    </span>
  </div>
);

export const Composition = () => {
  const [active, setActive] = useState('obchody');
  const [rail, setRail] = useState(false);
  const [col, setCol] = useState(false);
  return (
    <div
      style={{
        display: 'flex',
        gap: 0,
        height: 380,
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-md)',
        overflow: 'hidden',
      }}
    >
      <aside className={'as-side' + (rail ? ' rail' : '')} style={{ minHeight: 0 }}>
        <nav className="as-nav" style={{ overflowY: 'auto' }}>
          <Row icon="home" active={active === 'prehled'} onClick={() => setActive('prehled')}>
            Přehled
          </Row>
          <Group collapsed={col} onToggle={() => setCol((v) => !v)}>
            Obchod
          </Group>
          {col ? null : (
            <>
              <Row
                icon="target"
                active={active === 'obchody'}
                onClick={() => setActive('obchody')}
                badge="4"
              >
                Obchody
              </Row>
              <Row
                icon="clipboard-list"
                active={active === 'ukoly'}
                onClick={() => setActive('ukoly')}
              >
                Úkoly
              </Row>
              <Sub
                icon="filter"
                color="var(--ic-green)"
                active={active === 'seg'}
                onClick={() => setActive('seg')}
              >
                Bonitní Pražané
              </Sub>
            </>
          )}
          <Row
            icon="settings"
            active={active === 'nastaveni'}
            onClick={() => setActive('nastaveni')}
          >
            Nastavení
          </Row>
        </nav>
        <div className="as-side-foot">
          <button
            type="button"
            className="as-row as-rail-toggle"
            aria-expanded={!rail}
            aria-label={rail ? 'Rozbalit navigaci' : 'Sbalit navigaci'}
            onClick={() => setRail((v) => !v)}
          >
            <Icon name={rail ? 'chevron-right' : 'chevron-left'} />
            <span className="lbl">Sbalit navigaci</span>
          </button>
        </div>
      </aside>
      <div
        style={{ flex: 1, padding: 'var(--sp-5)', color: 'var(--fg-muted)', font: 'var(--small)' }}
      >
        Obsah stránky — the rail toggle at the bottom switches the whole sidebar to icons and back.
      </div>
    </div>
  );
};