anchor account summary to bottom of scroll window
This commit is contained in:
saml33
parent
f58d236217
commit
390d18725a
|
|
@ -45,6 +45,15 @@ const AccountOverviewPopover = ({ collapsed }: { collapsed: boolean }) => {
|
|||
)
|
||||
: undefined
|
||||
|
||||
const toggleAccountSummary = (open) => {
|
||||
const id = document.getElementById('sidebar-content')
|
||||
if (open) {
|
||||
id?.style.setProperty('height', 'calc(100vh - 325px)', '')
|
||||
} else {
|
||||
id?.style.setProperty('height', 'calc(100vh - 125px)', '')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{mangoAccount ? (
|
||||
|
|
@ -62,6 +71,7 @@ const AccountOverviewPopover = ({ collapsed }: { collapsed: boolean }) => {
|
|||
</div>
|
||||
}
|
||||
icon={<HealthHeart health={Number(maintHealthRatio)} size={32} />}
|
||||
onOpenChange={(open) => toggleAccountSummary(open)}
|
||||
>
|
||||
<div className={`w-full pr-5 ${!collapsed ? 'pl-3 pb-2' : 'py-2'}`}>
|
||||
{collapsed ? (
|
||||
|
|
|
|||
|
|
@ -60,147 +60,156 @@ const SideNav = ({ collapsed, setCollapsed }) => {
|
|||
/>
|
||||
</IconButton>
|
||||
<ProSidebar collapsed={collapsed} width="220px" collapsedWidth="64px">
|
||||
<SidebarHeader>
|
||||
<Link href={defaultMarket.path} shallow={true}>
|
||||
<div
|
||||
className={`flex w-full items-center ${
|
||||
collapsed ? 'justify-center' : 'justify-start'
|
||||
} h-14 border-b border-th-bkg-3 px-4`}
|
||||
>
|
||||
<div className={`flex flex-shrink-0 cursor-pointer items-center`}>
|
||||
<img
|
||||
className={`h-8 w-auto`}
|
||||
src="/assets/icons/logo.svg"
|
||||
alt="next"
|
||||
/>
|
||||
{!collapsed ? (
|
||||
<span className="ml-2 text-lg font-bold text-th-fgd-1">
|
||||
Mango
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<Menu iconShape="circle">
|
||||
<MenuItem
|
||||
active={pathname === '/'}
|
||||
icon={<TradeIcon className="h-5 w-5" />}
|
||||
>
|
||||
<div className="thin-scroll flex flex-col-reverse overflow-y-auto">
|
||||
<div className="">
|
||||
<SidebarHeader>
|
||||
<Link href={defaultMarket.path} shallow={true}>
|
||||
{t('trade')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/account'}
|
||||
icon={<CurrencyDollarIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/account'} shallow={true}>
|
||||
{t('account')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/markets'}
|
||||
icon={<BtcMonoIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/markets'} shallow={true}>
|
||||
{t('markets')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/borrow'}
|
||||
icon={<CashIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/borrow'} shallow={true}>
|
||||
{t('borrow')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/swap'}
|
||||
icon={<SwitchHorizontalIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/swap'} shallow={true}>
|
||||
{t('swap')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/stats'}
|
||||
icon={<ChartBarIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/stats'} shallow={true}>
|
||||
{t('stats')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/leaderboard'}
|
||||
icon={<TrophyIcon className="h-[18px] w-[18px]" />}
|
||||
>
|
||||
<Link href={'/leaderboard'} shallow={true}>
|
||||
{t('leaderboard')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<SubMenu
|
||||
title={t('more')}
|
||||
icon={<DotsHorizontalIcon className="h-5 w-5" />}
|
||||
>
|
||||
<MenuItem
|
||||
active={pathname === '/referral'}
|
||||
icon={<UserAddIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/referral'} shallow={true}>
|
||||
{t('referrals')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/risk-calculator'}
|
||||
icon={<CalculatorIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/risk-calculator'} shallow={true}>
|
||||
{t('calculator')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/fees'}
|
||||
icon={<CurrencyDollarIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/fees'} shallow={true}>
|
||||
{t('fees')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<LightBulbIcon className="h-4 w-4" />}
|
||||
suffix={<ExternalLinkIcon className="h-4 w-4" />}
|
||||
>
|
||||
<a
|
||||
href={'https://docs.mango.markets'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div
|
||||
className={`flex w-full items-center ${
|
||||
collapsed ? 'justify-center' : 'justify-start'
|
||||
} h-14 border-b border-th-bkg-3 px-4`}
|
||||
>
|
||||
{t('learn')}
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<LibraryIcon className="h-4 w-4" />}
|
||||
suffix={<ExternalLinkIcon className="h-4 w-4" />}
|
||||
>
|
||||
<a
|
||||
href={'https://dao.mango.markets'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div
|
||||
className={`flex flex-shrink-0 cursor-pointer items-center`}
|
||||
>
|
||||
<img
|
||||
className={`h-8 w-auto`}
|
||||
src="/assets/icons/logo.svg"
|
||||
alt="next"
|
||||
/>
|
||||
{!collapsed ? (
|
||||
<span className="ml-2 text-lg font-bold text-th-fgd-1">
|
||||
Mango
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</SidebarHeader>
|
||||
<SidebarContent
|
||||
id="sidebar-content"
|
||||
style={{ height: 'calc(100vh - 125px)' }}
|
||||
>
|
||||
<Menu iconShape="circle">
|
||||
<MenuItem
|
||||
active={pathname === '/'}
|
||||
icon={<TradeIcon className="h-5 w-5" />}
|
||||
>
|
||||
{t('governance')}
|
||||
</a>
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</SidebarContent>
|
||||
<Link href={defaultMarket.path} shallow={true}>
|
||||
{t('trade')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/account'}
|
||||
icon={<CurrencyDollarIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/account'} shallow={true}>
|
||||
{t('account')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/markets'}
|
||||
icon={<BtcMonoIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/markets'} shallow={true}>
|
||||
{t('markets')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/borrow'}
|
||||
icon={<CashIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/borrow'} shallow={true}>
|
||||
{t('borrow')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/swap'}
|
||||
icon={<SwitchHorizontalIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/swap'} shallow={true}>
|
||||
{t('swap')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/stats'}
|
||||
icon={<ChartBarIcon className="h-5 w-5" />}
|
||||
>
|
||||
<Link href={'/stats'} shallow={true}>
|
||||
{t('stats')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/leaderboard'}
|
||||
icon={<TrophyIcon className="h-[18px] w-[18px]" />}
|
||||
>
|
||||
<Link href={'/leaderboard'} shallow={true}>
|
||||
{t('leaderboard')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<SubMenu
|
||||
title={t('more')}
|
||||
icon={<DotsHorizontalIcon className="h-5 w-5" />}
|
||||
>
|
||||
<MenuItem
|
||||
active={pathname === '/referral'}
|
||||
icon={<UserAddIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/referral'} shallow={true}>
|
||||
{t('referrals')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/risk-calculator'}
|
||||
icon={<CalculatorIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/risk-calculator'} shallow={true}>
|
||||
{t('calculator')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
active={pathname === '/fees'}
|
||||
icon={<CurrencyDollarIcon className="h-4 w-4" />}
|
||||
>
|
||||
<Link href={'/fees'} shallow={true}>
|
||||
{t('fees')}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<LightBulbIcon className="h-4 w-4" />}
|
||||
suffix={<ExternalLinkIcon className="h-4 w-4" />}
|
||||
>
|
||||
<a
|
||||
href={'https://docs.mango.markets'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t('learn')}
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<LibraryIcon className="h-4 w-4" />}
|
||||
suffix={<ExternalLinkIcon className="h-4 w-4" />}
|
||||
>
|
||||
<a
|
||||
href={'https://dao.mango.markets'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t('governance')}
|
||||
</a>
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</SidebarContent>
|
||||
|
||||
{mangoAccount ? (
|
||||
<SidebarFooter>
|
||||
<AccountOverviewPopover collapsed={collapsed} />
|
||||
</SidebarFooter>
|
||||
) : null}
|
||||
{mangoAccount ? (
|
||||
<SidebarFooter>
|
||||
<AccountOverviewPopover collapsed={collapsed} />
|
||||
</SidebarFooter>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</ProSidebar>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -648,31 +648,6 @@ body::-webkit-scrollbar-corner {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.pro-sidebar
|
||||
> .pro-sidebar-inner
|
||||
> .pro-sidebar-layout::-webkit-scrollbar-thumb {
|
||||
@apply rounded bg-th-bkg-3;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.pro-sidebar
|
||||
> .pro-sidebar-inner
|
||||
> .pro-sidebar-layout::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.pro-sidebar
|
||||
> .pro-sidebar-inner
|
||||
> .pro-sidebar-layout::-webkit-scrollbar-thumb:window-inactive {
|
||||
@apply bg-th-bkg-3;
|
||||
}
|
||||
|
||||
@keyframes sideways-bounce {
|
||||
0%,
|
||||
100% {
|
||||
|
|
|
|||
Loading…
Reference in New Issue