Тестовое задание

Установка зависимостей npm install

Запуск проекта npm run dev

Задание

Сверстать компонент /src/components/Sidebar.jsx по дизайну c использованием styled-components.

• В /src/index.scss есть дизайн-токены для светлой и темной темы
• В зависимости от prop color Sidebar должен иметь стили темной или светлой темы
• Возможность смены темы должна быть реализована в styled-components за счет дизайн-токенов
• Кнопку для переключения темы делать не нужно

Анимированная версия

Оригинал

Верстать нужно

• лого
• элементы навигации
• hover, active состояния у элементов Sidebar
• анимация при закрытии/открытии у элементов, которые скрываются/появляются

Верстать не нужно

• тултипы
• профиль
• анимация при загрузке страницы (не открытие/закрытие)

---

• иконки могут не соответствовать, это не так важно
• больше всего интересует анимация при открытии/закрытии
• pixel perfect не требуется, можно верстать на глаз
• логотип в проекте другой, используйте его