Skip to content

Commit

Permalink
core: refactor nav components and use chakra ui only for breakpoint c…
Browse files Browse the repository at this point in the history 
…hanges
  • Loading branch information
@nezz0746
nezz0746 committed Oct 1, 2024
1 parent 263f52f commit 8cd25a1
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 88 deletions.
36 changes: 36 additions & 0 deletions src/components/Global/Header/components/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Box
className="h-full w-full hover:bg-white hover:text-black"
px={{
base: 8,
sm: 4,
lg: 2,
}}
>
{children}
</Box>
)
}

export const NavLink = ({
href,
children,
...rest
}: { href: string; children: React.ReactNode } & HTMLAttributes<HTMLAnchorElement>) => {
return (
<NavItemBox>
<Link
{...rest}
href={href}
className="flex h-full w-full items-center justify-start py-2 uppercase sm:w-max sm:justify-center"
>
{children}
</Link>
</NavItemBox>
)
}
181 changes: 93 additions & 88 deletions src/components/Global/Header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
'use client'

import React, { useEffect, useState } from 'react'
import { Box, Flex, Text, Stack, Collapse, useDisclosure } from '@chakra-ui/react'
import { useLottie, LottieOptions } from 'lottie-react'
Expand All @@ -9,6 +10,7 @@ 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,
Expand Down Expand Up @@ -113,71 +115,25 @@ const MenuToggle = ({ toggle, isOpen }: { toggle: () => void; isOpen: boolean })
)
}

const MenuLinks = () => {
const ToolsDropdown = () => {
const [showMenu, setShowMenu] = useState<boolean>(false)
const { open: web3modalOpen } = useWeb3Modal()
const { address, isConnected } = useAccount()
const router = useRouter()

const handleClick = (e: React.MouseEvent<HTMLAnchorElement, 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 (
<Stack
align={{ base: 'start', md: 'center' }}
justify={{ base: 'center', md: 'center' }}
direction={{ base: 'column', md: 'row' }}
// pt={ 4}
pb={{ base: 4, md: 0 }}
height="100%"
gap={0}
>
<Link
href={'/send'}
onClick={handleClick}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:w-max sm:justify-center sm:px-8"
>
<Text display="block"> send</Text>
</Link>
<Link
href={'/request/create'}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:w-max sm:justify-center sm:px-8"
>
<Text display="block" className="flex items-center">
request
<span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-purple-1">
BETA
</span>
</Text>
</Link>
<Link
href={'/cashout'}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:w-max sm:justify-center sm:px-8"
>
<Text display="block">
cashout
<span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-purple-1">
BETA
</span>
</Text>
</Link>
<>
<div className="relative hidden h-full sm:block">
<button
onMouseEnter={() => {
setShowMenu(true)
}}
onMouseLeave={() => {
setShowMenu(false)
}}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:w-max sm:justify-center sm:px-8"
>
tools
</button>
<NavItemBox>
<button
onMouseEnter={() => {
setShowMenu(true)
}}
onMouseLeave={() => {
setShowMenu(false)
}}
className="flex h-full w-full items-center justify-start py-2 uppercase sm:w-max sm:justify-center"
>
tools
</button>
</NavItemBox>
{showMenu && (
<div
onMouseEnter={() => {
Expand Down Expand Up @@ -210,14 +166,16 @@ const MenuLinks = () => {
)}
</div>
<div className="relative block h-full w-full sm:hidden">
<button
onClick={() => {
setShowMenu(!showMenu)
}}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:w-max sm:justify-center sm:px-8"
>
<Text display="block"> tools</Text>
</button>
<NavItemBox>
<button
onClick={() => {
setShowMenu(!showMenu)
}}
className="flex h-full w-full items-center justify-start py-2 uppercase sm:w-max sm:justify-center"
>
<Text display="block"> tools</Text>
</button>
</NavItemBox>
{showMenu && (
<div className="bg-black p-0 font-medium uppercase text-white no-underline shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Link
Expand All @@ -241,28 +199,75 @@ const MenuLinks = () => {
</div>
)}
</div>
</>
)
}

<Link
href={'https://docs.peanut.to'}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:w-max sm:justify-center sm:px-8"
>
const MenuLinks = () => {
const { open: web3modalOpen } = useWeb3Modal()
const { address, isConnected } = useAccount()
const router = useRouter()

const handleClick = (e: React.MouseEvent<HTMLAnchorElement, 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 (
<Stack
align={{ base: 'start', md: 'center' }}
justify={{ base: 'center', md: 'center' }}
direction={{ base: 'column', md: 'row' }}
pb={{ base: 4, md: 0 }}
height="100%"
gap={0}
>
<NavLink href={'/send'} onClick={handleClick}>
<Text display="block">send</Text>
</NavLink>
<NavLink href={'/request/create'}>
<Text display="block" className="flex items-center">
request
</Text>
<span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-purple-1">
BETA
</span>
</NavLink>
<NavLink href={'/cashout'}>
<Text display="block">cashout</Text>
<span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-purple-1">
BETA
</span>
</NavLink>
<ToolsDropdown />
<NavLink href={'https://docs.peanut.to'}>
<Text display="block"> docs</Text>
</Link>
</NavLink>

<Link
href={'/profile'}
className=" flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:hidden sm:w-max sm:justify-center sm:px-8"
>
<Text display="block"> Profile</Text>
</Link>
<button
onClick={() => {
web3modalOpen()
}}
className="flex h-full w-full items-center justify-start px-2 py-2 uppercase hover:bg-white hover:text-black sm:hidden sm:w-max sm:justify-center sm:px-8"
>
<Text display="block"> {isConnected ? utils.shortenAddress(address ?? '') : 'Create or Connect'}</Text>
</button>
<NavItemBox>
<Link
href={'/profile'}
className=" flex h-full w-full items-center justify-start py-2 uppercase sm:hidden sm:w-max sm:justify-center"
>
<Text display="block"> Profile</Text>
</Link>
</NavItemBox>
<NavItemBox>
<button
onClick={() => {
web3modalOpen()
}}
className="flex h-full w-full items-center justify-start py-2 uppercase sm:hidden sm:w-max sm:justify-center"
>
<Text display="block">
{' '}
{isConnected ? utils.shortenAddress(address ?? '') : 'Create or Connect'}
</Text>
</button>
</NavItemBox>
</Stack>
)
}
Expand Down

0 comments on commit 8cd25a1

Please sign in to comment.