Построение отзывчивой боковой панели с помощью React и стилизованных компонентов


Зачем существует сайдбар/навбар?

Навигация — это самый простой способ перемещения по сайту. Навигационные ссылки могут быть отображены либо в сайдбаре, либо в панели навигации. Оба сервиса широко используются большинством веб-сайтов.

Что мы будем создавать?

В этой статье мы будем создавать простой, но отзывчивый сайдбар, шаг за шагом используя ReactJS, styled-components и React Router DOM в качестве наших основных зависимостей. Эта боковая панель будет полностью отзывчивой на всех устройствах, демонстрация которой представлена здесь.

Профи: Мы также изучим одну из структур папок в этом react-приложении.

Предварительные условия

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

  • HTML, CSS, JavaScript
  • ReactJS
  • Styled-components
  • React Router DOM

Более того, вам также необходимо иметь:

  • NodeJS (стабильная версия)
  • NPM и/или Yarn

Создание компонента

В Command Prompt перейдите в каталог, где вы хотите создать проект, и введите:

1. Установите приложение React

# With npm
npx create-react-app react-sidebar

# With yarn
yarn create react-app react-sidebar
Войдите в полноэкранный режим Выйти из полноэкранного режима

где react-sidebar — имя директории проекта. Теперь откройте эту директорию проекта в вашем любимом редакторе кода. Я буду использовать Visual Studio Code.

Теперь сохраните index.js, App.js и App.css и удалите остальные файлы/папки внутри папки src. Это очистит большую часть приложения react.

В папке public сохраните файл index.html и удалите все остальные файлы/папки.

2. Добавьте пакеты в приложение react

Установите Material UI Icons, React Router DOM, styled-components. Выполните следующую команду, чтобы установить их в наше приложение react:

# With npm
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react react-router-dom styled-components

# With yarn
yarn add @mui/material @emotion/react @emotion/styled react-router-dom styled-components
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте соединим все приложение с react-router-dom, чтобы его функции / компоненты можно было использовать везде. Замените код в src/index.js на следующий:

// src/index.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
Войти в полноэкранный режим Выйти из полноэкранного режима

Прежде всего, нам нужно использовать react-router-dom для создания ссылок на различные страницы внутри нашего приложения. Итак, нам нужно связать все приложение с его родительским компонентом, которым является BrowserRouter. Это даст нам доступ к использованию почти всех компонентов, которые может предложить упомянутый пакет.

Для этого сначала мы импортируем родительский компонент и обернем компонент App внутрь родительского компонента. Этот компонент App охватывает все наше приложение, и мы можем использовать React Router в любом месте нашего приложения.

Запустите приложение в браузере с помощью npm start или yarn start и перейдите на localhost:3000 для просмотра изменений.

Теперь давайте создадим маршруты / страницы с помощью react-router-dom. Замените код в src/App.js следующим кодом:

// src/App.js
import { Routes, Route } from "react-router-dom";
import { DynamicItem, Sidebar, dummyData } from "./components";
import "./App.css";

function App() {
  return (
    <div id="main">
      <Sidebar>
        <Routes>
          <Route path="/" element={<DynamicItem page="homepage" />} />
          {dummyData &&
            dummyData.map((item, index) => (
              <Route
                key={index}
                path={item.path}
                element={<DynamicItem page={item.name} />}
              />
            ))}
        </Routes>
      </Sidebar>
    </div>
  );
}

export default App;
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь мы импортируем Routes, Route из react-router-dom, который поможет нам создавать страницы в нашем приложении. Мы также импортируем компонент Sidebar, который мы создадим через некоторое время, dummyData, некоторые случайные данные, которые включают пути к нашим страницам, DynamicItem, фиктивную страницу, которая отображает название страницы при переходе на нее.

Далее нам нужно использовать компонент Sidebar. Этот компонент будет принимать дочерние элементы в качестве реквизитов, чтобы он был виден везде, когда мы переходим между страницами. Сразу после этого нам нужно добавить компонент Routes, контейнер, который охватывает наши страницы/маршруты по мере их создания, чтобы приложение знало, что это контейнер маршрутов и он содержит страницы.

