hide more scrollbars

This commit is contained in:
tjs 2022-12-20 02:00:54 -05:00
parent 71b962826e
commit 1f0e5c2ad5
2 changed files with 27 additions and 29 deletions

View File

@ -64,38 +64,36 @@ const Layout = ({ children }: { children: ReactNode }) => {
</div>
) : null}
<div className="flex-grow bg-th-bkg-1 text-th-fgd-2 transition-all">
<div className="flex">
<div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
<BottomBar />
</div>
<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
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-4 hover:bg-th-bkg-4 focus:outline-none lg:block"
onClick={handleToggleSidebar}
>
<ChevronRightIcon
className={`absolute bottom-2 -right-[2px] h-4 w-4 flex-shrink-0 ${
!isCollapsed ? 'rotate-180' : 'rotate-360'
}`}
/>
</button>
<div className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}>
<SideNav collapsed={isCollapsed} />
</div>
</div>
<div
className={`w-full overflow-x-hidden transition-all duration-${sideBarAnimationDuration} ease-in-out ${
isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'
}`}
<div className="fixed z-20 hidden h-screen md:block">
<button
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-4 hover:bg-th-bkg-4 focus:outline-none lg:block"
onClick={handleToggleSidebar}
>
<div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 pl-4 md:pl-6">
<TopBar />
</div>
{children}
<ChevronRightIcon
className={`absolute bottom-2 -right-[2px] h-4 w-4 flex-shrink-0 ${
!isCollapsed ? 'rotate-180' : 'rotate-360'
}`}
/>
</button>
<div className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}>
<SideNav collapsed={isCollapsed} />
</div>
</div>
<div
className={`w-full overflow-x-hidden transition-all duration-${sideBarAnimationDuration} ease-in-out ${
isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'
}`}
>
<div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 pl-4 md:pl-6">
<TopBar />
</div>
{children}
</div>
</div>
</>
)

View File

@ -15,7 +15,7 @@ class MyDocument extends Document {
strategy="beforeInteractive"
></Script>
</Head>
<body className="bg-th-bkg-1">
<body className="hide-scroll bg-th-bkg-1">
<Main />
<NextScript />
</body>