diff --git a/public/assets/close.svg b/public/assets/close.svg
new file mode 100644
index 0000000..acd5d30
--- /dev/null
+++ b/public/assets/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/assets/hamburger.svg b/public/assets/hamburger.svg
new file mode 100644
index 0000000..0ccd93c
--- /dev/null
+++ b/public/assets/hamburger.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/HamburgerMenu/HamburgerMenu.tsx b/src/components/HamburgerMenu/HamburgerMenu.tsx
new file mode 100644
index 0000000..77d3c51
--- /dev/null
+++ b/src/components/HamburgerMenu/HamburgerMenu.tsx
@@ -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 (
+ <>
+
+ {isOpen && (
+
+
+
+ )}
+ >
+ )
+}
+
+export default HamburguerMenu
diff --git a/src/components/HamburgerMenu/index.ts b/src/components/HamburgerMenu/index.ts
new file mode 100644
index 0000000..acf2fa0
--- /dev/null
+++ b/src/components/HamburgerMenu/index.ts
@@ -0,0 +1 @@
+export { default as HamburgerMenu } from './HamburgerMenu'
diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx
index 5f23b62..bb60793 100644
--- a/src/components/Header/Header/Header.tsx
+++ b/src/components/Header/Header/Header.tsx
@@ -1,3 +1,5 @@
+import HamburguerMenu from '@/components/HamburgerMenu/HamburgerMenu'
+import { breakpoints } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import Link from 'next/link'
import React from 'react'
@@ -11,7 +13,9 @@ const Header: React.FC = () => {
-
+
+
+
= () => {
+
{/*
bc1qa...vehs9
@@ -60,6 +65,7 @@ const Logo = styled.img`
const UserActions = styled.div`
display: flex;
align-items: center;
+ gap: 8px;
a {
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)`
// width: 140px;
// `
diff --git a/src/components/Header/Navbar/Navbar.tsx b/src/components/Header/Navbar/Navbar.tsx
index 53fbab3..d63afea 100644
--- a/src/components/Header/Navbar/Navbar.tsx
+++ b/src/components/Header/Navbar/Navbar.tsx
@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import Link from 'next/link'
import { useRouter } from 'next/router'
@@ -5,7 +6,7 @@ import React from 'react'
interface NavbarProps {}
-const items = [
+export const navItems = [
{
label: 'Countdown',
href: '/countdown',
@@ -49,7 +50,7 @@ const Navbar: React.FC = () => {
return (
- {items.map((item, index) =>
+ {navItems.map((item, index) =>
item?.isDisabled === true ? (
@@ -73,9 +74,7 @@ const Navbar: React.FC = () => {
const Navigation = styled.ul`
display: flex;
align-items: center;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
+
gap: 41px;
list-style-type: none;
@@ -93,7 +92,13 @@ const Navigation = styled.ul`
}
@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;
}
`}
+
+ @media (max-width: ${breakpoints.sm}px) {
+ font-size: 12px;
+ line-height: 16px;
+ }
`
const NavItemContainer = styled.div`