Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 00:32:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: animate transition

Browse Source
This commit is contained in:
Mythie
2024-05-24 18:47:03 +10:00
parent 22b8c2044b
commit 82848e3d2e
1 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
View File

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