import Link from 'next/link'
import TradeIcon from './icons/TradeIcon'
import {
// ChartBarIcon,
DotsHorizontalIcon,
LibraryIcon,
LightBulbIcon,
ExternalLinkIcon,
ChevronDownIcon,
// ReceiptTaxIcon,
CogIcon,
CurrencyDollarIcon,
} from '@heroicons/react/solid'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import { Fragment, ReactNode, useEffect, useState } from 'react'
import { Disclosure, Popover, Transition } from '@headlessui/react'
import MangoAccountSummary from './account/MangoAccountSummary'
import HealthHeart from './account/HealthHeart'
import mangoStore from '../store/state'
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const { t } = useTranslation('common')
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const router = useRouter()
const { pathname } = router
return (
Mango
}
title={t('portfolio')}
pagePath="/"
/>
}
title={t('trade')}
pagePath="/trade"
/>
{/* }
title={t('stats')}
pagePath="/stats"
/> */}
}
title={t('settings')}
pagePath="/settings"
/>
}
title={t('more')}
>
{/* }
title={t('fees')}
pagePath="/fees"
hideIconBg
/> */}
}
title={t('learn')}
pagePath="https://docs.mango.markets"
hideIconBg
isExternal
/>
}
title={t('governance')}
pagePath="https://dao.mango.markets"
hideIconBg
isExternal
/>
{mangoAccount ? (
}
title={
Account Summary
{mangoAccount.name}
}
alignBottom
hideIconBg
>
) : null}
)
}
export default SideNav
const MenuItem = ({
active,
collapsed,
icon,
title,
pagePath,
hideIconBg,
isExternal,
}: {
active?: boolean
collapsed: boolean
icon: ReactNode
title: string
pagePath: string
hideIconBg?: boolean
isExternal?: boolean
}) => {
return (
)
}
const ExpandableMenuItem = ({
alignBottom,
children,
collapsed,
hideIconBg,
icon,
title,
}: {
alignBottom?: boolean
children: ReactNode
collapsed: boolean
hideIconBg?: boolean
icon: ReactNode
title: string | ReactNode
}) => {
const [showMenu, setShowMenu] = useState(false)
const onHoverMenu = (open: boolean, action: string) => {
if (
(!open && action === 'onMouseEnter') ||
(open && action === 'onMouseLeave')
) {
setShowMenu(!open)
}
}
useEffect(() => {
if (collapsed) {
setShowMenu(false)
}
}, [collapsed])
const toggleMenu = () => {
setShowMenu(!showMenu)
}
return collapsed ? (
onHoverMenu(showMenu, 'onMouseEnter') : undefined
}
onMouseLeave={
!alignBottom ? () => onHoverMenu(showMenu, 'onMouseLeave') : undefined
}
className={`relative z-30 ${alignBottom ? '' : 'px-4 py-2'}`}
role="button"
>
toggleMenu()}
>
{icon}
{children}
) : (
setShowMenu(!showMenu)}
role="button"
className={`w-full px-4 py-2 ${
alignBottom ? 'h-[64px] hover:bg-th-bkg-2' : ''
}`}
>
{children}
)
}