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

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

side-nav__none__claude-code__claude-opus-5__1 · 23.09.2026, 19:53:13 мск

Есть проблемы
Без контекста · claude-opus-5 · Claude Code
Контекст до задачи~154
Токенов на прогон10 479
Цена$0.053
Ошибок компилятора5

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

Компилятор

  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Button'. Did you mean 'JxButton'?
  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Drawer'. Did you mean 'JxDrawer'?
  • Строка 2 · TS2305
    Module '"@jinx-ui/react"' has no exported member 'Menu'.
  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'MenuItem'. Did you mean 'JxMenuItem'?
  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Divider'. Did you mean 'JxDivider'?
Выдуманные компоненты
ButtonDividerDrawerMenuMenuItem

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

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

Ни одного: код написан без библиотеки, поэтому прогон не засчитан

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

Контекст

Только формулировка задачи

Вход 2 · выход 1 872 · из кэша 8 233 · в кэш 372 · 21 с

Рендер

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

tsx54 строки
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
import { useState } from 'react';
import { Button, Drawer, Menu, MenuItem, Divider } from '@jinx-ui/react';

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

type SideNavProps = {
  onNavigate: (key: NavKey) => void;
};

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

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

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

  return (
    <>
      <Button
        onClick={() => setOpen(true)}
        aria-haspopup="menu"
        aria-expanded={open}
      >
        Меню
      </Button>

      <Drawer
        open={open}
        placement="left"
        onClose={() => setOpen(false)}
        aria-label="Навигация"
      >
        <Menu style={{ padding: 'var(--jx-space-2)' }}>
          {ITEMS.map((item) => (
            <MenuItem key={item.key} onSelect={() => select(item.key)}>
              {item.label}
            </MenuItem>
          ))}
          <Divider />
          <MenuItem tone="danger" onSelect={() => select('logout')}>
            Выйти
          </MenuItem>
        </Menu>
      </Drawer>
    </>
  );
}