侧边栏不起作用，因为应该

Question

我正在尝试在React应用中创建一个侧栏，但它无法正常工作。

这是我的Navbar组件

import React from "react";
import './Navbar.css';

export default function Navbar({openSideBar}) {

  return (
    <>
      <div className="nav-bar">
        <div className="burger" onClick={openSideBar}>
          <i className="ri-menu-line"></i>
        </div>
        <div className="title">AmProMotors</div>
      </div>
    </>
  );
}

这是我的边栏组件

import React from 'react'
import './SideBar.css'

export default function SideBar(SideBar) {

  return (
    <div className={SideBar?"side-bar-open side-bar" : 'side-bar'}> // Problem is here i think
        <li>Home</li>
        <li>Contact Us</li>
        <li>About Us</li>
        <li>Add New</li>
    </div>
  )
}

这是我的应用程序组件，它具有打开和关闭侧栏的状态

import Singup from "../Authentication/Singup/Singup";
import Dashboar from "../UI/Dashboard";
import Login from "../Authentication/Login/Login";
import { Container } from "react-bootstrap";
import { AuthProvider } from "../../context/AuthContext";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Updateprofile from "../Authentication/UpdateProfile/Updateprofile";
import Dashboard from "../UI/Dashboard";
import PrivateRoute from "../Authentication/PrivateRoute/PrivateRoute";
import Forgotpassword from "../Authentication/ForgotPassword/Forgotpassword";
import Navbar from "../UI/navbar";
import AboutUs from "../UI/About Us";
import ContactUs from "../UI/Contact Us";
import Addnew from "../UI/Addnew";
import { useState } from 'react'
import SideBar from "../UI/Sidebar/SideBar";

function App() {

  const [sideBar, setSideBar] = useState(false);

  function toggleSideBar(){
    setSideBar(true);
    console.log('clicked');
  }

  return (
    <Router>
      <AuthProvider>
        <Navbar openSideBar={toggleSideBar} />
        <SideBar sideBar={sideBar} />
        <Routes>
          <Route exact path="/" element={<Dashboar />} />
          <Route
            path="/update-profile"
            element={
              <PrivateRoute>
                <Updateprofile />
              </PrivateRoute>
            }
          />
          <Route path="/signup" element={<Singup />} />
          <Route path="/login" element={<Login />} />
          <Route path="/forgot-password" element={<Forgotpassword />} />
          <Route path="/update-profile" element={<Updateprofile />} />
          <Route path="/about-us" element={<AboutUs />} />
          <Route path="/contact-us" element={<ContactUs />} />
          <Route path="/add-new" element={<Addnew />} />
        </Routes>
      </AuthProvider>
    </Router>
  );
}

export default App;

我认为这个问题是侧栏组件，但我不确定这是我的侧边栏的CSS

.side-bar{
    position: absolute;
    background-color: black;
    color: white;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    transition: all 0.4s ease;
} 

.side-bar li{
    list-style: none;
    padding: 1rem 2rem;
    border-bottom: solid rgba(255, 255, 255) 1px;
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-weight: 300;
}

.side-bar li:hover{
    background-color: whitesmoke;
    color: black;
}

.side-bar-open{
    transform: translateX(0%);
    transition: all 0.4s ease;
}

Answer 1

侧边栏组件中的问题。您需要从道具重组侧栏道具。

import React from 'react'
import './SideBar.css'

export default function SideBar({ sideBar }) { // here is the fix

  return (
    <div className={sideBar ? "side-bar-open side-bar" : 'side-bar'}>
        <li>Home</li>
        <li>Contact Us</li>
        <li>About Us</li>
        <li>Add New</li>
    </div>
  )
}