From 8cd25a1f5a7e1ce2b43b95d39163305fbdbbc5f7 Mon Sep 17 00:00:00 2001 From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com> Date: Tue, 1 Oct 2024 15:56:47 +0200 Subject: [PATCH] core: refactor nav components and use chakra ui only for breakpoint changes --- .../Global/Header/components/index.tsx | 36 ++++ src/components/Global/Header/index.tsx | 181 +++++++++--------- 2 files changed, 129 insertions(+), 88 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 f050a50f..3020d07b 100644 --- a/src/components/Global/Header/index.tsx +++ b/src/components/Global/Header/index.tsx @@ -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' @@ -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, @@ -113,71 +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 - - - - - - cashout - - BETA - - - + <>
- + + + {showMenu && (
{ @@ -210,14 +166,16 @@ const MenuLinks = () => { )}
- + + + {showMenu && (
{
)}
+ + ) +} - +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 + + + + + ) }