2022-08-02 19:15:17 -07:00
|
|
|
import SideNav from './SideNav'
|
2022-09-06 21:36:35 -07:00
|
|
|
import { ReactNode, useEffect } from 'react'
|
|
|
|
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
2022-07-26 19:45:27 -07:00
|
|
|
import { useViewport } from '../hooks/useViewport'
|
|
|
|
import { breakpoints } from '../utils/theme'
|
2022-09-12 08:53:57 -07:00
|
|
|
import mangoStore from '@store/mangoStore'
|
2022-07-26 19:45:27 -07:00
|
|
|
import BottomBar from './mobile/BottomBar'
|
2022-07-28 04:41:55 -07:00
|
|
|
import BounceLoader from './shared/BounceLoader'
|
2022-08-26 12:15:50 -07:00
|
|
|
import TopBar from './TopBar'
|
2022-09-01 11:51:15 -07:00
|
|
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
2022-09-11 17:22:37 -07:00
|
|
|
import {
|
|
|
|
IS_ONBOARDED_KEY,
|
|
|
|
ONBOARDING_TOUR_KEY,
|
|
|
|
SIDEBAR_COLLAPSE_KEY,
|
|
|
|
} from '../utils/constants'
|
|
|
|
import OnboardingTour from './OnboardingTour'
|
2022-07-26 19:45:27 -07:00
|
|
|
|
2022-09-21 18:23:29 -07:00
|
|
|
const sideBarAnimationDuration = 500
|
|
|
|
|
2022-07-26 19:45:27 -07:00
|
|
|
const Layout = ({ children }: { children: ReactNode }) => {
|
2022-08-19 23:06:00 -07:00
|
|
|
const connected = mangoStore((s) => s.connected)
|
2022-08-19 14:17:30 -07:00
|
|
|
const loadingMangoAccount = mangoStore((s) => s.mangoAccount.initialLoad)
|
2022-09-01 11:51:15 -07:00
|
|
|
const [isCollapsed, setIsCollapsed] = useLocalStorageState(
|
|
|
|
SIDEBAR_COLLAPSE_KEY,
|
|
|
|
false
|
|
|
|
)
|
2022-09-11 17:22:37 -07:00
|
|
|
const [showOnboardingTour] = useLocalStorageState(ONBOARDING_TOUR_KEY, false)
|
|
|
|
const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
2022-07-26 19:45:27 -07:00
|
|
|
const { width } = useViewport()
|
2022-08-13 04:29:48 -07:00
|
|
|
|
2022-07-26 19:45:27 -07:00
|
|
|
useEffect(() => {
|
|
|
|
if (width < breakpoints.lg) {
|
|
|
|
setIsCollapsed(true)
|
|
|
|
}
|
|
|
|
}, [width])
|
|
|
|
|
2022-09-21 18:23:29 -07:00
|
|
|
useEffect(() => {
|
|
|
|
const animationFrames = 5
|
|
|
|
|
|
|
|
for (let x = 1; x <= animationFrames; x++) {
|
|
|
|
setTimeout(() => {
|
|
|
|
window.dispatchEvent(new Event('resize'))
|
|
|
|
}, (sideBarAnimationDuration / animationFrames) * x)
|
|
|
|
}
|
|
|
|
}, [isCollapsed])
|
|
|
|
|
2022-07-26 19:45:27 -07:00
|
|
|
const handleToggleSidebar = () => {
|
|
|
|
setIsCollapsed(!isCollapsed)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2022-07-28 04:41:55 -07:00
|
|
|
<>
|
2022-08-22 18:47:08 -07:00
|
|
|
{connected && loadingMangoAccount ? (
|
2022-07-28 04:41:55 -07:00
|
|
|
<div className="fixed z-30 flex h-screen w-full items-center justify-center bg-[rgba(0,0,0,0.7)]">
|
|
|
|
<BounceLoader />
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-08-22 10:10:35 -07:00
|
|
|
<div className="flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all">
|
2022-07-28 04:41:55 -07:00
|
|
|
<div className="flex">
|
2022-08-22 10:10:35 -07:00
|
|
|
<div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
|
|
|
|
<BottomBar />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="fixed z-20 hidden h-screen md:block">
|
|
|
|
<button
|
2022-09-16 05:26:30 -07:00
|
|
|
className="default-transition absolute right-0 top-1/2 z-20 hidden h-8 w-3 -translate-y-1/2 rounded-none rounded-l bg-th-bkg-3 hover:bg-th-bkg-4 focus:outline-none lg:block"
|
2022-08-22 10:10:35 -07:00
|
|
|
onClick={handleToggleSidebar}
|
|
|
|
>
|
|
|
|
<ChevronRightIcon
|
2022-09-16 05:26:30 -07:00
|
|
|
className={`absolute bottom-2 -right-[2px] h-4 w-4 flex-shrink-0 ${
|
2022-08-22 10:10:35 -07:00
|
|
|
!isCollapsed ? 'rotate-180' : 'rotate-360'
|
|
|
|
}`}
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
<div className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}>
|
|
|
|
<SideNav collapsed={isCollapsed} />
|
2022-07-28 04:41:55 -07:00
|
|
|
</div>
|
2022-08-22 10:10:35 -07:00
|
|
|
</div>
|
|
|
|
|
2022-07-28 04:41:55 -07:00
|
|
|
<div
|
2022-09-21 18:23:29 -07:00
|
|
|
className={`w-full transition-all duration-${sideBarAnimationDuration} ease-in-out ${
|
2022-09-01 11:51:15 -07:00
|
|
|
isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'
|
2022-07-28 04:41:55 -07:00
|
|
|
}`}
|
|
|
|
>
|
2022-09-18 23:26:42 -07:00
|
|
|
<div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 pl-6">
|
2022-08-24 04:30:10 -07:00
|
|
|
<img
|
|
|
|
className="mr-4 h-8 w-auto md:hidden"
|
|
|
|
src="/logos/logo-mark.svg"
|
|
|
|
alt="next"
|
|
|
|
/>
|
2022-08-26 12:15:50 -07:00
|
|
|
<TopBar />
|
2022-07-26 19:45:27 -07:00
|
|
|
</div>
|
2022-09-15 18:58:35 -07:00
|
|
|
{children}
|
2022-07-26 19:45:27 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-09-11 17:22:37 -07:00
|
|
|
{showOnboardingTour && isOnboarded && connected ? (
|
|
|
|
<OnboardingTour />
|
|
|
|
) : null}
|
2022-07-28 04:41:55 -07:00
|
|
|
</>
|
2022-07-26 19:45:27 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Layout
|