Плавный переход с рабочего стола на мобильный
В настоящее время все веб-сайты должны быть отзывчивыми, чтобы хорошо выглядеть на разных устройствах. Создание адаптивного веб-сайта повышает удобство работы пользователей и может даже повлиять на SEO.
В этой статье я покажу вам, как создать адаптивную навигационную панель с помощью React. Вот предварительный просмотр того, что мы будем строить.
Мы будем создавать навигационную панель, используя React, CSS и иконки реакции. Мы также настроим базовую маршрутизацию с помощью response-router. Его можно использовать в качестве макета для вашего следующего веб-сайта. Получайте удовольствие, добавляя CSS и создавая страницы по своему усмотрению.
Начиная
Начнем с инициализации шаблона create-react-app. Мы очистим некоторые файлы, которые не используем, и сбросим некоторые стили для нашего приложения. В файл App.css добавьте следующий код.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
Затем создайте папку компонентов, и наша файловая структура будет выглядеть так.
В нашем приложении на каждой странице будет отображаться панель навигации. Мы также будем использовать response-router для настройки различных маршрутов, по которым мы можем перемещаться. Мы будем создавать четыре разные страницы: «Главная», «О нас», «Магазин» и «Контакты».
В папке с компонентами создадим все необходимые файлы, как показано ниже. Один файл для каждого компонента страницы, один файл для панели навигации и один файл для CSS панели навигации.
На страницах «Главная», «О нас», «Магазин» и «Контакты» на каждой странице будет отображаться div. Вы можете создавать и стилизовать эти страницы по своему усмотрению. В нашем примере каждый компонент страницы будет отображать текст и выглядеть примерно так.
Настройка маршрутов с помощью React Router
Теперь, когда у нас созданы компоненты нашей страницы, давайте настроим маршруты с помощью response-router. Сначала мы установим response-router-dom.
npm install react-router-domЕсли вы новичок в использовании response-router, ознакомьтесь со статьей ниже, чтобы начать работу.
В свой App.js файл импортируйте компоненты Navbar, Home, About, Shop и Contact. Вам также потребуется импортировать компоненты BrowserRouter, Switch и Route из библиотеки response-router. Настройте маршруты на разные страницы и сохраните файл. Ваш App.js файл будет выглядеть так.
Как вы можете видеть выше, для того, чтобы панель навигации отображалась на каждой странице, мы оставляем компонент панели навигации за пределами компонента Switch.
Создание панели навигации
Далее мы будем работать над созданием и стилизацией навигационной панели.
Панель навигации будет состоять из логотипа слева и 4 ссылок на наши страницы справа. В мобильной версии 4 ссылки превратятся в значок гамбургер-меню. А пока давайте сосредоточимся на представлении на рабочем столе.
В операторе возврата файла Navbar.js мы добавим тег nav, который будет содержать логотип, и ul, который будет содержать ссылки на страницы. Наш логотип будет ссылаться на главную страницу. В ul создайте 4 элемента li, каждый со ссылкой на соответствующую страницу: «Дом», «О нас», «Магазин» и «Контакты».
В файл Navbar.css добавьте следующий код для стилизации панели навигации.
Весь класс .navbar будет отображаться как гибкий, с justify-content, установленным на space-between. Это создаст пространство между логотипом и 4 ссылками.
Класс .nav-links отображается в виде сетки для равномерного отображения ссылок на страницы. Мы можем добиться этого, установив grid-template-columns на repeat(4, auto).
В настоящее время панель навигации должна выглядеть так.
Делаем навигационную панель адаптивной
Чтобы создать отзывчивость навигационной панели, мы скроем ссылки и покажем значок гамбургер-меню, когда ширина страницы станет меньше 500 пикселей.
Мы воспользуемся парочкой иконок из пакета react-icons. Начнем с установки в наш проект.
npm install react-icons
Если вы никогда раньше не использовали иконки реакции, прочтите статью ниже, чтобы начать работу.
Сначала импортируйте два значка из библиотеки react-icons в Navbar.js.
import { FiMenu, FiX } from 'react-icons/fi';
Мы также используем хук useState, чтобы определить, открыты или закрыты ссылки на панели навигации в мобильном представлении.
const [open, setOpen] = useState(false);
Затем добавьте в оператор return значки меню и закрытия. Мы добавим свойство onClick для установки состояния и отображения правильного значка. Если для состояния установлено значение true, это означает, что дисплей будет открыт, поэтому мы хотим показать значок закрытия. Если установлено значение false, мы хотим отображать значок меню.
<div onClick={() => setOpen(!open)} className="nav-icon">
{open ? <FiX /> : <FiMenu />}
</div>
Мы также установим свойство onClick для каждой ссылки, которое будет закрывать отображение панели навигации всякий раз, когда мы выбираем страницу. Каждая ссылка должна выглядеть примерно так.
<Link to="/" className="nav-link" onClick={() => setOpen(false)}>
Home
</Link>
Наконец, мы обновим className в теге ul. Если для открытого состояния установлено значение true, мы добавим активный класс, который будет отображать ссылки на панели навигации.
В файле Navbar.css давайте теперь создадим медиа-запрос для max-width размером 500 пикселей.
Нам нужно установить относительную позицию класса .navbar, чтобы мы могли установить класс .nav-links в абсолютную позицию. Мы создадим простой переход, чтобы ссылки были видны с левой стороны. Для этого мы устанавливаем свойство left в классе .nav-links на -100%, а свойство left в классе .nav-links.active на 0.
Заключение
Теперь вы можете использовать это как шаблон для своего следующего веб-сайта. Поиграйте с CSS и создавайте страницы так, как вам нравится!
Если вы хотите ознакомиться с полным кодом, загляните в репозиторий GitHub ниже.
Спасибо за чтение! Очень важно сделать ваши веб-сайты адаптивными, и я надеюсь, что эта статья помогла вам создать адаптивную навигационную панель с помощью React.
