Сохранение развернутого / свернутого состояния боковых панелей с помощью React и локального хранилища

Что мы строим?

Сегодня мы создадим боковую панель (боковую панель навигации), которая может расширяться, чтобы отображать значки + текст, и которая может сворачиваться, чтобы отображать только значки. И когда вы обновите страницу, состояние боковой панели будет сохранено. Или, другими словами, если вы сверните боковую панель и обновите страницу, она все равно будет свернута и не развернута.

Давайте начнем!

Перво-наперво, давайте настроим наше приложение для реагирования:

npx create-react-app sidebar-demo

cd в sidebar-demo и откройте его в текстовом редакторе.

Теперь внутри нашей папки src давайте создадим папку components, в которой мы будем хранить компонент боковой панели.

Внутри нашей папки компонентов можно создать файл Sidebar.js и файл Sidebar.css.

Внутри нашего Sidebar.js файла мы разместим следующий код:

И внутри нашего Sidebar.css файла:

Давайте продолжим и заменим код в нашем App.js файле следующим кодом:

Запустите err в браузере npm start, и мы получим следующее:

Разве это не странно? Конечно, это является! Но давайте сделаем немного лучше, давайте добавим значки и текст на нашу боковую панель.

Давайте добавим пакет react-icons npm install react-icons — save

В нашем Sidebar.js файле замените его содержимое следующим кодом:

А внутри нашего Sidebar.css файла добавьте следующие стили:

И если мы посмотрим назад в нашем браузере, мы получим следующее:

Вот о чем я говорю! Пока все хорошо, за исключением того, что сейчас значок переключателя меню еще не работает. Итак, давайте продолжим и добавим несколько обработчиков onClick, хуки useState и немного localStorage, чтобы немного оживить его!

Вернувшись в наш Sidebar.js файл, давайте настроим наш хук useState и соединим его с некоторой "логикой" localStorage:

Так что именно мы здесь делаем? Мы используем localStorage и получаем элемент "свернутая боковая панель" из localStorage. Затем мы устанавливаем состояние нашего isExpanded на true или false в зависимости от того, находится ли элемент «боковая панель со свернутой» на самом деле внутри localStorage. Если этот элемент НАХОДИТСЯ внутри localStorage, тогда мы устанавливаем isExpanded в false, иначе мы устанавливаем его в true.

Первоначально у нас всегда будет развернутая боковая панель, пока мы не нажмем на переключатель меню, который в этот момент установит элемент «боковая панель свернутый» внутри localStorage и сохранит состояние нашей боковой панели как свернутое.

Давайте продолжим и обработаем событие onClick для нашего переключателя меню, внутри нашего Sidebar.js файла найдите следующую строку кода:

<RiMenuLine className="sidebar-icon" />

и замените его на:

<RiMenuLine
  className="sidebar-icon"
  onClick={handleToggler}
/>

И прямо перед нашим оператором возврата внутри нашего компонента боковой панели добавьте следующую функцию-обработчик:

Когда мы нажимаем оператор if, мы видим, развернута ли в настоящее время боковая панель при нажатии на наш переключатель меню, и если он развернут, то мы хотим его свернуть. Чтобы свернуть его, мы setIsExpanded установим значение false, а также хотим добавить в localStorage элемент «свернутая боковая панель», который имеет значение true, чтобы сохранить состояние боковой панели, как мы упоминали выше. И код вне оператора if запускается только в случае сбоя нашего оператора if или, другими словами, если боковая панель уже была свернута, когда был нажат наш переключатель меню. И если он уже был свернут, чтобы снова развернуть его, мы устанавливаем IsExpanded в значение true, а также удаляем элемент «боковая панель свернутый» из localStorage.

Теперь у нас есть вся «логика» для развертывания и сворачивания боковой панели, теперь нам просто нужно увидеть ее в действии. Итак, давайте добавим наши последние строки кода!

Внутри Sidebar.js замените следующую строку кода:

<div className="Sidebar">
  //...
</div>

с участием:

<div className={isExpanded ? "Sidebar" : "Sidebar collapsed">
  //...
</div>

Также добавьте в Sidebar.css следующие стили:

И бум! Теперь у нас должно получиться что-то вроде этого:

Если вы хотите посмотреть, что происходит с localStorage, откройте инструменты разработчика и перейдите на вкладку «Приложение». Затем разверните «Локальное хранилище» слева и нажмите http://localhost:3000. Как только вы его откроете, нажмите на переключатель меню на боковой панели и посмотрите, что происходит внутри полей «Ключ / значение» локального хранилища. Как вы можете видеть, когда вы нажимаете переключатель меню, когда он раскрыт, он добавляет элемент «боковая панель-свернута» со значением true, а если вы обновите, этот элемент все еще находится в локальном хранилище! И когда вы расширяете боковую панель, элемент удаляется из локального хранилища. Именно это мы и настроили внутри нашей функции-обработчика в Sidebar.js!

Спасибо за то, что следили за мной, и желаю всего хорошего!