import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import MainPanel from "./Panels/MainPanel"; import Head from "next/head"; import { useSwipeable } from "react-swipeable"; import { useRouter } from "next/router"; import Button from "components/Button"; import { prettyLanguage } from "queries/helpers"; import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery"; import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; 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 router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); const appLayout = useAppLayout(); const sensibilitySwipe = 1.1; const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; if (appLayout.mainPanelOpen) { appLayout.setMainPanelOpen(false); } else if (props.subPanel && props.contentPanel) { appLayout.setSubPanelOpen(true); } }, onSwipedRight: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; if (appLayout.subPanelOpen) { appLayout.setSubPanelOpen(false); } else { appLayout.setMainPanelOpen(true); } }, }); const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${ appLayout.mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]" }`; const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${ appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" }`; let contentPanelClass = ""; if (props.subPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ appLayout.mainPanelReduced ? "desktop:left-[26rem]" : "desktop:left-[40rem]" }`; } else if (props.contentPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ appLayout.mainPanelReduced ? "desktop:left-[6rem]" : "desktop:left-[20rem]" }`; } const turnSubIntoContent = props.subPanel && !props.contentPanel; return (
{props.title ? `${titlePrefix} - ${props.title}` : titlePrefix} {/* Navbar */}
appLayout.setMainPanelOpen(true)} > menu

{props.title}

appLayout.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 */}
{ appLayout.setMainPanelOpen(false); appLayout.setSubPanelOpen(false); }} >
{/* Sub panel */} {props.subPanel ? (
{props.subPanel}
) : ( "" )} {/* Main panel */}
{/* Main panel minimize button*/}
appLayout.setMainPanelReduced(!appLayout.mainPanelReduced) } >
{/* Language selection background */}
{ appLayout.setLanguagePanelOpen(false); }} >

Select a language

{router.locales?.sort().map((locale) => ( ))}
); }