import Link from 'next/link'
import BtcMonoIcon from '../icons/BtcMonoIcon'
import TradeIcon from '../icons/TradeIcon'
import {
CashIcon,
ChartBarIcon,
DotsHorizontalIcon,
LibraryIcon,
LightBulbIcon,
ExternalLinkIcon,
ChevronDownIcon,
ReceiptTaxIcon,
ChatIcon,
HomeIcon,
} 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 Chat from '../chat/Chat'
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const { t } = useTranslation('common')
const router = useRouter()
const { pathname } = router
return (
Mango
}
title={t('portfolio')}
pagePath="/"
/>
}
title={t('trade')}
pagePath="/trade"
/>
}
title={t('markets')}
pagePath="/markets"
/>
}
title={t('borrow')}
pagePath="/borrow"
/>
}
title={t('stats')}
pagePath="/stats"
/>
}
pathname={pathname}
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
/>
}
title="Trollbox"
alignBottom
hideIconBg
>
)
}
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 !isExternal ? (
) : (
{icon}
{!collapsed ?
{title} : null}
)
}
const ExpandableMenuItem = ({
alignBottom,
children,
collapsed,
hideIconBg,
icon,
pathname,
title,
}: {
alignBottom?: boolean
children: ReactNode
collapsed: boolean
hideIconBg?: boolean
icon: ReactNode
pathname?: string
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, pathname])
const toggleMenu = () => {
setShowMenu(!showMenu)
}
return collapsed ? (
onHoverMenu(showMenu, 'onMouseEnter') : undefined
}
onMouseLeave={
!alignBottom ? () => onHoverMenu(showMenu, 'onMouseLeave') : undefined
}
className="relative z-30"
onClick={() => toggleMenu()}
role="button"
>
toggleMenu()}
>
{icon}
{children}
) : (
setShowMenu(!showMenu)}
role="button"
className={`w-full ${alignBottom ? 'h-14 px-3 hover:bg-th-bkg-2' : ''}`}
>
{children}
)
}