matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animate sidebar menu

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-05-05 14:17:47 +02:00
parent 8fb6bf60ac
commit bacd220771
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/sidebar-menu.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/interactive-supports-focus */ /* eslint-disable jsx-a11y/interactive-supports-focus */
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useCallback } from 'react'; import React, { useCallback, useState } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Link, NavLink } from 'react-router-dom'; import { Link, NavLink } from 'react-router-dom';
@@ -80,6 +80,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
const settings = useAppSelector((state) => getSettings(state)); const settings = useAppSelector((state) => getSettings(state));
const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count()); const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
const draftCount = useAppSelector((state) => state.draft_statuses.size); const draftCount = useAppSelector((state) => state.draft_statuses.size);
const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen);
const closeButtonRef = React.useRef(null); const closeButtonRef = React.useRef(null);
@@ -122,6 +123,13 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
dispatch(fetchOwnAccounts()); dispatch(fetchOwnAccounts());
}, []); }, []);
React.useEffect(() => {
// eslint-disable-next-line compat/compat
requestAnimationFrame(() => {
setSidebarVisible(sidebarOpen);
});
}, [sidebarOpen]);
if (!account) return null; if (!account) return null;
return ( return (
@@ -135,7 +143,10 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
} }
> >
<div <div
className='fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90' className={clsx('fixed inset-0 bg-gray-500 transition-opacity black:bg-gray-900 dark:bg-gray-700', {
'opacity-0': !sidebarVisible,
'opacity-90': sidebarVisible,
})}
role='button' role='button'
onClick={handleClose} onClick={handleClose}
/> />
@@ -144,8 +155,8 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<div <div
className={ className={
clsx({ 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': true, '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 transition-transform ease-in-out': true,
'!translate-x-0': sidebarOpen, '!translate-x-0': sidebarVisible,
}) })
} }
> >