add mobile nav items
This commit is contained in:
parent
48618c2a68
commit
9bd727c431
|
@ -60,7 +60,7 @@ const Footer = () => {
|
|||
title={t('navigation:github')}
|
||||
/>
|
||||
<FooterLink
|
||||
path="https://github.com/blockworks-foundation"
|
||||
path="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
|
||||
isExternal
|
||||
title={t('navigation:market-maker')}
|
||||
/>
|
||||
|
|
|
@ -163,7 +163,7 @@ const HomePage = () => {
|
|||
<IconWithText
|
||||
desc={t('home:market-maker-desc')}
|
||||
icon={<BotOne className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="#"
|
||||
linkPath="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
|
||||
linkText={t('home:market-maker-link')}
|
||||
noBorder
|
||||
title={t('home:market-maker')}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { Popover, Transition } from '@headlessui/react'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
Fragment,
|
||||
ReactNode,
|
||||
|
@ -12,6 +11,7 @@ import { useTranslation } from 'next-i18next'
|
|||
import Button, { IconButton } from '../shared/Button'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
|
||||
import NavigationItemLink from './NavigationItemLink'
|
||||
|
||||
const DesktopNavigation = () => {
|
||||
const { t } = useTranslation(['common', 'navigation'])
|
||||
|
@ -67,7 +67,7 @@ const DesktopNavigation = () => {
|
|||
title={t('navigation:github')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://github.com/blockworks-foundation"
|
||||
path="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
|
||||
isExternal
|
||||
title={t('navigation:market-maker')}
|
||||
/>
|
||||
|
@ -219,26 +219,3 @@ const NavigationItem = ({
|
|||
const NavigationItemPanel = ({ children }: { children: ReactNode }) => {
|
||||
return <div className="bg-th-bkg-2 py-2 rounded-md">{children}</div>
|
||||
}
|
||||
|
||||
const linkClassNames =
|
||||
'px-4 py-1 font-medium text-th-fgd-2 block md:hover:text-th-fgd-1 default-transition text-sm'
|
||||
|
||||
const NavigationItemLink = ({
|
||||
path,
|
||||
title,
|
||||
isExternal = false,
|
||||
}: {
|
||||
isExternal?: boolean
|
||||
path: string
|
||||
title: string
|
||||
}) => {
|
||||
return isExternal ? (
|
||||
<a className={linkClassNames} href={path}>
|
||||
{title}
|
||||
</a>
|
||||
) : (
|
||||
<Link href={path} shallow>
|
||||
<span className={linkClassNames}>{title}</span>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
import { useState } from 'react'
|
||||
import { Fragment, useState } from 'react'
|
||||
import { IconButton } from '../shared/Button'
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/20/solid'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import NavigationItemLink from './NavigationItemLink'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
// import { useTranslation } from 'next-i18next'
|
||||
|
||||
const MobileNavigation = () => {
|
||||
|
@ -24,22 +27,128 @@ const MenuPanel = ({
|
|||
showMenu: boolean
|
||||
setShowMenu: (showMenu: boolean) => void
|
||||
}) => {
|
||||
// const { t } = useTranslation(['common', 'navigation'])
|
||||
const { t } = useTranslation(['common', 'navigation'])
|
||||
return (
|
||||
<div
|
||||
className={`fixed top-0 right-0 z-30 h-screen w-3/4 overflow-hidden bg-th-bkg-2 transition duration-300 ease-in-out ${
|
||||
showMenu ? 'translate-x-0' : 'translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-end py-3 px-6">
|
||||
<IconButton onClick={() => setShowMenu(false)} hideBg size="medium">
|
||||
<XMarkIcon className="h-8 w-8" />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/* <div
|
||||
<>
|
||||
<div
|
||||
className={`fixed top-0 right-0 z-30 h-screen w-[90%] overflow-hidden bg-th-bkg-1 transition duration-300 ease-in-out ${
|
||||
showMenu ? 'translate-x-0' : 'translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-end py-3 px-6">
|
||||
<IconButton onClick={() => setShowMenu(false)} hideBg size="medium">
|
||||
<XMarkIcon className="h-8 w-8" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 grid-row-flow gap-6 px-4">
|
||||
<div>
|
||||
<h4 className="px-4 mb-2">{t('navigation:about')}</h4>
|
||||
<NavigationItemLink
|
||||
path="/mango-dao"
|
||||
title={t('navigation:mango-dao')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="/mngo"
|
||||
title={t('navigation:mngo-token')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="#"
|
||||
isExternal
|
||||
title={t('navigation:v4-stats')}
|
||||
/>
|
||||
<NavigationItemLink path="/brand" title={t('navigation:brand')} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="px-4 mb-2">{t('navigation:products')}</h4>
|
||||
<NavigationItemLink
|
||||
path="https://trade.mango.markets"
|
||||
isExternal
|
||||
title={t('navigation:mango-v4')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="/mobile-app"
|
||||
title={t('navigation:mobile-app')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="px-4 mb-2">{t('navigation:developers')}</h4>
|
||||
<NavigationItemLink
|
||||
path="https://docs.mango.markets"
|
||||
isExternal
|
||||
title={t('navigation:docs')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://github.com/blockworks-foundation"
|
||||
isExternal
|
||||
title={t('navigation:github')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
|
||||
isExternal
|
||||
title={t('navigation:market-maker')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://github.com/blockworks-foundation"
|
||||
isExternal
|
||||
title={t('navigation:liquidator')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://github.com/blockworks-foundation"
|
||||
isExternal
|
||||
title={t('navigation:contribute')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="px-4 mb-2">{t('navigation:community')}</h4>
|
||||
<NavigationItemLink
|
||||
path="https://dao.mango.markets"
|
||||
isExternal
|
||||
title={t('navigation:governance')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://discord.gg/2uwjsBc5yw"
|
||||
isExternal
|
||||
title={t('navigation:discord')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://twitter.com/mangomarkets"
|
||||
isExternal
|
||||
title={t('navigation:twitter')}
|
||||
/>
|
||||
<NavigationItemLink
|
||||
path="https://forum.mango.markets"
|
||||
isExternal
|
||||
title={t('navigation:forum')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="px-4 mb-2">{t('navigation:careers')}</h4>
|
||||
<NavigationItemLink
|
||||
path="/careers"
|
||||
title={t('navigation:work-with-us')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div
|
||||
className="border-b border-th-bkg-4"
|
||||
onClick={() => setShowMenu(false)}
|
||||
></div> */}
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
show={showMenu}
|
||||
enter="transition-all ease-in duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition-all ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div
|
||||
className={`fixed top-0 right-0 z-20 backdrop-brightness-[0.3] w-full h-screen`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
const linkClassNames =
|
||||
'px-4 py-1 font-medium text-th-fgd-2 block md:hover:text-th-fgd-1 default-transition text-sm'
|
||||
|
||||
const NavigationItemLink = ({
|
||||
path,
|
||||
title,
|
||||
isExternal = false,
|
||||
}: {
|
||||
isExternal?: boolean
|
||||
path: string
|
||||
title: string
|
||||
}) => {
|
||||
return isExternal ? (
|
||||
<a className={linkClassNames} href={path}>
|
||||
{title}
|
||||
</a>
|
||||
) : (
|
||||
<Link href={path} shallow>
|
||||
<span className={linkClassNames}>{title}</span>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavigationItemLink
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue