From c98c1b94674c2ea73fc89ba782f35566dd5b6b2f Mon Sep 17 00:00:00 2001
From: Sumit Bisht <sumit7beazt@gmail.com>
Date: Sun, 28 Apr 2024 19:35:57 +0530
Subject: [PATCH 1/2] added teams url under a team name in teams section

---
 .../components/(dashboard)/layout/menu-switcher.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
index bb8429adc..4b90b5c93 100644
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@@ -170,11 +170,20 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <div className="custom-scrollbar max-h-[40vh] overflow-auto">
               {teams.map((team) => (
                 <DropdownMenuItem asChild key={team.id}>
-                  <Link href={formatRedirectUrlOnSwitch(team.url)}>
+                  <Link href={formatRedirectUrlOnSwitch(team.url)} className="group">
                     <AvatarWithText
                       avatarFallback={formatAvatarFallback(team.name)}
                       primaryText={team.name}
-                      secondaryText={formatSecondaryAvatarText(team)}
+                      secondaryText={
+                        <>
+                          <span className={cn('opacity', teams.length > 1 && 'group-hover:hidden')}>
+                            {formatSecondaryAvatarText(team)}
+                          </span>
+                          <span
+                            className={cn('opacity-0', teams.length > 1 && 'group-hover:opacity-75')}
+                          >{`/t/${team.url}`}</span>
+                        </>
+                      }
                       rightSideComponent={
                         isPathTeamUrl(team.url) && (
                           <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />

From 82848e3d2e57f0f54c546d397ffca0874a181f39 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Fri, 24 May 2024 18:47:03 +1000
Subject: [PATCH 2/2] fix: animate transition

---
 .../(dashboard)/layout/menu-switcher.tsx      | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
index 4b90b5c93..4895a61b3 100644
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { motion } from 'framer-motion';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 
@@ -25,6 +26,8 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
+const MotionLink = motion(Link);
+
 export type MenuSwitcherProps = {
   user: User;
   teams: GetTeamsResponse;
@@ -170,19 +173,35 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <div className="custom-scrollbar max-h-[40vh] overflow-auto">
               {teams.map((team) => (
                 <DropdownMenuItem asChild key={team.id}>
-                  <Link href={formatRedirectUrlOnSwitch(team.url)} className="group">
+                  <MotionLink
+                    initial="initial"
+                    animate="initial"
+                    whileHover="animate"
+                    href={formatRedirectUrlOnSwitch(team.url)}
+                  >
                     <AvatarWithText
                       avatarFallback={formatAvatarFallback(team.name)}
                       primaryText={team.name}
                       secondaryText={
-                        <>
-                          <span className={cn('opacity', teams.length > 1 && 'group-hover:hidden')}>
+                        <div className="relative">
+                          <motion.span
+                            className="overflow-hidden"
+                            variants={{
+                              initial: { opacity: 1, translateY: 0 },
+                              animate: { opacity: 0, translateY: '100%' },
+                            }}
+                          >
                             {formatSecondaryAvatarText(team)}
-                          </span>
-                          <span
-                            className={cn('opacity-0', teams.length > 1 && 'group-hover:opacity-75')}
-                          >{`/t/${team.url}`}</span>
-                        </>
+                          </motion.span>
+
+                          <motion.span
+                            className="absolute inset-0"
+                            variants={{
+                              initial: { opacity: 0, translateY: '100%' },
+                              animate: { opacity: 1, translateY: 0 },
+                            }}
+                          >{`/t/${team.url}`}</motion.span>
+                        </div>
                       }
                       rightSideComponent={
                         isPathTeamUrl(team.url) && (
@@ -190,7 +209,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
                         )
                       }
                     />
-                  </Link>
+                  </MotionLink>
                 </DropdownMenuItem>
               ))}
             </div>