<aside> 💡

Прежде чем возьметесь за выполнение задания, обязательно уведомите об этом рекрутера и дайте оценку по срокам. Например: “Здравствуйте, я берусь за тестовое задание, сдам 7 числа.”

</aside>

<aside> ☝

Если что-то не понятно, хотите уточнить или посоветоваться – смело пишите в чат!

</aside>

Задание

Необходимо создать headless (без стилизации) компонент бокового меню, дизайн не требуется, главное — корректность работы и доступность.

Пример-референс как это должно работать (постарайтесь воспроизвести логику 1 в 1):

Пример работы меню из нашего приложения HelloClient CRM

Пример работы меню из нашего приложения HelloClient CRM

Макеты с описанием

Минимальный вариант (узкий)

Максимальный вариант (широкий)

Требования

<aside> 💡

Выполнение всех пунктов повышает ваши шансы на успешный найм до 99%

</aside>

1. Использовать React, TypeScript, Tailwind
2. Логика работы соответствует видео и макетам
3. ⚠️ Меню должно быть написано с использованием JSX-нотации, то есть полностью компонентный подход, JSON/JS-like конфигурационные объекты не подойдут
4. Удобный компонентный API при котором интегрировать такое меню с внешним стейтом (роутер, localStorage, useState & etc.) не вызовет сложностей
5. Headless UI реализация – ваш компонент должен обеспечивать только логику работы, а внешний вид и стилизация должны находиться в компоненте-потребителе, который кроме стилей ничего больше не добавляет
6. Продемонстрировать гибкость выбранного подхода на примере интеграции меню с React Router, при этом React Router не может быть использован внутри вашего headless меню напрямую – вся логика роутинга должна находиться только в компоненте-потребителе
7. Оставить полезные комменты в коде