React 中带下拉菜单的响应式侧边栏

---

您可能在您喜欢的某些网站上遇到过响应式侧边栏。此 Web 应用程序功能为用户提供了一种便捷的导航方式，方法是托管下拉菜单。您可以阅读本文以了解如何在 React 中整合带下拉菜单的响应式侧边栏。

先决条件

React 项目的执行需要您在 PC 上具备以下内容。

• 您需要一个 React 环境，这意味着一个可用的代码编辑器（我将使用 Visual Studio Code）和最新 Node.js 的安装。在您的 Nodejs 中使用 node -v 命令检查您是否正在运行 v20.17.0 或更高版本，以确保项目能够无缝编译。
• 您可以使用 create-react-app 命令设置 React 环境，但更多内容将在后续部分介绍。

项目结构

项目结构将适应您打算创建 React 应用程序的文件路径。在我的情况下，我将应用程序托管在一个名为 responsive-sidebar 的文件夹中，以符合任务的目标。下面是我的文件目录的屏幕截图，以帮助您了解文件结构。

方法

本节将分解您必须在 React 环境中执行的步骤。

步骤 1：设置 React 环境

从先决条件部分开始，您应该使用 create-react-app 命令在您首选的文件夹中创建 React 项目。本节中的其他步骤包括安装必要的依赖项，如 react-icons（用于图标）和 styled-components（用于样式）。

在终端中运行以下命令创建 React 应用程序，然后按 Enter 键执行。

npx create-react-app responsive-sidebar

cd responsive-sidebar

通过键入以下命令安装 react-icons。

npm install react-icons

安装依赖项是在终端中键入以下命令。

npm install styled-components

步骤 2：构建侧边栏和主组件结构

构建侧边栏和主组件的结构需要您调整 Apps.js 文件夹中的内容。您必须定义侧边栏、下拉菜单和主要内容区域的结构。为此，您可以使用 useState、Sidebar 和 DropDown 函数来管理侧边栏切换状态。

App.js：复制以下代码并将其粘贴到您的 App.js 文件中。

// App.js
import React, { useState } from 'react';
import './App.css'; // Custom styles for the sidebar

// Create a Sidebar component with an open and close toggle state
function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  // Render the Sidebar with a clickable hamburger icon 
  return (
    <div className="sidebar-container">
      {/* Hamburger Icon */}
      <div className="hamburger" onClick={toggleSidebar}>
        ☰
      </div>

      {/* Sidebar */}
      <div className={`sidebar ${isOpen ? 'open' : ''}`}>
        <ul>
          <li><a href="#dashboard"> TutorialsPoint Dashboard</a></li>
          <li><a href="#profile">Profile</a></li>
          <li><a href="#settings">Settings</a></li>
          <li><a href="#notifications">Notifications</a></li>
          <li><a href="#support">Support</a></li>
        </ul>
      </div>
    </div>
  );
}

export default Sidebar;

步骤 3：添加 CSS 以实现布局和响应性

CSS 样式部分是您可以自定义侧边栏项目的布局和响应性的位置。在 src 文件夹中创建一个新文件，并将其重命名为 App.css。

/* Sidebar styling for Sidebar.css */
 .sidebar-container {
     position: relative;
}
 .hamburger {
     font-size: 30px;
     cursor: pointer;
     padding: 10px;
}
 .sidebar {
     position: fixed;
     top: 0;
     left: -250px;
     height: 100%;
     width: 250px;
     background-color: purple;
     transition: left 0.3s ease;
     padding-top: 60px;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}
 .sidebar.open {
     left: 0;
}
 .sidebar ul {
     list-style-type: none;
     padding: 0;
}
 .sidebar ul li {
     padding: 15px 20px;
     text-align: left;
}
 .sidebar ul li a {
     text-decoration: none;
     color: white;
     font-size: 18px;
     display: block;
}
 .sidebar ul li:hover {
     background-color: #5d3b91;
    /* Set the sidebar background to purple on hover */
}
/* Ensure the backdrop of the main page is white */
 body {
     background-color: white;
     margin: 0;
     font-family: Arial, sans-serif;
}

输出

最后一步是启动 React 开发服务器，您可以在其中测试您的响应式侧边栏功能。React 响应式功能确保 Web 应用程序在移动设备上无缝运行。启动一个终端并导航到项目的目录，然后使用 npm start 命令。