Теперь, единственное, что нам нужно сделать, это добавить нужные нам маршруты. Мы знаем, что dummyData содержит пути к страницам, мы можем просмотреть данные, чтобы получить их, и использовать компонент Route для каждого пути. Компонент Route принимает два свойства, path, куда будет осуществляться переход, и element, который является компонентом, который будет отображаться на этой странице/маршруте.

Теперь нам нужно добавить основные стили в наше приложение. Эти стили определяют только макет нашего приложения. Замените код в src/App.css следующим кодом:

Примечание: Мы также можем создать некоторые стили с помощью styled-components. Вы можете делать стилизацию как угодно, но здесь я использовал css для базовой стилизации.

/* src/App.css */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;

  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

#main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.btn {
  margin: 1rem 1rem 0 0;
  padding: 0.25rem 0.5rem;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  outline: none;
  border: 1px solid #808080;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.btn:hover {
  background-color: #e4e3e34d;
}

#page {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: capitalize;
  font-size: 1rem;
  overflow: hidden;
}

@media screen and (min-width: 468px) {
  #page {
    font-size: 3rem;
  }

  .btn {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
}

.app__brand__text {
  font-size: 2rem;
  font-weight: 700;
  color: #5a8dee;
  margin-left: 0.5rem;
}

/* Sidebar toggle button starts */
.outer__circle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #5f97ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer__circle::after {
  position: absolute;
  top: 0.225rem;
  left: 0.215rem;
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #fff;
}

.inner__circle {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #5f97ef;
  z-index: 100;
}

.inner__circle::after {
  position: absolute;
  top: 0.125rem;
  left: 0.15rem;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
}
/* Sidebar toggle button ends */
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы сбрасываем все стили в приложении react, используя псевдоселектор *, чтобы настроить все приложение так, как нам нужно. Более того, мы также определяем стили для родительского контейнера div приложения с именем класса main. Мы также определяем стили для кнопки, которая будет использоваться позже в компоненте DynamicItem.

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

Давайте создадим файл, в котором будут храниться иконки, которые будут использоваться в нашем приложении react.

Перейдите в папку src и создайте в ней новую папку под именем components. Внутри папки components создайте новый файл с именем Icons.js и добавьте в него следующий код:

// src/components/Icons.js
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import WebOutlinedIcon from "@mui/icons-material/WebOutlined";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SubjectOutlinedIcon from "@mui/icons-material/SubjectOutlined";
import GppGoodOutlinedIcon from "@mui/icons-material/GppGoodOutlined";
import AdminPanelSettingsOutlinedIcon from "@mui/icons-material/AdminPanelSettingsOutlined";
import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
import InputOutlinedIcon from "@mui/icons-material/InputOutlined";

import ArrowRightOutlinedIcon from "@mui/icons-material/ArrowRightOutlined";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

export {
  HomeOutlinedIcon as HomeIcon,
  WebOutlinedIcon as LayoutIcon,
  CalendarMonthOutlinedIcon as CalendarIcon,
  PersonOutlineOutlinedIcon as UserIcon,
  SubjectOutlinedIcon as InvoiceIcon,
  GppGoodOutlinedIcon as RolesIcon,
  CalendarTodayOutlinedIcon as PagesIcon,
  AdminPanelSettingsOutlinedIcon as AuthIcon,
  ListAltOutlinedIcon as WizardIcon,
  InputOutlinedIcon as ModalIcon,
  ArrowBackIcon,
  ArrowRightOutlinedIcon as ArrowIcon,
};
Вход в полноэкранный режим Выйти из полноэкранного режима

В этом файле мы импортируем все иконки, которые будем использовать в нашем приложении, и экспортируем их в один файл. Это поможет нам импортировать иконки из одного файла вместо того, чтобы использовать несколько строк для импорта иконок.

Аналогично, мы создадим новый файл в папке src/components под именем Data.js. Этот файл будет содержать наши фиктивные данные, которые мы будем использовать в нашем приложении. Откройте файл Data.js и добавьте в него следующий код:

// src/components/Data.js
import {
  HomeIcon,
  LayoutIcon,
  CalendarIcon,
  InvoiceIcon,
  UserIcon,
  RolesIcon,
  PagesIcon,
  AuthIcon,
  WizardIcon,
  ModalIcon,
} from "./Icons";

