Dropdown-menu

Описание

Компонент DropdownMenu с поддержкой четырёх позиций и динамической подстройкой при скролле или исчезновении триггера из вьюпорта.

Стек

• HTML5
• CSS3
• React
• JavaScript
• TypeScript
• Vite

Структура проекта

• src/ — исходные файлы проекта.
• src/components/ — папка с JSX компонентами.
• index.html — HTML-файл главной страницы.
• src/main.tsx — файл с основным кодом.
• src/index.css — файл с основным кодом CSS.
• src/hooks/ — папка с хуками проекта.

Инструкция по запуску

1. Скачайте или клонируйте репозиторий.
2. Выполните команды в терминале

npm install
npm run dev

Ссылка на репозиторий:

https://github.com/PolliSun/dropdown-menu.git

Дополнительные команды

1. npm run format - – автоматически форматирует весь код проекта в соответствии с настройками prettier.
2. npm run lint - проверяет код на соответствие правилам eslint, выявляет ошибки и предупреждения.

Реализованный функционал

• DropdownMenu автоматически умеет определять сторону открытия контента и раскрывать его по клику в ту сторону, где будет больше места относительно триггера.
• DropdownMenu триггер может быть любым элементом интерфейса. Кнопкой, блоком, картинкой.
• Клик снаружи или повторный клик на триггер закрывают активный дропдаун.
• Всего один активный DropdownMenu. Если открывается другой то текущий будет закрыт.
• Если при скролле страницы дропдауну не хватает места для отрисовки, то он перерисоваться в новое для корректного отображения.
• При выходе элемента триггера из вьюпорта дропдаун скрывается, а при появлении отображать снова.
• Клик на пункт меню дропдауна вызывает соответствующий ему колбэк и после закрывать дропдаун. Выбранный пункт подсвечивается, показывая результат действия колбэка прямо в списке.

Что сделано

• Добавила основной компонент DropdownMenu.
• Добавила хук useClickOutside который отвечает за работу клика вне элемента.
• Добавила хук useDropdownPosition который отвечает за позиционирование и видимость дропдауна.
• Для иконок использовала библиотеку feather-icons.
• В проекте настроила code и style линтинг с помощью eslint и prettier.

Сделано в рамках тестового задания.