import Link from 'next/link'
import {
EllipsisHorizontalIcon,
BuildingLibraryIcon,
LightBulbIcon,
ArrowTopRightOnSquareIcon,
ChevronDownIcon,
CurrencyDollarIcon,
ChartBarIcon,
Cog8ToothIcon,
ArrowsRightLeftIcon,
ArrowTrendingUpIcon,
MagnifyingGlassIcon,
BanknotesIcon,
NewspaperIcon,
PlusCircleIcon,
ArchiveBoxArrowDownIcon,
ExclamationTriangleIcon,
// ClipboardDocumentIcon,
} from '@heroicons/react/20/solid'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import { Fragment, ReactNode } from 'react'
import { Disclosure, Popover, Transition } from '@headlessui/react'
import MangoAccountSummary from './account/MangoAccountSummary'
import Tooltip from './shared/Tooltip'
import { HealthType } from '@blockworks-foundation/mango-v4'
import { useWallet } from '@solana/wallet-adapter-react'
import mangoStore from '@store/mangoStore'
import HealthHeart from './account/HealthHeart'
import useMangoAccount from 'hooks/useMangoAccount'
import { useTheme } from 'next-themes'
import LeaderboardIcon from './icons/LeaderboardIcon'
import { sideBarAnimationDuration } from './Layout'
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const { t } = useTranslation(['common', 'search'])
const { connected } = useWallet()
const group = mangoStore.getState().group
const { mangoAccount } = useMangoAccount()
const router = useRouter()
const { pathname } = router
return (
Mango
}
title={t('account')}
pagePath="/"
/>
}
title={t('swap')}
pagePath="/swap"
/>
}
title={t('trade')}
pagePath="/trade"
/>
}
title={t('borrow')}
pagePath="/borrow"
/>
}
title={t('stats')}
pagePath="/stats"
/>
}
title={t('leaderboard')}
pagePath="/leaderboard"
/>
}
title={t('settings')}
pagePath="/settings"
/>
}
title={t('more')}
>
}
title={t('search:search-accounts')}
pagePath="/search"
hideIconBg
showTooltip={false}
/>
}
title={t('common:list-market-token')}
pagePath="/governance/list"
hideIconBg
showTooltip={false}
/>
}
title={t('common:vote')}
pagePath="/governance/vote"
hideIconBg
showTooltip={false}
/>
}
title={t('documentation')}
pagePath="https://docs.mango.markets"
hideIconBg
isExternal
showTooltip={false}
/>
}
title={t('governance')}
pagePath="https://dao.mango.markets"
hideIconBg
isExternal
showTooltip={false}
/>
{/* }
title={t('feedback-survey')}
pagePath="https://forms.gle/JgV4w7SJ2kPH89mq7"
hideIconBg
isExternal
showTooltip={false}
/> */}
}
title={t('terms-of-use')}
pagePath="https://docs.mango.markets/legal"
hideIconBg
isExternal
showTooltip={false}
/>
}
title={t('risks')}
pagePath="https://docs.mango.markets/mango-markets/risks"
hideIconBg
isExternal
showTooltip={false}
/>
}
panelTitle={mangoAccount?.name ? mangoAccount.name : t('account')}
title={
{t('account')}
{mangoAccount
? mangoAccount.name
: connected
? 'No Account'
: 'Connect'}
}
alignBottom
hideIconBg
>
)
}
export default SideNav
const MenuItem = ({
active,
collapsed,
icon,
title,
pagePath,
hideIconBg,
isExternal,
showTooltip = true,
}: {
active?: boolean
collapsed: boolean
icon?: ReactNode
title: string
pagePath: string
hideIconBg?: boolean
isExternal?: boolean
showTooltip?: boolean
}) => {
const { theme } = useTheme()
return (
{icon ? (
{icon}
) : null}
{title}
{isExternal ? (
) : null}
)
}
export const ExpandableMenuItem = ({
alignBottom,
children,
collapsed,
hideIconBg,
icon,
panelTitle,
title,
}: {
alignBottom?: boolean
children: ReactNode
collapsed: boolean
hideIconBg?: boolean
icon: ReactNode
panelTitle?: string
title: string | ReactNode
}) => {
const { theme } = useTheme()
return collapsed ? (
{icon}
{panelTitle ? (
{panelTitle}
) : null}
{children}
) : (
{({ open }) => (
<>
{children}
>
)}
)
}