Initial closed menu button.

This commit is contained in:
Daniel Gent 2021-08-27 15:52:33 +02:00
parent 2a9cba2e98
commit f5cb30e4ff
3 changed files with 51 additions and 0 deletions

View 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);
}

View 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

View File

@ -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>