使用React和Ant设计库构建响应式可折叠侧边栏

许多开发者使用三栏式的网页设计架构，因为它提供了一种有效的方式来呈现内容。

在过去，设计一个完美的响应式侧边栏是一项艰巨的任务，需要单独用CSS进行元素操作。

然而，现代设计库，如Ant设计库，降低了构建边栏以及其他组件的复杂性。

先决条件

为了更好地理解和利用这篇文章，读者应该具备React.js和CSS的基本知识。这个项目是适合初学者的。

开始使用Ant Design Library

蚂蚁设计库是一个现代设计库，提供多种设计元素、组件和功能。

它是广泛使用的设计库之一，在前端Web开发中React 。

蚂蚁设计库被腾讯、阿里巴巴、百度等公司用于各自的用户界面中。

构建用户界面

为了更好地理解，我们将把构建用户界面（侧边栏和导航栏）的任务分解为以下各个步骤。

创建React应用程序

构建我们的响应式侧边栏的第一步是创建我们的React 应用程序。

我们通过打开我们的command 终端并运行下面的命令来完成这一工作。

npx create-react-app my-app

或者

yarn create-react-app my-app

将Ant-Design库添加到应用程序中

为了访问Ant-Design库和功能，我们需要安装我们的应用程序的@antd 和@ant-design/icons 的依赖。我们使用下面的命令来完成这个工作。

npm install @antd @ant-design/icons

或

Yarn add @antd @ant-design/icons

上述命令将安装ant-design 和icons 包到我们的React 应用程序。

安装完成后，我们通过运行下面的命令启动开发服务器。

Npm start

创建导航条组件

我们将创建一个Navbar.js 文件来容纳我们的src 文件夹中的导航条组件。

Navbar 组件通常会显示在页面上其他组件的正上方。因此，它将包含一个 、 、 和一个 。logo menu links texts icons button

为了实现这一点，我们在Navbar.js 文件中实现下面的代码片段。

import React, { useState } from "react"; //useState helps us manage our app state
import { Drawer, Button } from "antd"; //importing compnents from ant library
import { AlignRightOutlined } from "@ant-design/icons"; //importing ant design icons
import { MiniSidebar } from "./Sidebar ";
import "./Navbar.css"; //importing a css styling sheet

function NavBar() {
  const [shown, setShown] = useState(false);

  const showSidebar = () => {
    setShown(true);
  };

  const drawerClosed = () => {
    setShown(false);
  };

function LeftMenu({mode}) {
  return (
    <Menu mode={mode}>
    <Menu.Item key="mail">
      <Link to="/">Home</Link>
    </Menu.Item>
    <Menu.Item key="subscription">
      <Link to="/subscription">Subscription</Link>
    </Menu.Item>
  </Menu>
  )
}

function LeftMenu({mode}) {
 return (
      <Menu mode={mode}>
        <Menu.Item key="mail">
          <a href="/login">Signin</a>
        </Menu.Item>
        <Menu.Item key="app">
          <a href="/register">Signup</a>
        </Menu.Item>
      </Menu>
    )
}
  return (
    <nav
      className="menu"
      style={{ position: "fixed", zIndex: 5, width: "100%" }}
    >
      <div className="main-logo">
        <a href="/">Logo</a>
      </div>
      <div className="menu-container">
        <div className="left-menu">
          <LeftMenu mode="horizontal" />
        </div>
        <div className="right-menu">
          <RightMenu mode="horizontal" />
        </div>
        <Button
          className="small-screen-btn"
          type="primary"
          onClick={showSidebar}
        >
          <AlignRightOutlined size="medium" />
        </Button>
        <Drawer
          title="Sidebar Drawer"
          placement="left"
          className="menu-drawer"
          closable={false}
          onClose={drawerClosed}
          visible={shown}
        >
          <MiniSidebar />
        </Drawer>
      </div>
    </nav>
  );
}

export default NavBar;

定制和设计导航条组件的样式

