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 @@ updatedAt: 2024-05-05T00:05:00+09:00
    - [ ] 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 { JSONCanvas } from "../../../content_parser/json_canvas/types.ts";
    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 @@ export function jsonCanvasPage({ content, context }: JsonCanvasPageProps) {
    { 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 @@ export function markdownPage(
    { 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,6 +28,23 @@ const c = buildClasses("w-l", [
    "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`
  • @@ -35,6 +52,10 @@ export const layoutStyles = join(
    scroll-padding-top: calc(8px + 2.5rem); } + .${c.layout} { + --_layout-menu: 1; + } + .${c.fullscreenLayout} { display: flex; flex-direction: column;
  • @@ -163,6 +184,7 @@ export const layoutStyles = join(
    } .${c.layout} { + --_layout-menu: ; --_appbar-height: calc(var(--baseline) * 2rem); display: grid;