From 3f32cde4cc80e34826a15ddf5e58ccc7f06be1f9 Mon Sep 17 00:00:00 2001 From: Daniil Polienko Date: Mon, 18 Nov 2024 19:39:49 +0300 Subject: [PATCH] fix: header --- apps/common/components/Header.tsx | 36 +---- apps/common/components/ModalMobileMenu.tsx | 152 ++++++++++++++++++ .../components => common}/icons/IconArrow.tsx | 0 apps/common/icons/IconBurger.tsx | 20 +++ apps/common/icons/IconClose.tsx | 42 +++++ .../icons/IconDiscord.tsx | 0 .../icons/IconParagraph.tsx | 0 .../icons/IconTwitter.tsx | 0 apps/landing/components/common/EarnCard.tsx | 17 +- apps/landing/components/common/Header.tsx | 72 ++------- apps/landing/components/sections/Footer.tsx | 71 +------- apps/landing/components/sections/Hero.tsx | 7 +- .../components/sections/WaysToEarn.tsx | 2 +- 13 files changed, 245 insertions(+), 174 deletions(-) create mode 100644 apps/common/components/ModalMobileMenu.tsx rename apps/{landing/components => common}/icons/IconArrow.tsx (100%) create mode 100644 apps/common/icons/IconBurger.tsx create mode 100644 apps/common/icons/IconClose.tsx rename apps/{landing/components => common}/icons/IconDiscord.tsx (100%) rename apps/{landing/components => common}/icons/IconParagraph.tsx (100%) rename apps/{landing/components => common}/icons/IconTwitter.tsx (100%) diff --git a/apps/common/components/Header.tsx b/apps/common/components/Header.tsx index cca4b2646..00f49a964 100644 --- a/apps/common/components/Header.tsx +++ b/apps/common/components/Header.tsx @@ -5,10 +5,11 @@ import {useWeb3} from '@builtbymom/web3/contexts/useWeb3'; import {truncateHex} from '@builtbymom/web3/utils/tools.address'; import {useAccountModal, useChainModal} from '@rainbow-me/rainbowkit'; import {LogoPopover} from '@yearn-finance/web-lib/components/LogoPopover'; -import {ModalMobileMenu} from '@yearn-finance/web-lib/components/ModalMobileMenu'; import {IconWallet} from '@yearn-finance/web-lib/icons/IconWallet'; +import {IconBurger} from '@common/icons/IconBurger'; import {AppName, APPS} from './Apps'; +import {ModalMobileMenu} from './ModalMobileMenu'; import type {ReactElement} from 'react'; import type {Chain} from 'viem'; @@ -138,38 +139,7 @@ function AppHeader(props: {supportedNetworks: Chain[]}): ReactElement {
diff --git a/apps/common/components/ModalMobileMenu.tsx b/apps/common/components/ModalMobileMenu.tsx new file mode 100644 index 000000000..e8fe74abb --- /dev/null +++ b/apps/common/components/ModalMobileMenu.tsx @@ -0,0 +1,152 @@ +'use client'; +import React, {Fragment, useMemo} from 'react'; +import Link from 'next/link'; +import {Dialog, Transition, TransitionChild} from '@headlessui/react'; +import {IconArrow} from '@common/icons/IconArrow'; +import {IconClose} from '@common/icons/IconClose'; +import {IconDiscord} from '@common/icons/IconDiscord'; +import {IconParagraph} from '@common/icons/IconParagraph'; +import {IconTwitter} from '@common/icons/IconTwitter'; +import {LogoYearn} from '@common/icons/LogoYearn'; + +import type {ReactElement, ReactNode} from 'react'; +import type {Chain} from 'viem'; +import type {TMenu} from '@yearn-finance/web-lib/components/Header'; + +export function FooterNav(): ReactElement { + const menu = useMemo((): TMenu[] => { + const HOME_MENU = {path: '/', label: 'Home'}; + + return [ + HOME_MENU, + { + path: 'https://gov.yearn.fi/', + label: 'Governance', + target: '_blank' + }, + {path: 'https://blog.yearn.fi/', label: 'Blog', target: '_blank'}, + {path: 'https://docs.yearn.fi/', label: 'Docs', target: '_blank'}, + {path: 'https://discord.gg/yearn', label: 'Support', target: '_blank'} + ]; + }, []); + + return ( +
+
+ {menu.map(link => ( + + {link.label} + + + ))} +
+
+ + + + + + + + + +
+
+ ); +} + +type TModalMobileMenu = { + isOpen: boolean; + shouldUseWallets: boolean; + shouldUseNetworks: boolean; + onClose: () => void; + children: ReactNode; + supportedNetworks: Chain[]; +}; + +export type TModal = { + isOpen: boolean; + onClose: () => void; + children: ReactNode; +} & React.ComponentPropsWithoutRef<'div'>; + +export function ModalMobileMenu(props: TModalMobileMenu): ReactElement { + const {isOpen, onClose} = props; + + return ( + + +
+ +
+ + + + ​ + + +
+
+ + + + +
+
+ +
+
+ +
+
+ + ); +} diff --git a/apps/landing/components/icons/IconArrow.tsx b/apps/common/icons/IconArrow.tsx similarity index 100% rename from apps/landing/components/icons/IconArrow.tsx rename to apps/common/icons/IconArrow.tsx diff --git a/apps/common/icons/IconBurger.tsx b/apps/common/icons/IconBurger.tsx new file mode 100644 index 000000000..bc1f6fbfb --- /dev/null +++ b/apps/common/icons/IconBurger.tsx @@ -0,0 +1,20 @@ +import type {ReactElement, SVGProps} from 'react'; + +export function IconBurger(props: SVGProps): ReactElement { + return ( + + + + ); +} diff --git a/apps/common/icons/IconClose.tsx b/apps/common/icons/IconClose.tsx new file mode 100644 index 000000000..3dfc779e6 --- /dev/null +++ b/apps/common/icons/IconClose.tsx @@ -0,0 +1,42 @@ +import type {ReactElement, SVGProps} from 'react'; + +export function IconClose({...props}: SVGProps): ReactElement { + return ( + + + + + + + ); +} diff --git a/apps/landing/components/icons/IconDiscord.tsx b/apps/common/icons/IconDiscord.tsx similarity index 100% rename from apps/landing/components/icons/IconDiscord.tsx rename to apps/common/icons/IconDiscord.tsx diff --git a/apps/landing/components/icons/IconParagraph.tsx b/apps/common/icons/IconParagraph.tsx similarity index 100% rename from apps/landing/components/icons/IconParagraph.tsx rename to apps/common/icons/IconParagraph.tsx diff --git a/apps/landing/components/icons/IconTwitter.tsx b/apps/common/icons/IconTwitter.tsx similarity index 100% rename from apps/landing/components/icons/IconTwitter.tsx rename to apps/common/icons/IconTwitter.tsx diff --git a/apps/landing/components/common/EarnCard.tsx b/apps/landing/components/common/EarnCard.tsx index 7e802f249..b22520a0c 100644 --- a/apps/landing/components/common/EarnCard.tsx +++ b/apps/landing/components/common/EarnCard.tsx @@ -1,7 +1,6 @@ import {type ReactElement, useState} from 'react'; import Image from 'next/image'; - -import {IconArrow} from '../icons/IconArrow'; +import {IconArrow} from '@common/icons/IconArrow'; export function EarnCard(props: {title: string; info: string; logoSrc: string; hoverLogoSrc: string}): ReactElement { const [isHovering, set_isHovering] = useState(false); @@ -39,20 +38,6 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h height={200} alt={'app-logo'} /> - {/* {'app-logo'} - {'app-logo'} */}
); } diff --git a/apps/landing/components/common/Header.tsx b/apps/landing/components/common/Header.tsx index 7dc7be2a3..c15b508bc 100644 --- a/apps/landing/components/common/Header.tsx +++ b/apps/landing/components/common/Header.tsx @@ -1,7 +1,8 @@ import {type ReactElement, useMemo, useState} from 'react'; import Link from 'next/link'; import {useRouter} from 'next/router'; -import {AppName, APPS} from '@common/components/Apps'; +import {ModalMobileMenu} from '@common/components/ModalMobileMenu'; +import {IconBurger} from '@common/icons/IconBurger'; import {LogoYearn} from '@common/icons/LogoYearn'; type TMenu = {path: string; label: string | ReactElement; target?: string}; @@ -33,22 +34,6 @@ export function LandingAppHeader(): ReactElement { const menu = useMemo((): TMenu[] => { const HOME_MENU = {path: '/', label: 'Home'}; - if (pathname.startsWith('/ycrv')) { - return [HOME_MENU, ...APPS[AppName.YCRV].menu]; - } - - if (pathname.startsWith('/v3')) { - return [HOME_MENU, ...APPS[AppName.VAULTSV3].menu]; - } - - if (pathname.startsWith('/vaults')) { - return [HOME_MENU, ...APPS[AppName.VAULTS].menu]; - } - - if (pathname.startsWith('/veyfi')) { - return [HOME_MENU, ...APPS[AppName.VEYFI].menu]; - } - return [ HOME_MENU, { @@ -60,56 +45,27 @@ export function LandingAppHeader(): ReactElement { {path: 'https://docs.yearn.fi/', label: 'Docs', target: '_blank'}, {path: 'https://discord.gg/yearn', label: 'Support', target: '_blank'} ]; - }, [pathname]); + }, []); return (
+ className={'inset-x-0 top-0 z-50 mt-4 w-full md:mt-7'}>
-
+
- + + +
- {/* ) )} - */} +
); } diff --git a/apps/landing/components/sections/Footer.tsx b/apps/landing/components/sections/Footer.tsx index f4a366776..751ace7aa 100644 --- a/apps/landing/components/sections/Footer.tsx +++ b/apps/landing/components/sections/Footer.tsx @@ -1,36 +1,11 @@ -import Link from 'next/link'; +import {type ReactElement} from 'react'; +import {FooterNav} from '@common/components/ModalMobileMenu'; import {LogoYearn} from '@common/icons/LogoYearn'; -import {IconArrow} from '../icons/IconArrow'; -import {IconDiscord} from '../icons/IconDiscord'; -import {IconParagraph} from '../icons/IconParagraph'; -import {IconTwitter} from '../icons/IconTwitter'; - -import type {ReactElement} from 'react'; - -const LINKS = [ - { - label: 'GOVERNANCE', - href: '/governance' - }, - { - label: 'BLOG', - href: '/blog' - }, - { - label: 'DOCS', - href: '/docs' - }, - { - label: 'SUPPORT', - href: '/support' - } -]; - function FooterContent(): ReactElement { return ( <> -
+

{'TAKE THE BLUE PILL.'}

@@ -42,41 +17,7 @@ function FooterContent(): ReactElement { />
-
-
- {LINKS.map(link => ( - - {link.label} - - - ))} -
-
- - - - - - - - - -
-
+ ); } @@ -100,11 +41,11 @@ export function Footer(): ReactElement { style={{ backgroundImage: "url('/landing/footer-background-mobile.png')", backgroundRepeat: 'no-repeat', - backgroundSize: '100% auto', + backgroundSize: 'cover', backgroundPosition: 'center' }} className={ - 'items-between relative flex h-[640px] w-full max-w-[2352px] flex-col justify-between self-center rounded-lg bg-[#0C0E14] px-8 pb-10 pt-12 md:hidden' + 'items-between relative flex h-[680px] w-full max-w-[2352px] flex-col justify-between self-center rounded-lg bg-[#0C0E14] px-8 pb-10 pt-12 md:hidden' }> diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx index 6489b274b..490fc8645 100644 --- a/apps/landing/components/sections/Hero.tsx +++ b/apps/landing/components/sections/Hero.tsx @@ -1,4 +1,5 @@ import Image from 'next/image'; +import Link from 'next/link'; import {scrollToHash} from 'apps/landing/utils/scrollToHash'; import {motion} from 'framer-motion'; @@ -166,7 +167,11 @@ export function Hero(): ReactElement {

- + + +