在上面的步骤中，我们已经创建了一个原始的导航条，需要进行样式设计。要做到这一点，我们创建一个Navbar.css 文件，然后进行自定义。

在Navbar.css ，我们针对分配给各种元素的className ，并实现下面的代码片段。

@import "~antd/dist/antd.css";

.menu {
  border-bottom: solid 1px #f5e2e2;
  overflow: auto;
  padding: 0px 19px;
  box-shadow: 1 0 28px #dbd6d6;
  background-color: #fff;
}

.main-logo {
  width: 152px;
  float: left !important;
}

.main-logo a {
  padding: 18px 21px;
  font-size: 20px;
  display: inline-block;
}

.menu-container .ant-menu-item {
  padding: 0px 5px;
}

.menu-container .ant-menu-submenu-title {
  padding: 10px 20px;
}

.menu-container .ant-menu-item a,
.menu-container .ant-menu-submenu-title a {
  padding: 10px 15px;
}

.menu-container .ant-menu-horizontal {
  border-bottom: none;
}

.menu-container .left-menu {
  float: left;
}

.menu-container .right-menu {
  float: right;
}

.small-screen-btn {
  height: 33px;
  padding: 7px;
  margin-top: 9px;
  display: none !important;
  float: right;
  background: #3e91f7;
}

.menu-drawer .ant-drawer-body {
  padding: 0 1px !important;
}

.menu-drawer .ant-drawer-header {
  padding: 15px 23px !important;
}

@media (max-width: 700px) {
  .small-screen-btn {
    display: inline-block !important;
  }

  .left-menu,
  .right-menu {
    display: none !important;
  }

  .main-logo a {
    margin-left: -22px;
  }

  .menu-container .ant-menu-item,
  .menu-container .ant-menu-submenu-title {
    padding: 1.5px 19px;
  }

  .main-logo a {
    padding: 11px 19px;
  }
}

上面的代码段将把导航条放在页面的顶部，增加响应性，在小屏幕上显示一个抽屉，并为我们的应用程序组件提供额外的样式。

注意：确保在你的Navbar.js 中适当地导入Navbar.css 。

创建侧边栏组件

创建我们的侧边栏组件是很容易的。我们将重复创建Navbar.js 时的步骤。然而，这一次，文件名应该是Sidebar.js 。

Sidebar 组件是本文的重点，它将由以下元素组成

• 图标。
• 文本。
• 切换按钮。
• 迷你侧边栏组件。

我们随后将从我们先前安装的@antd 依赖关系中导入这些组件。

打开Sidebar.js 文件，然后添加下面的代码片段。

import React from "react";
import Icon, {
  EllipsisOutlined,
  GlobalOutlined,
  HomeOutlined,
  MessageOutlined,
  NotificationOutlined,
  PlaySquareOutlined,
  ReadOutlined,
  UserOutlined,
} from "@ant-design/icons";
import "./Sidebar.css";
export default function Sidebar() {
  function SidebarOption({ text, name, tag }) {
    return (
      <div className="sidebar-option">
        <Icon className="sidebar-icon" component={name} size="medium" />
        <h2>{text}</h2>
      </div>
    );
  }

  return (
    <div className="sidebar">
      <SidebarOption text="Home" name={HomeOutlined} />
      <SidebarOption text="Profile" name={UserOutlined} />
      <SidebarOption text="Messages" name={MessageOutlined} />
      <SidebarOption text="Notify" name={NotificationOutlined} />
      <SidebarOption text="News" name={ReadOutlined} />
      <SidebarOption text="Videos" name={PlaySquareOutlined} />
      <SidebarOption text="Explore" name={GlobalOutlined} />
      <SidebarOption text="More" name={EllipsisOutlined} />
    </div>
  );
}

