Сделать каркас приложения на react с использованием semantic ui

[table]ЗадачаНеобходимо сделать каркас приложения на react js, с использованием semantic ui.

В качестве менеджера состояний необходимо использовать локально useState или mobx

Табу на Jquery. (Не использовать)

При разработке компонентов использовать по максимуму готовые из semantic ui, например sidebar, menu, menu.item и т.д.

Постараться не использовать классы, реализовать функционально.

Пункты меню в левой панеле (SideBar) должны иметь один уровень вложенности, также должны быть заголовки разделов как на скриншоте.

Настройка пунктов меню должна производиться в отдельном месте, например

MenuItems.js. Этот файл должен содержать массив из заголовков, пунктов и

подпунктов, а также маршрут и компонент, куда ведет маршрут. React

route dom использовать 6 версии.

На выходе должно получиться приложение, состоящее из 4-х компонентов:

1. Компонент верхней навигации

2. Выпадающее меню профиля

3. Компонент SideBar (Должен сворачиваться и разворачиваться по клику на кнопку как на скрине. В мобильной версии поведение должно быть

такоеже. Это уже реализовано в Semantic UI, просто при добавлении в

Sidebar меню, на мобилках не должно поплыть.)

4. Пустой компонент, который просто вставить в центр, там планируется размещать контентную часть. То есть, при переходе на какой

либо маршрут, будет обновляться только этот компонент.Обязательные требованияЗалейте готовый билд себе на хост, для проверки, и дайте ссылку.

Не использовать дополнительные либы или еще чтото, кроме указанных. Если есть острая необходимость, то предварительно необходимо

согласовать.[/table]