From c6979ee55e5a20c1f9cb2523daf77eb5dcaeb083 Mon Sep 17 00:00:00 2001 From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com> Date: Tue, 1 Oct 2024 17:05:16 +0200 Subject: [PATCH] feat: add cashout to navbar + core refactor --- .../Global/Header/components/index.tsx | 36 +++ src/components/Global/Header/index.tsx | 239 +++++++++--------- src/styles/theme.ts | 15 +- 3 files changed, 165 insertions(+), 125 deletions(-) create mode 100644 src/components/Global/Header/components/index.tsx diff --git a/src/components/Global/Header/components/index.tsx b/src/components/Global/Header/components/index.tsx new file mode 100644 index 00000000..dc7632d6 --- /dev/null +++ b/src/components/Global/Header/components/index.tsx @@ -0,0 +1,36 @@ +import { Box } from '@chakra-ui/react' +import Link from 'next/link' +import { HTMLAttributes } from 'react' + +export const NavItemBox = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ) +} + +export const NavLink = ({ + href, + children, + ...rest +}: { href: string; children: React.ReactNode } & HTMLAttributes) => { + return ( + + + {children} + + + ) +} diff --git a/src/components/Global/Header/index.tsx b/src/components/Global/Header/index.tsx index 4f175412..3020d07b 100644 --- a/src/components/Global/Header/index.tsx +++ b/src/components/Global/Header/index.tsx @@ -1,29 +1,16 @@ 'use client' + import React, { useEffect, useState } from 'react' -import { - Box, - Flex, - Text, - Stack, - Collapse, - useDisclosure, - Button, - Menu, - MenuButton, - MenuItem, - MenuList, -} from '@chakra-ui/react' +import { Box, Flex, Text, Stack, Collapse, useDisclosure } from '@chakra-ui/react' import { useLottie, LottieOptions } from 'lottie-react' - import Link from 'next/link' -import Image from 'next/image' - -import * as assets_icons from '@/assets/icons' import * as assets from '@/assets' import * as utils from '@/utils' import { useWeb3Modal } from '@web3modal/wagmi/react' import { useAccount } from 'wagmi' import { useRouter } from 'next/navigation' +import { breakpoints, emToPx } from '@/styles/theme' +import { NavItemBox, NavLink } from './components' const defaultLottieOptions: LottieOptions = { animationData: assets.HAMBURGER_LOTTIE, @@ -40,17 +27,29 @@ const defaultLottieStyle = { } export const Header = () => { - const { isOpen, onToggle } = useDisclosure() + const { isOpen, onToggle, onClose } = useDisclosure() const [isOpenState, setIsOpenState] = useState(false) useEffect(() => { - setIsOpenState(!isOpen) - }, [isOpen]) + const handleMediaQueryChange = () => { + if (window.innerWidth >= emToPx(breakpoints.lg) && isOpen) { + onClose() + setIsOpenState(false) + } + } + + window.addEventListener('resize', handleMediaQueryChange) + + // Clean up the listener when the component unmounts + return () => { + window.removeEventListener('resize', handleMediaQueryChange) + } + }, [isOpen, onClose]) return ( - +
{ @@ -59,12 +58,12 @@ export const Header = () => { }} > logo - peanut protocol + peanut protocol
{ - + @@ -104,7 +103,7 @@ const MenuToggle = ({ toggle, isOpen }: { toggle: () => void; isOpen: boolean }) justifyContent={'center'} alignContent={'center'} alignItems={'center'} - display={{ base: 'flex', md: 'none' }} + display={{ base: 'flex', lg: 'none' }} onClick={() => { toggle() goToAndStop(isOpen ? 37 : 0, true) @@ -116,60 +115,25 @@ const MenuToggle = ({ toggle, isOpen }: { toggle: () => void; isOpen: boolean }) ) } -const MenuLinks = () => { +const ToolsDropdown = () => { const [showMenu, setShowMenu] = useState(false) - const { open: web3modalOpen } = useWeb3Modal() - const { address, isConnected } = useAccount() - const router = useRouter() - - const handleClick = (e: React.MouseEvent) => { - // Prevent the default behavior of the link - e.preventDefault() - // Force a reload of the current route - if (window?.location.pathname == '/send') window?.location.reload() - else router.push('/send') - } return ( - - - send - - - - request - - BETA - - - + <>
- + + + {showMenu && (
{ @@ -180,17 +144,6 @@ const MenuLinks = () => { }} className="absolute left-0 z-10 w-48 origin-top-right bg-black p-0 font-medium uppercase text-white no-underline shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" > - - - cashout - - BETA - - - { )}
- + + + {showMenu && (
- - - cashout - - BETA - - - {
)}
+ + ) +} - +const MenuLinks = () => { + const { open: web3modalOpen } = useWeb3Modal() + const { address, isConnected } = useAccount() + const router = useRouter() + + const handleClick = (e: React.MouseEvent) => { + // Prevent the default behavior of the link + e.preventDefault() + // Force a reload of the current route + if (window?.location.pathname == '/send') window?.location.reload() + else router.push('/send') + } + + return ( + + + send + + + + request + + + BETA + + + + cashout + + BETA + + + + docs - + - - Profile - - + + + Profile + + + + + ) } diff --git a/src/styles/theme.ts b/src/styles/theme.ts index eb1c45f7..4019efb3 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -5,7 +5,18 @@ const config = { initialColorMode: 'light' as 'light', useSystemColorMode: false, } -const breakpoints = { +/** + * Breakpoints for responsive design. + * + * The breakpoints are defined in em units and their equivalent in pixels are: + * - xs: 22em (352px) + * - sm: 30em (480px) + * - md: 48em (768px) + * - lg: 62em (992px) + * - xl: 80em (1280px) + * - 2xl: 96em (1536px) + */ +export const breakpoints = { xs: '22em', sm: '30em', md: '48em', @@ -14,6 +25,8 @@ const breakpoints = { '2xl': '96em', } +export const emToPx = (em: string) => parseFloat(em) * 16 + export const theme = extendTheme({ breakpoints, config,