bigbuffet/bigbuffet-rw
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 */
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 { 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 dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen);
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const touchStart = useRef(0);
const touchEnd = useRef<number | null>(null);
const instance = useInstance();
const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated;
@ -132,21 +132,18 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</a>
);
const handleOutsideClick: React.MouseEventHandler = (e) => {
if ((e.target as HTMLElement).isSameNode(e.currentTarget)) handleClose();
};
const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
if (e.key === 'Escape') handleClose();
};
const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => setTouchStart(e.targetTouches[0].clientX);
const handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (e) => setTouchEnd(e.targetTouches[0].clientX);
const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => touchStart.current = e.targetTouches[0].clientX;
const handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (e) => touchEnd.current = e.targetTouches[0].clientX;
const handleTouchEnd = () => {
if (touchStart - touchEnd > 100) {
const handleTouchEnd: React.TouchEventHandler<HTMLDivElement> = (e) => {
if (touchEnd.current !== null && touchStart.current - touchEnd.current > 100) {
handleClose();
}
touchEnd.current = null;
};
useEffect(() => {
@ -174,7 +171,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
onTouchEnd={handleTouchEnd}
>
<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-40': (sidebarVisible && sidebarOpen),
})}
@ -182,13 +179,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
onClick={handleClose}
/>
<div
className='fixed inset-0 z-[1000] flex'
onClick={handleOutsideClick}
>
<div
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-0': !(sidebarVisible && sidebarOpen),
})
@ -436,7 +429,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</div>
</div>
</div>
</div>
);
};