{props.title ? `${titlePrefix} - ${props.title}` : titlePrefix}

import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import MainPanel from "./Panels/MainPanel"; import { useState } from "react"; import Head from "next/head"; import { useSwipeable } from "react-swipeable"; type AppLayoutProps = { subPanel?: React.ReactNode; subPanelIcon?: string; contentPanel?: React.ReactNode; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; title: string; }; export default function AppLayout(props: AppLayoutProps): JSX.Element { const titlePrefix = "Accord’s Library"; const [mainPanelOpen, setMainPanelOpen] = useState(false); const [subPanelOpen, setsubPanelOpen] = useState(false); const sensibilitySwipe = 1.1; const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; if (mainPanelOpen) { setMainPanelOpen(false); } else if (props.subPanel && props.contentPanel) { setsubPanelOpen(true); } }, onSwipedRight: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; if (subPanelOpen) { setsubPanelOpen(false); } else { setMainPanelOpen(true); } }, }); const mainPanelClass = "fixed desktop:left-0 desktop:top-0 desktop:bottom-0 desktop:w-[20rem]"; const subPanelClass = "fixed desktop:left-[20rem] desktop:top-0 desktop:bottom-0 desktop:w-[20rem]"; let contentPanelClass = ""; let turnSubIntoContent = false; if (props.subPanel && props.contentPanel) { contentPanelClass = "fixed desktop:left-[40rem] desktop:top-0 desktop:bottom-0 desktop:right-0"; } else if (props.contentPanel) { contentPanelClass = "fixed desktop:left-[20rem] desktop:top-0 desktop:bottom-0 desktop:right-0"; } else if (props.subPanel) { turnSubIntoContent = true; } return (

{props.title ? `${titlePrefix} - ${props.title}` : titlePrefix} {/* Navbar */}

{props.title}

setsubPanelOpen(true)} > {props.subPanel && !turnSubIntoContent ? props.subPanelIcon ? props.subPanelIcon : "tune" : ""}

{/* Content panel */} {props.contentPanel ? (

{props.contentPanel}

) : (

❮

Select one of the options in the sidebar

)} {/* Background when navbar is opened */}

{ setMainPanelOpen(false); setsubPanelOpen(false); }} >

{/* Sub panel */} {props.subPanel ? (

{props.subPanel}

) : ( "" )} {/* Main panel */}

); }