Skip to content

Feature/PS-6-Header

Ghost User requested to merge feature/PS-6-Header into main
  • Навбар из двух частей: слева линка на профиль, справа основная навигация.
  • Если пользователь авторизован, в секции навигации справа отображаются линки, в противном случае - кнопка Log In.
  • Добавил адаптив - по мере уменьшения ширины экрана список ссылок сокращается до кнопки-бургуера, нажав на которую ссылки появляются в виде вертикального меню.
  • В этот раз компоненты разбивал на styled и обычные компоненты. Отдельно директорий под навбар не создавал. Если нужно, то сделаю так и с другими компонентами, которые мы уже написали.
  • Вертикальный навбар (для мобильных устройств) закинул порталом в <div id='modal'> рядом с <div id='root' />. Также рядом добавил оверлей, т.к. точно не знал, как у нас будет выглядеть менюшка. На будущее оверлей, думаю, пригодится для модалок.
  • Я забыл поменять иконки с react-icons на font-awesome. Поменяю в следующих коммитах.
  • В компоненте Header есть dummy-состояние для эмуляции авторизации.
  • Вроде бы ничего не забыл.

Десктоп.

image

Адаптив: Сначала появляется бургер

image

На более маленьких экранах максимальная ширина становится больше

image

После нажатия на бургер открывается вот такое меню. Нажатие на линку закроет меню и подгрузит соответствующую страницу.

image

Edited by Ghost User

Merge request reports