Client-side script to close menu on navigation (back/forward) On menu-layout, navigating back/forward is confusing due to menu appears after the navigation.

Changes

4 changed files (+28/-6)

• docs/en/Roadmap.md
  • @@ -1,6 +1,6 @@
    --- createdAt: 2024-04-15T23:00:00+09:00 - updatedAt: 2024-05-05T00:05:00+09:00 + updatedAt: 2024-05-10T01:00:00+09:00 --- ## v1.0
  • @@ -32,7 +32,7 @@ - [ ] Resolve document internal wikilink
    - [ ] Headings down levelling option (render `# Foo` as `<h2>Foo</h2>`) - [x] Client script to retain open/close state of document tree - [ ] Client script to sync active table of contents entry to current scroll position - - [ ] Client script to close site menu on navigation event + - [x] Client script to close site menu on navigation event ## v0.1
• page_builder/default_theme/pages/json_canvas.tsx
  • @@ -12,7 +12,7 @@
    import type { BuildContext } from "../context.ts"; import { buildClasses, css, join } from "../css.ts"; - import { layout, layoutStyles } from "../widgets/layout.tsx"; + import { layout, layoutScript, layoutStyles } from "../widgets/layout.tsx"; import { documentTree, documentTreeScript,
  • @@ -84,7 +84,7 @@ return h(null, [
    { type: "doctype" }, template({ context, - scripts: [pageMetadataScript, documentTreeScript], + scripts: [pageMetadataScript, layoutScript, documentTreeScript], body: layout({ fullscreen: true, nav: documentTree({ context }),
• page_builder/default_theme/pages/markdown.tsx
  • @@ -11,7 +11,7 @@ import type { BuildContext } from "../context.ts";
    import { buildClasses, css, join } from "../css.ts"; import type { TocItem } from "../hast/hast_util_toc_mut.ts"; - import { layout, layoutStyles } from "../widgets/layout.tsx"; + import { layout, layoutScript, layoutStyles } from "../widgets/layout.tsx"; import { toc, tocStyles } from "../widgets/toc.tsx"; import { documentTree,
  • @@ -89,7 +89,7 @@ return h(null, [
    { type: "doctype" }, template({ context, - scripts: [pageMetadataScript, documentTreeScript], + scripts: [pageMetadataScript, layoutScript, documentTreeScript], body: layout({ nav: documentTree({ context }), footer: footer({ copyright: context.copyright }),
• page_builder/default_theme/widgets/layout.tsx
  • @@ -28,11 +28,32 @@ "paddingAppbarBorder",
    "fullscreenLayout", ]); + export const layoutScript = ` + window.addEventListener("pageshow", (ev) => { + const check = document.getElementById("__macana_menu_open"); + if (!check) { + return; + } + + if (ev.persisted) { + const isMenuLayout = getComputedStyle(check).getPropertyValue("--_layout-menu"); + if (isMenuLayout) { + document.documentElement.focus(); + check.checked = false; + } + } + }); + `.trim(); + export const layoutStyles = join( lucide.lucideIconStyles, css` html { scroll-padding-top: calc(8px + 2.5rem); + } + + .${c.layout} { + --_layout-menu: 1; } .${c.fullscreenLayout} {
  • @@ -163,6 +184,7 @@ scroll-padding-top: calc(var(--baseline) * 1rem);
    } .${c.layout} { + --_layout-menu: ; --_appbar-height: calc(var(--baseline) * 2rem); display: grid;