mirror of
https://github.com/vercel/commerce.git
synced 2025-07-04 04:01:21 +00:00
Initial closed menu button.
This commit is contained in:
parent
2a9cba2e98
commit
f5cb30e4ff
25
components/common/Navbar/MenuButton.module.css
Normal file
25
components/common/Navbar/MenuButton.module.css
Normal file
@ -0,0 +1,25 @@
|
||||
.menuButton {
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.menuButton::after,
|
||||
.menuButton::before {
|
||||
background-color: #f4f4f4;
|
||||
content: '';
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: transform 0.2s ease;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.menuButton::after {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
|
||||
.menuButton::before {
|
||||
transform: translateY(-5px);
|
||||
}
|
24
components/common/Navbar/MenuButton.tsx
Normal file
24
components/common/Navbar/MenuButton.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { FC } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import s from './MenuButton.module.css'
|
||||
|
||||
interface MenuButtonProps {
|
||||
isOpen: boolean
|
||||
onClick: any
|
||||
}
|
||||
|
||||
const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={s.menuButton}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
MenuButton.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default MenuButton
|
@ -2,6 +2,7 @@ import { FC } from 'react'
|
||||
import Link from 'next/link'
|
||||
import s from './Navbar.module.css'
|
||||
import NavbarRoot from './NavbarRoot'
|
||||
import MenuButton from './MenuButton'
|
||||
import { Logo, Container } from '@components/ui'
|
||||
import { Searchbar, UserNav } from '@components/common'
|
||||
|
||||
@ -35,6 +36,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<MenuButton isOpen onClick={() => {}} />
|
||||
<div className="flex items-center justify-end flex-1 space-x-8">
|
||||
<UserNav />
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user