Given better default for how to close opened menus when url or hash change

src/components/AppLayout.tsx

@@ -9,7 +9,7 @@ import { useMediaMobile } from "hooks/useMediaQuery";
 import { AnchorIds } from "hooks/useScrollTopOnChange";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSwipeable } from "react-swipeable";
 import { OrderableList } from "./Inputs/OrderableList";
 import { Select } from "./Inputs/Select";
@@ -45,6 +45,17 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
 
   const sensibilitySwipe = 1.1;
 
+  useMemo(() => {
+    router.events?.on("routeChangeStart", () => {
+      appLayout.setConfigPanelOpen(false);
+      appLayout.setMainPanelOpen(false);
+      appLayout.setSubPanelOpen(false);
+    });
+    router.events?.on("hashChangeStart", () => {
+      appLayout.setSubPanelOpen(false);
+    });
+  }, [appLayout, router.events]);
+
   const handlers = useSwipeable({
     onSwipedLeft: (SwipeEventData) => {
       if (appLayout.menuGestures) {

src/components/Panels/MainPanel.tsx

@@ -43,7 +43,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         <div className="grid place-items-center">
           <Link href="/" passHref>
             <div
-              onClick={() => appLayout.setMainPanelOpen(false)}
               className={`${
                 appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
               } aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')]
@@ -114,7 +113,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         title={langui.library}
         subtitle={langui.library_short_description}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
 
       <NavOption
@@ -123,7 +121,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         title={langui.contents}
         subtitle={langui.contents_short_description}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
 
       <NavOption
@@ -132,7 +129,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         title={langui.wiki}
         subtitle={langui.wiki_short_description}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
 
       {/*
@@ -144,7 +140,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         subtitle={langui.chronicles_short_description}
         
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
+        
       />
       
       */}
@@ -156,7 +152,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         icon="feed"
         title={langui.news}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
       {/*
       <NavOption
@@ -165,7 +160,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         title={langui.merch}
         
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
+        
       />
       
       */}
@@ -175,7 +170,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         icon="collections"
         title={langui.gallery}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
 
       <NavOption
@@ -183,7 +177,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         icon="inventory"
         title={langui.archives}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
 
       <NavOption
@@ -191,7 +184,6 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
         icon="info"
         title={langui.about_us}
         reduced={appLayout.mainPanelReduced && isDesktop}
-        onClick={() => appLayout.setMainPanelOpen(false)}
       />
 
       {appLayout.mainPanelReduced && isDesktop ? "" : <HorizontalLine />}

src/pages/library/[slug]/index.tsx

@@ -90,45 +90,24 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
       />
 
       <div className="grid gap-4">
-        <NavOption
-          title={langui.summary}
-          url="#summary"
-          border
-          onClick={() => appLayout.setSubPanelOpen(false)}
-        />
+        <NavOption title={langui.summary} url="#summary" border />
 
         {item?.gallery && item.gallery.data.length > 0 && (
-          <NavOption
-            title={langui.gallery}
-            url="#gallery"
-            border
-            onClick={() => appLayout.setSubPanelOpen(false)}
-          />
+          <NavOption title={langui.gallery} url="#gallery" border />
         )}
 
-        <NavOption
-          title={langui.details}
-          url="#details"
-          border
-          onClick={() => appLayout.setSubPanelOpen(false)}
-        />
+        <NavOption title={langui.details} url="#details" border />
 
         {item?.subitems && item.subitems.data.length > 0 && (
           <NavOption
             title={isVariantSet ? langui.variants : langui.subitems}
             url={isVariantSet ? "#variants" : "#subitems"}
             border
-            onClick={() => appLayout.setSubPanelOpen(false)}
           />
         )}
 
         {item?.contents && item.contents.data.length > 0 && (
-          <NavOption
-            title={langui.contents}
-            url="#contents"
-            border
-            onClick={() => appLayout.setSubPanelOpen(false)}
-          />
+          <NavOption title={langui.contents} url="#contents" border />
         )}
       </div>
     </SubPanel>

src/pages/library/[slug]/scans.tsx

@@ -11,7 +11,6 @@ import {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import { SubPanel } from "components/Panels/SubPanel";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetLibraryItemScansQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -36,11 +35,8 @@ interface Props extends AppStaticProps {
 
 export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
   const { item, langui, languages } = props;
-  const appLayout = useAppLayout();
-
-  sortContent(item?.contents);
-
   const [openLightBox, LightBox] = useLightBox();
+  sortContent(item?.contents);
 
   const subPanel = (
     <SubPanel>
@@ -65,7 +61,6 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
                 `${content.attributes.range[0].ending_page}`
               : undefined
           }
-          onClick={() => appLayout.setSubPanelOpen(false)}
           border
         />
       ))}

src/pages/wiki/chronology.tsx

@@ -85,7 +85,6 @@ export default function Chronology(props: Props): JSX.Element {
               }
               subtitle={`${era.attributes.starting_year} → ${era.attributes.ending_year}`}
               border
-              onClick={() => appLayout.setSubPanelOpen(false)}
             />
           )}
         </>