From 73cdb7cc64844f0a5baad81202695d518897d176 Mon Sep 17 00:00:00 2001
From: Nick O'Ferrall <nickoferrall@gmail.com>
Date: Tue, 25 Jun 2024 16:46:03 +0100
Subject: [PATCH] fix: ensure dashboard sidebar animates smoothly (#9865)

---
 packages/client/components/DashNavList/DashNavList.tsx      | 6 +++++-
 packages/client/components/DashNavList/DashNavListTeams.tsx | 1 +
 packages/client/components/SideBarStartMeetingButton.tsx    | 2 +-
 packages/client/ui/Menu/MenuContent.tsx                     | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/client/components/DashNavList/DashNavList.tsx b/packages/client/components/DashNavList/DashNavList.tsx
index 1134178d628..33a61b06965 100644
--- 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
index 9f9f867d94e..3c9e22099bb 100644
--- 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
index 265058ebf7a..8fde0c1e8f0 100644
--- 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
index c4fc631b94b..941939a2b20 100644
--- 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}