Боковая панель навигации

Сделай кнопку «Меню», по которой слева выезжает панель с навигацией: пункты «Проекты», «Команда», «Настройки», разделитель и пункт «Выйти», выделенный как опасный. Выбор пункта вызывает переданный колбэк onNavigate с ключом пункта и закрывает панель.

side-nav__readme__claude-code__claude-opus-5__1 · 23.09.2026, 20:08:18 мск

Проверки пройдены
README · claude-opus-5 · Claude Code
Контекст до задачи~798
Токенов на прогон11 020
Цена$0.049
Ошибок компилятора0

Первый вызов модели получил 9 543 токена входа, включая системный промпт Claude Code. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

Ошибок нет: все компоненты и пропсы существуют.

Линтер и покрытие

  • inline-styleСтроки 41, 47, 58
    Инлайновые стили вместо классов и токенов библиотеки
Компоненты библиотеки

JxButton, JxDivider, JxDrawer

Ожидались JxDrawer, JxMenu, JxButton · покрытие 67%

Контекст

README (README.md, ~644)

Вход 2 · выход 1 477 · из кэша 8 233 · в кэш 1 308 · 18 с

Рендер

Код компонента

tsx67 строк
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { useState } from 'react';
import { JxButton, JxDivider, JxDrawer } from '@jinx-ui/react';

export type NavKey = 'projects' | 'team' | 'settings' | 'logout';

interface MenuDrawerProps {
  onNavigate: (key: NavKey) => void;
}

const NAV_ITEMS: ReadonlyArray<{ key: NavKey; label: string }> = [
  { key: 'projects', label: 'Проекты' },
  { key: 'team', label: 'Команда' },
  { key: 'settings', label: 'Настройки' },
];

export default function MenuDrawer({ onNavigate }: MenuDrawerProps) {
  const [open, setOpen] = useState(false);

  const select = (key: NavKey) => {
    setOpen(false);
    onNavigate(key);
  };

  const itemStyle = { width: '100%', justifyContent: 'flex-start' } as const;

  return (
    <>
      <JxButton variant="secondary" onClick={() => setOpen(true)}>
        Меню
      </JxButton>

      <JxDrawer
        open={open}
        onOpenChange={setOpen}
        side="left"
        title="Меню"
        aria-label="Меню навигации"
      >
        <nav
          aria-label="Основная навигация"
          style={{ display: 'grid', gap: 'var(--jx-space-1)' }}
        >
          {NAV_ITEMS.map((item) => (
            <JxButton
              key={item.key}
              variant="ghost"
              style={itemStyle}
              onClick={() => select(item.key)}
            >
              {item.label}
            </JxButton>
          ))}

          <JxDivider />

          <JxButton
            variant="danger"
            style={itemStyle}
            onClick={() => select('logout')}
          >
            Выйти
          </JxButton>
        </nav>
      </JxDrawer>
    </>
  );
}