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

Fix sidebar menu bug

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-20 09:56:31 +02:00
parent 971b20f997
commit 3bc9b5c970
1 changed files with 206 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
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, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useRef, 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';
@ -86,8 +86,8 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
const draftCount = useAppSelector((state) => state.draft_statuses.size); const draftCount = useAppSelector((state) => state.draft_statuses.size);
// const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count()); // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen); const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen);
const [touchStart, setTouchStart] = useState(0); const touchStart = useRef(0);
const [touchEnd, setTouchEnd] = useState(0); const touchEnd = useRef<number | null>(null);
const instance = useInstance(); const instance = useInstance();
const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated; const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated;
@ -132,21 +132,18 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</a> </a>
); );
const handleOutsideClick: React.MouseEventHandler = (e) => {
if ((e.target as HTMLElement).isSameNode(e.currentTarget)) handleClose();
};
const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => { const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
if (e.key === 'Escape') handleClose(); if (e.key === 'Escape') handleClose();
}; };
const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => setTouchStart(e.targetTouches[0].clientX); const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => touchStart.current = e.targetTouches[0].clientX;
const handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (e) => setTouchEnd(e.targetTouches[0].clientX); const handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (e) => touchEnd.current = e.targetTouches[0].clientX;
const handleTouchEnd = () => { const handleTouchEnd: React.TouchEventHandler<HTMLDivElement> = (e) => {
if (touchStart - touchEnd > 100) { if (touchEnd.current !== null && touchStart.current - touchEnd.current > 100) {
handleClose(); handleClose();
} }
touchEnd.current = null;
}; };
useEffect(() => { useEffect(() => {
@ -174,7 +171,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
> >
<div <div
className={clsx('fixed inset-0 bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', { className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
'opacity-0': !(sidebarVisible && sidebarOpen), 'opacity-0': !(sidebarVisible && sidebarOpen),
'opacity-40': (sidebarVisible && sidebarOpen), 'opacity-40': (sidebarVisible && sidebarOpen),
})} })}
@ -182,13 +179,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
onClick={handleClose} onClick={handleClose}
/> />
<div
className='fixed inset-0 z-[1000] flex'
onClick={handleOutsideClick}
>
<div <div
className={ className={
clsx('fixed bottom-[60px] left-2 flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform rtl:right-2 rtl:origin-bottom-right dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none', { clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform rtl:right-2 rtl:origin-bottom-right dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none', {
'scale-100': sidebarVisible && sidebarOpen, 'scale-100': sidebarVisible && sidebarOpen,
'scale-0': !(sidebarVisible && sidebarOpen), 'scale-0': !(sidebarVisible && sidebarOpen),
}) })
@ -436,7 +429,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };