cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: adjust mobile sidebar animation

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-06 11:53:44 +07:00
parent eccf78afdb
commit daffcf1203
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
View File

@ -72,17 +72,19 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
animate={{ x: isDesktop || mobileOpen ? 0 : -320 }} animate={{ x: isDesktop || mobileOpen ? 0 : -320 }}
exit={{ x: -320 }} exit={{ x: -320 }}
transition={{ ease: 'easeInOut', duration: 0.3 }} transition={{ ease: 'easeInOut', duration: 0.3 }}
className={cn('h-full flex-none w-[320px] lg:flex hidden flex-col', { className={cn('h-full flex-none w-[320px] flex flex-col', {
flex: mobileOpen, flex: mobileOpen,
})} })}
> >
<div <div
className={cn('flex flex-col h-full pt-8 pb-0 px-6 lg:pb-8 gap-9', { className={cn(
'px-4 pt-5': mobileOpen, 'flex flex-col h-full pt-5 lg:pt-8 pb-0 px-4 lg:px-6 lg:pb-8 gap-9',
})} )}
> >
{/* Logo */} {/* Logo */}
{!mobileOpen && <Logo orgSlug={orgSlug} />} <div className="hidden lg:flex">
<Logo orgSlug={orgSlug} />
</div>
{/* Switch organization */} {/* Switch organization */}
<div className="flex flex-1 flex-col gap-4"> <div className="flex flex-1 flex-col gap-4">
<AsyncSelect <AsyncSelect

14
packages/frontend/src/pages/org-slug/layout.tsx
View File

@ -107,24 +107,16 @@ export const DashboardLayout = ({
'w-full h-full pr-1 pl-1 py-1 md:pl-0 md:pr-3 md:py-3 overflow-y-hidden min-w-[320px]', 'w-full h-full pr-1 pl-1 py-1 md:pl-0 md:pr-3 md:py-3 overflow-y-hidden min-w-[320px]',
{ 'flex-shrink-0': isSidebarOpen || !isDesktop }, { 'flex-shrink-0': isSidebarOpen || !isDesktop },
)} )}
initial={{ x: 0 }} // Initial state, no translation
animate={{ animate={{
x: isSidebarOpen ? '10px' : 0, // Translate X based on sidebar state x: isSidebarOpen || isDesktop ? 0 : -320,
}} }}
transition={{ ease: 'easeInOut', duration: 0.3 }} transition={{ ease: 'easeInOut', duration: 0.3 }}
> >
<motion.div <div className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative">
className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative"
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: isSidebarOpen ? '10px' : 0 }}
exit={{ opacity: 0, x: 100 }}
// transition={{ duration: 0.5 }}
transition={{ ease: 'easeInOut', duration: 0.3 }}
>
<OctokitProvider> <OctokitProvider>
<Outlet /> <Outlet />
</OctokitProvider> </OctokitProvider>
</motion.div> </div>
</motion.div> </motion.div>
</div> </div>
</section> </section>