我正在 gatsby 中构建响应式导航栏,其中汉堡菜单在移动设备上从左到右打开(可以通过单击页面或单击屏幕右侧的关闭图标关闭)。>
设计现在已更改为在单击时从上到下显示菜单动画,并且出于某种原因,关闭图标在使用顶部动画时不显示。我试过检查这是否是由于宽度问题/z-index 问题 - Navbox
对于左右动画,宽度方向相同,但更改了 z-index(以确保关闭图标位于 Navbox
的顶部)给了我 0 个更改。
除了我遗漏的宽度/z-index 之外,还有其他问题吗?因为即使当我尝试导航到其他页面时,网址也会更改,但导航栏不会隐藏。
谢谢!
import React, { useState, useCallback } from 'react'
import styled from 'styled-components'
import NavbarLinks from './NavbarLinks'
import LanguageMenu from './LanguageMenu'
import MenuIcon from '@material-ui/icons/Menu'
import CloseIcon from '@material-ui/icons/Close'
const Navigation = styled.div`
box-sizing: border-box;
margin: 0px;
font-family: Arial;
height: 8vh;
display: flex;
background-color: white;
position: fixed;
top: 0;
width: 100%;
justify-content: space-between;
text-transform: uppercase;
width: 100%;
white-space: nowrap;
align-self: center;
text-transform: capitalize;
z-index: 500;
@media (max-width: 1000px) {
box-sizing: border-box;
position: fixed;
height: 8vh;
}
`
const Toggle = styled.div`
display: none;
height: 100%;
cursor: pointer;
padding: 0 10vw;
@media (max-width: 1000px) {
display: flex;
flex-direction: column;
}
`
const Navbox = styled.div`
display: flex;
height: 100%;
align-items: center;
padding-left: 15%;
z-index: 300;
border: solid;
border-color: pink;
@media (max-width: 1000px) {
flex-direction: column;
position: fixed;
width: 100%;
padding: 0;
justify-content: flex-start;
padding-top: 10vh;
background-color: black;
transition: all 0.3s ease-in;
// left: ${props => (props.open ? '-100%' : '0')};
top: ${props => (props.open ? '0' : '-150%')};
}
`
const Hamburger = styled(MenuIcon)`
padding-top: 60%;
flex-wrap: wrap;
color: red;
align-self: center;
`
const Close = styled(CloseIcon)`
color: white;
position: absolute;
top: 1.2rem;
right: 1.5rem;
background: transparent;
cursor: pointer;
border: solid;
border-color: yellow;
z-index: 301;
`
const Navbar = () => {
const [navbarOpen, setNavbarOpen] = useState(false)
const closeNav = useCallback(() => setNavbarOpen(value => !value))
return (
<Navigation>
<Toggle navbarOpen={navbarOpen} onClick={() => setNavbarOpen(!navbarOpen)}>
{navbarOpen ? <Hamburger open />: <Hamburger />}
</Toggle>
{navbarOpen ? (
<Navbox>
<Close onClick={closeNav}/>
<NavbarLinks/>
</Navbox>
) : (
<Navbox open>
<NavbarLinks />
</Navbox>
)}
<LanguageMenu/>
</Navigation>
)
}
export default Navbar