From 2b3ecc665c8e284862dcaf1e36dae6413738cc31 Mon Sep 17 00:00:00 2001 From: DrMint Date: Tue, 17 May 2022 20:09:38 +0200 Subject: [PATCH] Given better default for how to close opened menus when url or hash change --- src/components/AppLayout.tsx | 13 ++++++++++++- src/components/Panels/MainPanel.tsx | 12 ++---------- src/pages/library/[slug]/index.tsx | 29 ++++------------------------- src/pages/library/[slug]/scans.tsx | 7 +------ src/pages/wiki/chronology.tsx | 1 - 5 files changed, 19 insertions(+), 43 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 810297e..2efac06 100644 --- a/src/components/AppLayout.tsx +++ b/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): 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) { diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 4d83cfc..b77922c 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -43,7 +43,6 @@ export function MainPanel(props: Immutable): JSX.Element {
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): JSX.Element { title={langui.library} subtitle={langui.library_short_description} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} /> ): JSX.Element { title={langui.contents} subtitle={langui.contents_short_description} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} /> ): 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): JSX.Element { subtitle={langui.chronicles_short_description} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} + /> */} @@ -156,7 +152,6 @@ export function MainPanel(props: Immutable): JSX.Element { icon="feed" title={langui.news} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} /> {/* ): JSX.Element { title={langui.merch} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} + /> */} @@ -175,7 +170,6 @@ export function MainPanel(props: Immutable): JSX.Element { icon="collections" title={langui.gallery} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} /> ): JSX.Element { icon="inventory" title={langui.archives} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} /> ): JSX.Element { icon="info" title={langui.about_us} reduced={appLayout.mainPanelReduced && isDesktop} - onClick={() => appLayout.setMainPanelOpen(false)} /> {appLayout.mainPanelReduced && isDesktop ? "" : } diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx index d418e94..859103b 100644 --- a/src/pages/library/[slug]/index.tsx +++ b/src/pages/library/[slug]/index.tsx @@ -90,45 +90,24 @@ export default function LibrarySlug(props: Immutable): JSX.Element { />
- appLayout.setSubPanelOpen(false)} - /> + {item?.gallery && item.gallery.data.length > 0 && ( - appLayout.setSubPanelOpen(false)} - /> + )} - appLayout.setSubPanelOpen(false)} - /> + {item?.subitems && item.subitems.data.length > 0 && ( appLayout.setSubPanelOpen(false)} /> )} {item?.contents && item.contents.data.length > 0 && ( - appLayout.setSubPanelOpen(false)} - /> + )}
diff --git a/src/pages/library/[slug]/scans.tsx b/src/pages/library/[slug]/scans.tsx index ce183dc..ddc2b99 100644 --- a/src/pages/library/[slug]/scans.tsx +++ b/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): JSX.Element { const { item, langui, languages } = props; - const appLayout = useAppLayout(); - - sortContent(item?.contents); - const [openLightBox, LightBox] = useLightBox(); + sortContent(item?.contents); const subPanel = ( @@ -65,7 +61,6 @@ export default function LibrarySlug(props: Immutable): JSX.Element { `${content.attributes.range[0].ending_page}` : undefined } - onClick={() => appLayout.setSubPanelOpen(false)} border /> ))} diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx index a867a01..da21296 100644 --- a/src/pages/wiki/chronology.tsx +++ b/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)} /> )}