feat: add hamburger menu
This commit is contained in:
parent
173199fab4
commit
0e012a9ef2
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.0833 4.23913L10.2608 3.41663L6.99999 6.67746L3.73916 3.41663L2.91666 4.23913L6.17749 7.49996L2.91666 10.7608L3.73916 11.5833L6.99999 8.32246L10.2608 11.5833L11.0833 10.7608L7.82249 7.49996L11.0833 4.23913Z" fill="white"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 338 B |
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.5" y="1" width="27" height="27" stroke="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 12.1667V11H19.25V12.1667H8.75ZM8.75 15.0833H19.25V13.9167H8.75V15.0833ZM8.75 18H19.25V16.8333H8.75V18Z" fill="white"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 337 B |
|
@ -0,0 +1,54 @@
|
||||||
|
import { breakpoints } from '@/configs/ui.configs'
|
||||||
|
import styled from '@emotion/styled'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Navbar from '../Header/Navbar/Navbar'
|
||||||
|
|
||||||
|
const Button = styled.button`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: 1px solid rgb(var(--lsd-border-primary));
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const HamburguerMenuContainer = styled.div`
|
||||||
|
@media (min-width: ${breakpoints.sm}px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 58px;
|
||||||
|
left: 0;
|
||||||
|
padding: 16px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid rgb(var(--lsd-border-primary));
|
||||||
|
background: black;
|
||||||
|
|
||||||
|
gap: 24px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const HamburguerMenu = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button onClick={() => setIsOpen(!isOpen)}>
|
||||||
|
<img
|
||||||
|
src={isOpen ? '/assets/close.svg' : '/assets/hamburger.svg'}
|
||||||
|
alt="Hamburguer Menu"
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
{isOpen && (
|
||||||
|
<HamburguerMenuContainer>
|
||||||
|
<Navbar />
|
||||||
|
</HamburguerMenuContainer>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HamburguerMenu
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as HamburgerMenu } from './HamburgerMenu'
|
|
@ -1,3 +1,5 @@
|
||||||
|
import HamburguerMenu from '@/components/HamburgerMenu/HamburgerMenu'
|
||||||
|
import { breakpoints } from '@/configs/ui.configs'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
@ -11,7 +13,9 @@ const Header: React.FC<NavbarProps> = () => {
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<Logo src="/assets/logo.svg" alt="Logo" />
|
<Logo src="/assets/logo.svg" alt="Logo" />
|
||||||
</Link>
|
</Link>
|
||||||
<Navbar />
|
<DesktopNavbar>
|
||||||
|
<Navbar />
|
||||||
|
</DesktopNavbar>
|
||||||
<UserActions>
|
<UserActions>
|
||||||
<Link
|
<Link
|
||||||
href="https://discord.com/invite/logosnetwork"
|
href="https://discord.com/invite/logosnetwork"
|
||||||
|
@ -23,6 +27,7 @@ const Header: React.FC<NavbarProps> = () => {
|
||||||
<Icon src="/icons/discord-white.svg" alt="Discord" />
|
<Icon src="/icons/discord-white.svg" alt="Discord" />
|
||||||
</SocialButton>
|
</SocialButton>
|
||||||
</Link>
|
</Link>
|
||||||
|
<HamburguerMenu />
|
||||||
{/* <WalletButton>
|
{/* <WalletButton>
|
||||||
<WalletAddress>bc1qa...vehs9</WalletAddress>
|
<WalletAddress>bc1qa...vehs9</WalletAddress>
|
||||||
<Icon src="/assets/btc.svg" alt="Wallet icon" />
|
<Icon src="/assets/btc.svg" alt="Wallet icon" />
|
||||||
|
@ -60,6 +65,7 @@ const Logo = styled.img`
|
||||||
const UserActions = styled.div`
|
const UserActions = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -91,6 +97,16 @@ const SocialButton = styled(Button)`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const DesktopNavbar = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
// const WalletButton = styled(Button)`
|
// const WalletButton = styled(Button)`
|
||||||
// width: 140px;
|
// width: 140px;
|
||||||
// `
|
// `
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { breakpoints } from '@/configs/ui.configs'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
@ -5,7 +6,7 @@ import React from 'react'
|
||||||
|
|
||||||
interface NavbarProps {}
|
interface NavbarProps {}
|
||||||
|
|
||||||
const items = [
|
export const navItems = [
|
||||||
{
|
{
|
||||||
label: 'Countdown',
|
label: 'Countdown',
|
||||||
href: '/countdown',
|
href: '/countdown',
|
||||||
|
@ -49,7 +50,7 @@ const Navbar: React.FC<NavbarProps> = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Navigation>
|
<Navigation>
|
||||||
{items.map((item, index) =>
|
{navItems.map((item, index) =>
|
||||||
item?.isDisabled === true ? (
|
item?.isDisabled === true ? (
|
||||||
<NavItemContainer key={index}>
|
<NavItemContainer key={index}>
|
||||||
<NavItem isDisabled active={isActivePath(item.href)}>
|
<NavItem isDisabled active={isActivePath(item.href)}>
|
||||||
|
@ -73,9 +74,7 @@ const Navbar: React.FC<NavbarProps> = () => {
|
||||||
const Navigation = styled.ul`
|
const Navigation = styled.ul`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
gap: 41px;
|
gap: 41px;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
|
@ -93,7 +92,13 @@ const Navigation = styled.ul`
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
display: none;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
left: unset;
|
||||||
|
transform: none;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -115,6 +120,11 @@ const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
|
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const NavItemContainer = styled.div`
|
const NavItemContainer = styled.div`
|
||||||
|
|
Loading…
Reference in New Issue