From 390d18725ac6e63c1cff92379ea6718fa6754238 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 23 Jun 2022 14:10:37 +1000
Subject: [PATCH] anchor account summary to bottom of scroll window

---
 components/AccountOverviewPopover.tsx |  10 +
 components/SideNav.tsx                | 283 +++++++++++++-------------
 styles/index.css                      |  25 ---
 3 files changed, 156 insertions(+), 162 deletions(-)

diff --git a/components/AccountOverviewPopover.tsx b/components/AccountOverviewPopover.tsx
index e42d2832..14a2f81a 100644
--- a/components/AccountOverviewPopover.tsx
+++ b/components/AccountOverviewPopover.tsx
@@ -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 ? (
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 353ba55c..862c400f 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -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>
     </>
   )
diff --git a/styles/index.css b/styles/index.css
index 66d84190..4295e2a4 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -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% {