export const SIDEBAR_DATA = [
  {
    id: 1,
    name: "dashboards",
    path: "dashboards",
    icon: <HomeIcon />,
  },
  {
    id: 2,
    name: "layouts",
    path: "layouts",
    icon: <LayoutIcon />,
  },
  {
    id: 3,
    name: "calendar",
    path: "calendar",
    icon: <CalendarIcon />,
  },
  {
    id: 4,
    name: "invoice",
    path: "invoice",
    icon: <InvoiceIcon />,
  },
  {
    id: 5,
    name: "users",
    path: "users",
    icon: <UserIcon />,
  },
  {
    id: 6,
    name: "roles & permissions",
    path: "roles",
    icon: <RolesIcon />,
  },
  {
    id: 7,
    name: "pages",
    path: "pages",
    icon: <PagesIcon />,
  },
  {
    id: 8,
    name: "authentication",
    path: "authentication",
    icon: <AuthIcon />,
  },
  {
    id: 9,
    name: "wizard examples",
    path: "wizard",
    icon: <WizardIcon />,
  },
  {
    id: 10,
    name: "modal examples",
    path: "modal",
    icon: <ModalIcon />,
  },
];
Войти в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что мы импортируем иконки из одного файла вместо того, чтобы использовать несколько строк для импорта. Таким образом, мы также можем избежать избыточности.

В этом файле мы определяем массив объектов, каждый из которых содержит данные для наших страниц, т.е. id, имя, путь, иконку. Это все данные, которые будут использоваться во всем нашем приложении. Не стесняйтесь расширять его настолько, насколько вам захочется.

Еще одна вещь, которую нам нужно сделать, это создать централизованный файл, который будет экспортировать все наши файлы, так же как и файл Icons.js. Создайте файл index.js в папке src/components и добавьте в него следующий код:

// src/components/index.js
export { default as Sidebar } from "./Sidebar";
export { default as SidebarItems } from "./Sidebar/SidebarItems";
export { default as DynamicItem } from "./Routes/[item]";

export { SIDEBAR_DATA as dummyData } from "./Data";
Вход в полноэкранный режим Выход из полноэкранного режима

В этом файле мы следуем той же процедуре, что и в файле Icons.js.

Обратите внимание, что файлы, экспортированные как default, должны быть импортированы как default, а файлы без default должны быть импортированы без него.

Теперь давайте создадим файл, который будет отрисовывать элементы страницы. Вы правильно догадались! Мы создадим компонент DynamicItem. Создайте папку внутри src под именем Routes и внутри этой папки создайте файл [item].jsx и добавьте в него следующий код:

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

// src/components/Routes/[item].jsx
import { Link } from "react-router-dom";
import { ArrowBackIcon } from "../Icons";

const Item = (props) => {
  const { page } = props;
  if (page === "homepage") {
    return <div id="page">{page}</div>;
  } else {
    return (
      <div id="page">
        <Link to="/">
          <button className="btn">
            <ArrowBackIcon /> Back to Home
          </button>
        </Link>
        {page}
      </div>
    );
  }
};

export default Item;
Вход в полноэкранный режим Выход из полноэкранного режима

Мы знаем, что создали маршруты для нужных нам страниц. Теперь нам нужно создать страницы, которые будут отображаться.

Здесь мы импортируем компонент Link из react-router-dom, иконку спины из файла Icons.js. Мы знаем, что за ней нет другой страницы / маршрута, но главная страница содержит другие страницы / маршруты. Поэтому, если маршрут /, нам просто нужно отобразить компонент, в противном случае нам также нужно отобразить кнопку «Назад», которая вернет нас на главную страницу.

Мы используем компонент Link для перехода обратно на homepage, поскольку страница уже существует. Вспомните, что мы создали маршруты внутри src/App.js.

Теперь перейдем к главному элементу — компоненту боковой панели. Перейдите в папку src и создайте в ней новую папку под названием Sidebar и создайте в ней новый файл с именем index.jsx. Это будет основной файл, который будет поглощать почти все файлы. Добавьте в него следующий код:

// src/components/Sidebar/index.jsx
import React, { useState } from "react";

import {
  Children,
  SidebarContainer,
  SidebarWrapper,
  SidebarLogoWrapper,
  SidebarLogo,
  SidebarBrand,
  SidebarToggler,
} from "./SidebarStyles";
import BrandLogo from "./BrandLogo.svg";

