mars-v2-frontend/src/components/Navigation/DesktopNavigation.tsx
Linkie Link ea614997a7
Share accounts (#539)
* feat: do not redirect to wallet on portfolio page

* fix: use connected wallet for AccountMenu

* fix: fixed ghost AccountDetails

* feat: created ShareBar and share functionality

* fix: don’t show shareBar if no address is present

* fix: stupid 'next/navigation'

* tidy: format

* fix: fixed tests

*  routing and pages for HLS (#538)

* 🐛 use useAccountIds

* fix: fixed the tests

* fix: accountIds is now a suspense

---------

Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
2023-10-13 13:49:38 +02:00

48 lines
1.3 KiB
TypeScript

import classNames from 'classnames'
import { menuTree } from 'components/Header/DesktopHeader'
import { Logo } from 'components/Icons'
import { NavLink } from 'components/Navigation/NavLink'
import useAccountId from 'hooks/useAccountId'
import useStore from 'store'
import { getRoute } from 'utils/route'
export default function DesktopNavigation() {
const address = useStore((s) => s.address)
const accountId = useAccountId()
const focusComponent = useStore((s) => s.focusComponent)
function getIsActive(pages: string[]) {
const segments = location.pathname.split('/')
return pages.some((page) => segments.includes(page))
}
return (
<div
className={classNames(
focusComponent ? 'absolute left-4 top-3 z-1 block' : 'flex flex-1 items-center',
)}
>
<NavLink href={getRoute('trade', address, accountId)}>
<span className='block w-10 h-10'>
<Logo className='text-white' />
</span>
</NavLink>
{!focusComponent && (
<div className='flex gap-8 px-6'>
{menuTree.map((item, index) => (
<NavLink
key={index}
href={getRoute(item.pages[0], address, accountId)}
isActive={getIsActive(item.pages)}
>
{item.label}
</NavLink>
))}
</div>
)}
</div>
)
}