export function MiniSidebar() {
  function SidebarOption({ text, name, tag }) {
    return (
      <div className="sidebar-option">
        <Icon className="sidebar-icon" component={name} size="medium" />
        <h3 style={{ paddingTop: "23px" }}>{text}</h3>
      </div>
    );
  }
  return (
    <div className="mini-sidebar">
      <SidebarOption text="Home" name={HomeOutlined} />
      <SidebarOption text="Profile" name={UserOutlined} />
      <SidebarOption text="Messages" name={MessageOutlined} />
      <SidebarOption text="Notify" name={NotificationOutlined} />
      <SidebarOption text="News" name={ReadOutlined} />
      <SidebarOption text="Videos" name={PlaySquareOutlined} />
      <SidebarOption text="Explore" name={GlobalOutlined} />
      <SidebarOption text="More" name={EllipsisOutlined} />
    </div>
  );
}

上面的代码片断将提供我们的侧边栏中所需要的所有元素，它还将提供一个mini-sidebar ，在中、小屏幕上显示。

注意：确保所有的图标都是从@ant-design/icons 依赖关系中导入的，如上所示。

定制和设计侧边栏组件的风格

现在是时候定制我们的Sidebar 。我们将继续包括样式和响应性，以改善Sidebar的外观。

要做到这一点，我们创建一个Sidebar.css 文件并实现下面的代码片段。

.mini-sidebar {
  display: none;
}
.sidebar {
  flex: 0.4;
  padding: 5px;
  box-shadow: 0 0 10px #d8d3d3;
  height: 100%;
  width: 15%;
  position: fixed;
  left: auto;
  top: 30px;
  margin-top: 20px;
  background-color: #fff;
  margin-top: 5vh;
}
@media (max-width: 767px) {
  .sidebar {
    top: 12px;
  }
}
@media (max-width: 700px) {
  .sidebar {
    display: none;
  }
  .mini-sidebar {
    display: inherit;
    top: 30px;
    left: 1%;
    margin-top: 20px;
    position: fixed;
    height: 100%;
    width: 30% !important;
  }
}

.sidebar-option {
  margin-top: 10px;
  height: fit-content;
  display: flex;
  padding-bottom: 5px;
  border: 1px solid #ccbcbc;
  border-radius: 20px;
  width: 80%;
  cursor: pointer;
  color: #1a1919;
}
.sidebar-active {
  background-color: #1c065e;
  border-radius: 20px;
  color: #f01cf0;
}
.sidebar-active h2 {
  color: #f01cf0;
}
.sidebar-icon {
  margin: 0 !important;
  color: red !important;
  align-self: center;
  margin-top: 10% !important;
  font-size: medium;
  padding: 5px;
}

.sidebar-option:hover {
  background-color: #cfd7dd;
  border-radius: 20px;
  transition: color 100ms ease-out;
}
.sidebar-option > h2 {
  font-size: medium;
  font-weight: 600;
  margin-right: 20px;
  padding-top: 26px;
}

上面的代码片段将为我们的边栏添加以下内容sidebar.

• 每当用户将鼠标悬停在侧边栏项目上时，就会有一个新的样式。
• 响应性。
• 字体大小和重量的调整。
• 字体和背景颜色。
• 边框。

注意：确保Sidebar.css 文件是在你的src 文件夹中创建的，并在你的Sidebar.js 中导入。

在网页上显示导航条和侧边栏组件

最后，我们需要在网页上显示我们的组件。

在App.js 文件中，导入Navbar和Sidebar两个组件，如下图所示。

import React from "react";
import NavBar from "./NavBar";
import Sidebar from "./Sidebar";  //importing our defined components

function App() {
  return (
    <div className="app">
      <Navbar/> //displaying our components
      <Sidebar/>
    </div>
  );
}

export default App;

当上面的代码片段在浏览器中正确呈现时，响应式的Navbar 和Sidebar 组件将以预期的样式显示。

此外，你可以通过互动和调整屏幕大小来查看Mini-sidebar ，并确认样式。

总结

在这篇文章中，我们用React.js和Ant-Design库创建了Navbar 和Sidebar 组件并对其进行了风格设计。

我希望你觉得这篇文章对你有很大的帮助。