import { SidebarItems } from "..";

const MOBILE_VIEW = window.innerWidth < 468;

export default function Sidebar({ children }) {
  const [displaySidebar, setDisplaySidebar] = useState(!MOBILE_VIEW);

  const handleSidebarDisplay = (e) => {
    e.preventDefault();
    if (window.innerWidth > 468) {
      setDisplaySidebar(!displaySidebar);
    } else {
      setDisplaySidebar(false);
    }
  };

  return (
    <React.Fragment>
      <SidebarContainer displaySidebar={displaySidebar}>
        <SidebarWrapper>
          <SidebarLogoWrapper displaySidebar={displaySidebar}>
            {/* Logo wrapper starts */}
            <SidebarLogo href="#">
              <span className="app-brand-logo demo">
                <img src={BrandLogo} alt="Brand logo" />
              </span>
              <SidebarBrand
                displaySidebar={displaySidebar}
                className="app__brand__text"
              >
                Frest
              </SidebarBrand>
            </SidebarLogo>
            {/* Logo wrapper ends */}
            {/* Toggle button */}
            <SidebarToggler
              displaySidebar={displaySidebar}
              onClick={handleSidebarDisplay}
            >
              <div className="outer__circle">
                <div className="inner__circle" />
              </div>
            </SidebarToggler>
          </SidebarLogoWrapper>
            {/* Render the SidebarItems component */}
          <SidebarItems displaySidebar={displaySidebar} />
        </SidebarWrapper>
      </SidebarContainer>
            {/* Render the children */}
      <Children displaySidebar={displaySidebar}>{children}</Children>
    </React.Fragment>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это файл, в котором мы будем создавать Sidebar. Мы импортируем менеджер состояний useState из React для управления видом боковой панели, стили из другого файла, он будет создан в той же директории, логотип бренда Не стесняйтесь использовать любой логотип, который вы хотите, SidebarItems файл, который будет рендерить наши элементы из данных.

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

В итоге мы возвращаем фрагмент React и отображаем логотип бренда, кнопку переключения, элементы боковой панели и дочерние элементы.

Обратите внимание, что мы создаем стили с помощью styled-components, которые могут принимать параметры и помогут нам в отображении боковой панели.

Теперь давайте создадим файл, который будет применять все необходимые стили к боковой панели. Перейдите в src/components/Sidebar и создайте новый файл под именем SidebarStyles.js и добавьте в него следующий код:

// src/components/Sidebar/SidebarStyles.js
import styled from "styled-components";

// Children Component
export const Children = styled.div`
  width: 100%;
  height: 100%;
  margin-left: ${({ displaySidebar }) => (displaySidebar ? "15rem" : "5rem")};
  @media (max-width: 468px) {
    margin-left: 5rem;
  }
`;

export const SidebarWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
`;

export const SidebarLogoWrapper = styled.div`
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: ${({ displaySidebar }) =>
    displaySidebar ? "space-between" : "center"};
  align-items: center;
  @media (max-width: 468px) {
    justify-content: center;
  }
`;

export const SidebarLogo = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  @media (max-width: 468px) {
    display: none;
  }
`;

export const SidebarBrand = styled.span`
  display: ${({ displaySidebar }) => (displaySidebar ? "block" : "none")};
`;

export const SidebarToggler = styled.button`
  cursor: pointer;
  display: ${({ displaySidebar }) => (displaySidebar ? "block" : "none")};
  @media (max-width: 468px) {
    display: block;
  }
`;

// SidebarItem styles
export const ItemsList = styled.ul`
  list-style: none;
`;

export const ItemContainer = styled.li`
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.25rem;
  border-radius: 0.2rem;
  cursor: pointer;
  &:hover {
    background: #eaeced;
  }
  &.active {
    background-color: #dbe4f3;
  }
`;

export const ItemWrapper = styled.div`
  display: flex;
  align-items: center;
  color: #7c7788;
`;

export const ItemName = styled.span`
  margin-left: ${({ displaySidebar }) => (displaySidebar ? "0.5rem" : "0")};
  display: ${({ displaySidebar }) => (displaySidebar ? "block" : "none")};
  text-transform: capitalize;
`;

// Sidebar Container
export const SidebarContainer = styled.div`
  position: absolute;
  left: 0;
  width: ${({ displaySidebar }) => (displaySidebar ? "15rem" : "5rem")};
  height: 100vh;
  padding: 0.75rem;
  background: #f3f4f4;
  transition: width 350ms ease;
  border-right: 1px solid #d4d8dd;
  overflow-x: hidden;
  ${({ displaySidebar }) =>
    displaySidebar && "box-shadow: 8px 0px 12px 0px rgba(0,0,0,0.1)"};
  ${ItemWrapper} {
    justify-content: ${({ displaySidebar }) => !displaySidebar && "center"};
  }
  &:hover {
    ${({ displaySidebar }) =>
      !displaySidebar && "box-shadow: 8px 0px 12px 0px rgba(0,0,0,0.1)"};
    @media (min-width: 468px) {
      width: ${({ displaySidebar }) => !displaySidebar && "15rem"};
      ${SidebarLogoWrapper} {
        justify-content: ${({ displaySidebar }) =>
          !displaySidebar && "space-between"};
      }
      ${SidebarBrand} {
        display: ${({ displaySidebar }) => !displaySidebar && "block"};
      }
      ${SidebarToggler} {
        display: ${({ displaySidebar }) => !displaySidebar && "block"};
      }
      ${ItemWrapper} {
        justify-content: ${({ displaySidebar }) =>
          !displaySidebar && "flex-start"};
      }
      ${ItemName} {
        display: ${({ displaySidebar }) => !displaySidebar && "block"};
        margin-left: ${({ displaySidebar }) => !displaySidebar && "0.5rem"};
      }
    }
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 3px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #eaeced;
    &:hover {
      background: #d5e0f3;
    }
  }
  @media (max-width: 468px) {
    width: 5rem;
  }
`;
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь мы создаем стили в соответствии с состоянием, которое мы создали внутри Sidebar.jsx. Вспомните, что мы передали параметры этим компонентам. Мы можем использовать эти параметры для отображения и скрытия того, что нам нужно.

Обратите внимание на иерархию. Для того чтобы управлять дочерним компонентом из родительского компонента, дочерний компонент должен быть объявлен раньше родительского.

Теперь давайте создадим файл, который будет отображать все элементы Sidebar. В том же каталоге создайте новый файл под именем SidebarItems.jsx и добавьте в него следующий код:

// src/components/Sidebar/SidebarItems.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
  ItemsList,
  ItemContainer,
  ItemWrapper,
  ItemName,
} from "./SidebarStyles";

import { dummyData } from "..";

const SidebarItems = ({ displaySidebar }) => {
  const [activeItem, setActiveItem] = useState(0);

  return (
    <ItemsList>
      {dummyData.map((itemData, index) => (
        <ItemContainer
          key={index}
          onClick={() => setActiveItem(itemData.id)}
          {/* Adding active class when the user clicks */}
          className={itemData.id === activeItem ? "active" : ""}
        >
          <Link to={itemData.path}>
            <ItemWrapper>
              {itemData.icon}
              <ItemName displaySidebar={displaySidebar}>
                {itemData.name}
              </ItemName>
            </ItemWrapper>
          </Link>
        </ItemContainer>
      ))}
    </ItemsList>
  );
};

export default SidebarItems;
Вход в полноэкранный режим Выйти из полноэкранного режима

В этом файле мы используем useState для управления активным элементом боковой панели, Link из React Router для перенаправления пользователя на страницу, фиктивные данные из src/components/index.js и стили из src/components/Sidebar/SidebarStyles.js.

Внутри главной функции мы создаем список, а внутри списка отображаем фиктивные данные и визуализируем их с помощью стилизованных компонентов, которые мы импортировали. Обратите внимание, что мы также создали активный псевдоселектор внутри SidebarStyles.js, который будет стилизовать активный элемент. Класс active добавляется к элементу только в том случае, если пользователь нажимает на него.

Здесь мы также используем компонент Link из React Router для каждого элемента, чтобы перейти к элементу, который нажимает пользователь.

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

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

Ресурсы:

  1. Живая демонстрация
  2. Исходный код
  3. styled-components
  4. React Router DOM

Следите за другими моими блогами на моем сайте.

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

Оцените статью
devanswers.ru
Добавить комментарий