如何在 React for mobile 视图中添加汉堡菜单和功能？

Question

我正在做一个React项目，我正在努力使我的标题部分更具移动响应性。目前，我在左侧部分有三个链接(Home, About和Login)，一个居中的徽标/标题，以及右侧的搜索和购物车按钮。

我想添加一个出现在移动设备上的汉堡包图标(当屏幕宽度小于768px时)，它将切换包含Home, About和Login链接的菜单。但是，我希望将搜索和购物车按钮保留在这个汉堡包菜单之外，并保持它们在标题右侧的位置。我想为汉堡包部分添加功能代码

下面是我当前的Header组件代码(包括相关的样式):

Header.jsx

import { useEffect, useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { TbSearch } from "react-icons/tb";
import { CgShoppingCart } from "react-icons/cg";
import Search from "./Search/Search";
import Cart from "../Cart/Cart";
import { Context } from "../../utils/context";
import "./Header.scss";
const Header = () => {
const [scrolled, setScrolled] = useState(false);
const [showCart, setShowCart] = useState(false);
const [showSearch, setShowSearch] = useState(false);
const { cartCount } = useContext(Context);
const navigate = useNavigate()
const handleScroll = () => {
const offset = window.scrollY;
if (offset > 200) {
setScrolled(true);
}
else {
setScrolled(false)
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll)
}, []);
return (
<>
<header className={`main-header ${scrolled ? 'sticky-header' : ''}`}>
<div className="header-content">
<ul className="left">
<li onClick={() => navigate("/")}>Home</li>
<li onClick={() => navigate("/about")}>About</li>
<li onClick={() => navigate("/login")}>Login</li>
</ul>
<div className="center" onClick={() => navigate("/")}>GOLOC.</div>
<div className="right">
<TbSearch onClick={() => setShowSearch(true)} />
<span className="cart-icon" onClick={() => setShowCart(true)}>
<CgShoppingCart />
{!!cartCount && <span>{cartCount}</span>}
</span>
</div>
</div>
</header>
{showCart && <Cart setShowCart={setShowCart} />}
{showSearch && <Search setShowSearch={setShowSearch} />}
</>
);
};
export default Header;

Header.scss

@import "../../css-config/mixins.scss";
.main-header {
width: 100%;
padding: 0 20px;
background-color: #212121;
color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 99;
@include md {
padding: 0 40px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
max-width: 1200px;
margin: 0 auto;
@include md {
height: 80px;
}
.left {
list-style-type: none;
display: none;
gap: 25px;
@include md {
display: flex;
}
li {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
@include sm {
// visibility: hidden;
}
}
}
.center {
font-size: 22px;
font-weight: 700;
cursor:

我试着在网上查找解决方案，并尝试了各种CSS属性和React库(如React -icons)，但我似乎无法得到想要的结果。任何帮助或指导将非常感激!

这是这个项目的Github仓库:https://github.com/aditya9-2/GOLOC

Answer 1

我的目的是制作一个带有汉堡包图标的按钮，它只在移动视图上显示，所以你可以使用媒体查询。同时在移动视图中隐藏这三个按钮。

.hamburger{
display:none; 
}
@media screen and (max-width:768px){
.hamburger{
display: block or inline-block
}
.left{
display: none;
}
}

然后你可以使用一个onclick函数来显示左边，并添加一些css使它按列伸缩，所以它看起来是堆叠的

Answer 2

使用CSS媒体查询"@media screen and (max-width: your-breakpoint>)"让你的菜单在小屏幕上消失。你也可以使用React "useState"钩子来切换按钮并更改菜单的显示/隐藏类。

你可以这样做:

Header.jsx

const [showMobileMenu , setShowMobileMenu ] = useState(false);

<header className={`main-header ${scrolled ? "sticky-header" : ""}`}>
<div className="header-content">
<ul className={`left ${showMobileMenu ? 'show-mobile-menu':''}`}>
<li onClick={() => navigate("/")}>Home</li>
<li onClick={() => navigate("/about")}>About</li>
<li onClick={() => navigate("/login")}>Login</li>
</ul>
<div className="center" onClick={() => navigate("/")}>
GOLOC.
</div>
<div className="right">
<TbSearch onClick={() => setShowSearch(true)} />
<span className="cart-icon" onClick={() => setShowCart(true)}>
<CgShoppingCart />
{!!cartCount && <span>{cartCount}</span>}
</span>
<button type="button" className="mobile-toggler" onClick={()=> setShowMobileMenu(!showMobileMenu)}>hamburger button</button>
</div>
</div>
</header>

Header.scss

.mobile-toggler { display: none; } // default hide hamburger button
@media screen and (max-width:767px) {
.mobile-toggler { 
display: block; 
// style your hamburger button
}
.left {
// this will hide menu for small screen
// you can use display:none/block as you desired
visibility: hidden; 
// these are optional you can add your style here
width: 280px;
height: 100vh;
position: fixed;
top: 0;
left: -15px;
padding: 20px;
background-color: #fff;
color: #000;
transition: 400ms ease;
}
// This will handle show/hide after you toggle your hamburger button
.left.show-mobile-menu {
visibility: visible;
left: 0;
}
}

希望这对你有帮助:)