bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change sidebar menu transition

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-16 09:33:04 +02:00
parent eae3465c21
commit 0a1232f460
1 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/sidebar-menu.tsx
View file

@ -149,6 +149,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
}, []);
useEffect(() => {
if (sidebarOpen) containerRef.current?.querySelector('a')?.focus();
setTimeout(() => setSidebarVisible(sidebarOpen), sidebarOpen ? 0 : 150);
}, [sidebarOpen]);
@ -183,8 +184,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<div
className={
clsx({
'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs no-reduce-motion:transition-transform ease-in-out left-2 bottom-[60px] max-h-[calc(100vh-68px)] fixed rounded-xl dark:border dark:border-gray-800 shadow-lg dark:shadow-none': true,
'!translate-x-0': sidebarVisible && sidebarOpen,
'fixed bottom-[60px] left-2 flex max-h-[calc(100vh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none': true,
'scale-100': sidebarVisible && sidebarOpen,
'scale-0': !(sidebarVisible && sidebarOpen),
})
}
>