Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Fixed error with turnSubIntoContent

This commit is contained in:
DrMint 2022-02-17 17:54:07 +01:00
parent 7dd2325e97
commit 877dc01586
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/AppLayout.tsx
View File

@ -17,13 +17,25 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
const [mainPanelOpen, setMainPanelOpen] = useState(false); const [mainPanelOpen, setMainPanelOpen] = useState(false);
const [subPanelOpen, setsubPanelOpen] = useState(false); const [subPanelOpen, setsubPanelOpen] = useState(false);
const sensibilitySwipe = 1.1;
const handlers = useSwipeable({ const handlers = useSwipeable({
onSwipedLeft: () => onSwipedLeft: (SwipeEventData) => {
mainPanelOpen ? setMainPanelOpen(false) : props.subPanel && props.contentPanel ? setsubPanelOpen(true) : "", if (SwipeEventData.velocity < sensibilitySwipe) return;
onSwipedRight: () => if (mainPanelOpen) {
subPanelOpen ? setsubPanelOpen(false) : setMainPanelOpen(true), setMainPanelOpen(false);
preventDefaultTouchmoveEvent: true, } else if (props.subPanel && props.contentPanel) {
setsubPanelOpen(true);
}
},
onSwipedRight: (SwipeEventData) => {
if (SwipeEventData.velocity < sensibilitySwipe) return;
if (subPanelOpen) {
setsubPanelOpen(false);
} else {
setMainPanelOpen(true);
}
},
}); });
const mainPanelClass = const mainPanelClass =
@ -43,7 +55,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
} }
return ( return (
<div {...handlers}> <div {...handlers} className="touch-pan-y">
<Head> <Head>
<title> <title>
{props.title ? `${titlePrefix} - ${props.title}` : titlePrefix} {props.title ? `${titlePrefix} - ${props.title}` : titlePrefix}
@ -113,7 +125,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black top-0 bottom-0 right-0 left-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black top-0 bottom-0 right-0 left-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300
${ ${
turnSubIntoContent turnSubIntoContent
? "mobile:mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0" ? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
: "" : ""
} }
${subPanelOpen ? "" : "mobile:translate-x-full"}`} ${subPanelOpen ? "" : "mobile:translate-x-full"}`}