fix: ensure dashboard sidebar animates smoothly (#9865)

ParabolInc · Jun 25, 2024 · 73cdb7c · 73cdb7c
1 parent 95431b2
commit 73cdb7c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/packages/client/components/DashNavList/DashNavList.tsx b/packages/client/components/DashNavList/DashNavList.tsx
@@ -67,7 +67,11 @@ const DashNavList = (props: Props) => {
     <div className='w-full p-2 lg:pt-4'>
       {organizations?.map((org) => (
         <div key={org.id} className='mb-3 w-full rounded-lg border border-solid border-slate-400'>
-          <div className='border-b border-solid border-slate-300 p-2'>
+          <div
+            className={
+              org.viewerTeams.length > 0 ? `border-b border-solid border-slate-300 p-2` : 'p-2'
+            }
+          >
             <div className='flex flex-wrap items-center pb-1'>
               <div className='flex min-w-0 flex-1 flex-wrap items-center justify-between'>
                 <span className='pl-2 text-base font-semibold leading-6 text-slate-700'>

diff --git a/packages/client/components/DashNavList/DashNavListTeams.tsx b/packages/client/components/DashNavList/DashNavListTeams.tsx
@@ -59,6 +59,7 @@ const DashNavListTeams = (props: Props) => {
   const getIcon = (lockedAt: string | null, isPaid: boolean | null) =>
     lockedAt || !isPaid ? 'warning' : 'group'
 
+  if (!viewerTeams.length) return null
   return (
     <div className='p-2'>
       {viewerTeams.map((team) => {

diff --git a/packages/client/components/SideBarStartMeetingButton.tsx b/packages/client/components/SideBarStartMeetingButton.tsx
@@ -9,7 +9,7 @@ const Button = styled(FlatPrimaryButton)<{isOpen: boolean}>(({isOpen}) => ({
   height: 40,
   overflow: 'hidden',
   padding: 0,
-  width: isOpen ? '100%' : 40,
+  width: isOpen ? 200 : 40,
   marginTop: 16,
   marginBottom: 14, // account for nav margin 2px
   transition: `all 300ms ${BezierCurve.DECELERATE}`,

diff --git a/packages/client/ui/Menu/MenuContent.tsx b/packages/client/ui/Menu/MenuContent.tsx
@@ -12,7 +12,7 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
     return (
       <DropdownMenu.Content
         className={twMerge(
-          'border-rad w-auto min-w-[200px] max-w-[400px] rounded-md bg-white shadow-lg outline-none',
+          'border-rad z-10 w-auto min-w-[200px] max-w-[400px] rounded-md bg-white shadow-lg outline-none',
           className
         )}
         ref={ref}