show sidenav account summary on page load

2023-01-06 14:17:37 +11:00 · 2023-01-06 14:17:37 +11:00 · e8d4d8e5d0
parent 65e6afc363
commit e8d4d8e5d0
7 changed files with 42 additions and 36 deletions
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@ -10,10 +10,11 @@ import {
  Cog8ToothIcon,
  ArrowsRightLeftIcon,
  ArrowTrendingUpIcon,
+  XMarkIcon,
 } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import { Fragment, ReactNode, useEffect, useState } from 'react'
+import { Fragment, ReactNode, useState } from 'react'
 import { Disclosure, Popover, Transition } from '@headlessui/react'
 import MangoAccountSummary from './account/MangoAccountSummary'
 import Tooltip from './shared/Tooltip'
@ -23,6 +24,7 @@ import mangoStore from '@store/mangoStore'
 import HealthHeart from './account/HealthHeart'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useTheme } from 'next-themes'
+import { IconButton } from './shared/Button'

 const SideNav = ({ collapsed }: { collapsed: boolean }) => {
  const { t } = useTranslation('common')
@ -152,9 +154,13 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                size={32}
              />
            }
+            isOpen
+            panelTitle={`${mangoAccount?.name || ''} ${t('account')}`}
            title={
              <div className="w-24 text-left">
-                <p className="mb-0.5 whitespace-nowrap text-xs">Health Check</p>
+                <p className="mb-0.5 whitespace-nowrap text-xs">
+                  {t('account')}
+                </p>
                <p className="truncate whitespace-nowrap text-sm font-bold text-th-fgd-1">
                  {mangoAccount
                    ? mangoAccount.name
@ -166,6 +172,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
            }
            alignBottom
            hideIconBg
+            showClose
          >
            <div className="px-4 py-2">
              <MangoAccountSummary />
@ -253,6 +260,9 @@ export const ExpandableMenuItem = ({
  collapsed,
  hideIconBg,
  icon,
+  panelTitle,
+  isOpen,
+  showClose,
  title,
 }: {
  alignBottom?: boolean
@ -260,26 +270,14 @@ export const ExpandableMenuItem = ({
  collapsed: boolean
  hideIconBg?: boolean
  icon: ReactNode
+  panelTitle?: string
+  isOpen?: boolean
+  showClose?: boolean
  title: string | ReactNode
 }) => {
-  const [showMenu, setShowMenu] = useState(false)
+  const [showMenu, setShowMenu] = useState(isOpen || false)
  const { theme } = useTheme()

-  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)
  }
@ -287,12 +285,6 @@ export const ExpandableMenuItem = ({
  return collapsed ? (
    <Popover>
      <div
-        onMouseEnter={
-          !alignBottom ? () => onHoverMenu(showMenu, 'onMouseEnter') : undefined
-        }
-        onMouseLeave={
-          !alignBottom ? () => onHoverMenu(showMenu, 'onMouseLeave') : undefined
-        }
        className={`relative z-30 ${alignBottom ? '' : 'px-4 py-2'}`}
        role="button"
      >
@ -329,6 +321,20 @@ export const ExpandableMenuItem = ({
            }`}
          >
            <div className="rounded-md rounded-l-none bg-th-bkg-2 py-2">
+              <div className="flex items-center justify-between pl-4 pr-2">
+                {panelTitle ? (
+                  <h3 className="text-sm font-bold">{panelTitle}</h3>
+                ) : null}
+                {showClose ? (
+                  <IconButton
+                    onClick={() => setShowMenu(false)}
+                    hideBg
+                    size="small"
+                  >
+                    <XMarkIcon className="h-5 w-5" />
+                  </IconButton>
+                ) : null}
+              </div>
              {children}
            </div>
          </Popover.Panel>
--- a/components/tours/AccountOnboardingTour.tsx
+++ b/components/tours/AccountOnboardingTour.tsx
@ -90,8 +90,8 @@ const AccountOnboardingTour = () => {
    },
    {
      selector: '#account-step-eleven',
-      title: t('health-check'),
-      description: t('health-check-desc'),
+      title: t('account-summary'),
+      description: t('account-summary-desc'),
      orientationPreferences: [CardinalOrientation.EASTSOUTH],
      movingTarget: true,
    },
--- a/public/locales/en/onboarding-tours.json
+++ b/public/locales/en/onboarding-tours.json
@ -7,8 +7,8 @@
    "free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
    "health": "Health",
    "health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
-    "health-check": "Health Check",
-    "health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
+    "account-summary": "Account Summary",
+    "account-summary-desc": "Check your key account information from any screen in the app.",
    "health-impact": "Health Impact",
    "health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
    "interest-earned": "Interest Earned",
--- a/public/locales/es/onboarding-tours.json
+++ b/public/locales/es/onboarding-tours.json
@ -7,8 +7,8 @@
    "free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
    "health": "Health",
    "health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
-    "health-check": "Health Check",
-    "health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
+    "account-summary": "Account Summary",
+    "account-summary-desc": "Check your key account information from any screen in the app.",
    "health-impact": "Health Impact",
    "health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
    "interest-earned": "Interest Earned",
--- a/public/locales/ru/onboarding-tours.json
+++ b/public/locales/ru/onboarding-tours.json
@ -7,8 +7,8 @@
    "free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
    "health": "Health",
    "health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
-    "health-check": "Health Check",
-    "health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
+    "account-summary": "Account Summary",
+    "account-summary-desc": "Check your key account information from any screen in the app.",
    "health-impact": "Health Impact",
    "health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
    "interest-earned": "Interest Earned",
--- a/public/locales/zh/onboarding-tours.json
+++ b/public/locales/zh/onboarding-tours.json
@ -7,8 +7,8 @@
    "free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
    "health": "Health",
    "health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
-    "health-check": "Health Check",
-    "health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
+    "account-summary": "Account Summary",
+    "account-summary-desc": "Check your key account information from any screen in the app.",
    "health-impact": "Health Impact",
    "health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
    "interest-earned": "Interest Earned",
--- a/public/locales/zh_tw/onboarding-tours.json
+++ b/public/locales/zh_tw/onboarding-tours.json
@ -7,8 +7,8 @@
    "free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
    "health": "Health",
    "health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
-    "health-check": "Health Check",
-    "health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
+    "account-summary": "Account Summary",
+    "account-summary-desc": "Check your key account information from any screen in the app.",
    "health-impact": "Health Impact",
    "health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
    "interest-earned": "Interest Earned",