@brillout/docpress 0.7.8 → 0.7.9-commit-ea6d0e2

package/Layout.tsx

@@ -42,7 +42,7 @@ function Layout({ children }: { children: React.ReactNode }) {
             </a>
           )}
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <TopNavigationLink id="doclink" aria-label={hotkeyLabel} data-balloon-pos="left">
+            <TopNavigationLink id="doclink" aria-label={hotkeyLabel} data-balloon-pos="left" data-balloon-blunt>
               Documentation
             </TopNavigationLink>
             {topNavigationList.map(({ title, url }) => (

package/autoScrollNav.ts

@@ -1,37 +1,37 @@
 export { autoScrollNav }
+export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 
-import { assert } from './utils/client'
+// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - We have to save & restore `dodocument.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+//   - Failed alternatives:
+//     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
+//     - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
+//       ```js
+//       const navigationContainerEl = document.getElementById("navigation-container")
+//       const offset = navLink.offsetTop - (window.innerHeight / 2)
+//       navigationContainerEl.scrollTop = offset
+//       ```
+//     - Doesn't work: scrollIntoView() still scrolls the main view
+//       ```js
+//       const overflowOriginal = document.documentElement.style.overflow
+//       document.documentElement.style.overflow = 'hidden'
+//       // ...
+//       document.documentElement.style.overflow = overflowOriginal
+//       ```
 
 function autoScrollNav() {
   const navigationEl = document.getElementById('navigation-content-main')
-  assert(navigationEl)
+  if (!navigationEl) return
   const href = window.location.pathname
-  const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
-  assert(navLinks.length <= 1, { navLinks, href })
+  const navLinks = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
   const navLink = navLinks[0]
   if (!navLink) return
 
-  /* Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering)
-  const navigationContainerEl = document.getElementById("navigation-container")
-  const offset = navLink.offsetTop - (window.innerHeight / 2)
-  navigationContainerEl.scrollTop = offset
-  */
-
-  /* Doesn't work: scrollIntoView() still scrolls the main view
-  const overflowOriginal = document.documentElement.style.overflow
-  document.documentElement.style.overflow = 'hidden'
-  ...
-  document.documentElement.style.overflow = overflowOriginal
-  */
-
   const scrollTopOriginal = document.documentElement.scrollTop
   navLink.scrollIntoView({
-    // @ts-ignore https://github.com/microsoft/TypeScript/issues/46654
     behavior: 'instant',
     block: 'center',
     inline: 'start',
   })
-  // Avoid scrollIntoView() from scrolling the main view.
-  // - Alternatively scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
   document.documentElement.scrollTop = scrollTopOriginal
 }

package/dist/autoScrollNav.d.ts

@@ -0,0 +1,3 @@
+export { autoScrollNav };
+export declare const autoScrollNav_SSR: string;
+declare function autoScrollNav(): void;

package/dist/autoScrollNav.js

@@ -0,0 +1,36 @@
+export { autoScrollNav };
+export var autoScrollNav_SSR = "autoScrollNav();".concat(autoScrollNav.toString());
+// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - We have to save & restore `dodocument.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+//   - Failed alternatives:
+//     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
+//     - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
+//       ```js
+//       const navigationContainerEl = document.getElementById("navigation-container")
+//       const offset = navLink.offsetTop - (window.innerHeight / 2)
+//       navigationContainerEl.scrollTop = offset
+//       ```
+//     - Doesn't work: scrollIntoView() still scrolls the main view
+//       ```js
+//       const overflowOriginal = document.documentElement.style.overflow
+//       document.documentElement.style.overflow = 'hidden'
+//       // ...
+//       document.documentElement.style.overflow = overflowOriginal
+//       ```
+function autoScrollNav() {
+    var navigationEl = document.getElementById('navigation-content-main');
+    if (!navigationEl)
+        return;
+    var href = window.location.pathname;
+    var navLinks = Array.from(navigationEl.querySelectorAll("a[href=\"".concat(href, "\"]")));
+    var navLink = navLinks[0];
+    if (!navLink)
+        return;
+    var scrollTopOriginal = document.documentElement.scrollTop;
+    navLink.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'start',
+    });
+    document.documentElement.scrollTop = scrollTopOriginal;
+}

package/dist/navigation/Navigation.d.ts

@@ -2,6 +2,8 @@ export { Navigation };
 export { NavigationMask };
 export type { NavigationData };
 export type { NavItem };
+export { groupByLevelMin };
+export type { NavItemGrouped };
 import React from 'react';
 import './Navigation.css';
 type NavigationData = Parameters<typeof Navigation>[0];
@@ -18,3 +20,7 @@ type NavItem = {
     title: string;
     titleInNav: string;
 };
+type NavItemGrouped = ReturnType<typeof groupByLevelMin>[number];
+declare function groupByLevelMin<T extends NavItem>(navItems: T[]): (T & {
+    navItemChilds: T[];
+})[];

package/dist/navigation/Navigation.js

@@ -11,12 +11,15 @@ var __assign = (this && this.__assign) || function () {
 };
 export { Navigation };
 export { NavigationMask };
+// TODO/refactor: do this only on the server side?
+export { groupByLevelMin };
 import React from 'react';
 import { NavigationHeader } from './NavigationHeader';
 import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server';
 import './Navigation.css';
 import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton';
 import { parseTitle } from '../parseTitle';
+import { autoScrollNav_SSR } from '../autoScrollNav';
 function Navigation(_a) {
     var navItems = _a.navItems, navItemsAll = _a.navItemsAll, currentUrl = _a.currentUrl, isDetachedPage = _a.isDetachedPage;
     return (React.createElement(React.Fragment, null,
@@ -27,7 +30,8 @@ function Navigation(_a) {
                     navItems.length > 1 && (React.createElement(NavigationContent, { id: "navigation-content-detached", navItems: navItems, currentUrl: currentUrl })),
                     React.createElement(DetachedPageNote, null))),
                 React.createElement(NavigationContent, { id: "navigation-content-main", navItems: navItemsAll, currentUrl: currentUrl }),
-                React.createElement(NavigationFullscreenClose, null)))));
+                React.createElement(NavigationFullscreenClose, null))),
+        React.createElement("script", { dangerouslySetInnerHTML: { __html: autoScrollNav_SSR } })));
 }
 function NavigationMask() {
     return React.createElement("div", { id: "mobile-navigation-mask" });
@@ -35,10 +39,9 @@ function NavigationMask() {
 function NavigationContent(props) {
     var navItemsWithComputed = addComputedProps(props.navItems, props.currentUrl);
     var navItemsGrouped = groupByLevelMin(navItemsWithComputed);
-    return (React.createElement("div", { id: props.id, className: "navigation-content" },
-        React.createElement("div", { className: "nav-column", style: { position: 'relative' } }, navItemsGrouped.map(function (navItemGroup, i) { return (React.createElement("div", { className: "nav-items-group", key: i },
-            React.createElement(NavItemComponent, { navItem: navItemGroup }),
-            navItemGroup.navItemChilds.map(function (navItem, j) { return (React.createElement(NavItemComponent, { navItem: navItem, key: j })); }))); }))));
+    return (React.createElement("div", { id: props.id, className: "navigation-content" }, navItemsGrouped.map(function (navItemGroup, i) { return (React.createElement("div", { className: "nav-items-group", key: i },
+        React.createElement(NavItemComponent, { navItem: navItemGroup }),
+        navItemGroup.navItemChilds.map(function (navItem, j) { return (React.createElement(NavItemComponent, { navItem: navItem, key: j })); }))); })));
 }
 function NavItemComponent(_a) {
     var _b;

package/dist/navigation/navigation-fullscreen/NavigationFullscreenButton.js

@@ -15,9 +15,9 @@ function NavigationFullscreenButton() {
                     overflow: 'hidden',
                 } },
                 React.createElement("div", null)),
-            React.createElement("div", { style: { position: 'fixed', height: '100vh', width: 20 }, "aria-label": hotkeyLabel, "data-balloon-pos": "right" }))));
+            React.createElement("div", { style: { position: 'fixed', height: '100vh', width: 20 }, "aria-label": hotkeyLabel, "data-balloon-pos": "right", "data-balloon-blunt": true }))));
 }
 function NavigationFullscreenClose() {
-    return (React.createElement("a", { id: "navigation-fullscreen-close", style: { position: 'absolute', top: 11, right: 11, zIndex: 10 }, "aria-label": hotkeyLabel, "data-balloon-pos": "left" },
+    return (React.createElement("a", { id: "navigation-fullscreen-close", style: { position: 'absolute', top: 11, right: 11, zIndex: 10 }, "aria-label": hotkeyLabel, "data-balloon-pos": "left", "data-balloon-blunt": true },
         React.createElement("img", { src: closeIcon, height: 50, width: 50, style: { display: 'block' } })));
 }

package/navigation/Navigation-items.css

@@ -22,9 +22,6 @@
   padding-right: 4px;
   text-decoration: none;
 }
-.nav-column:first-of-type > .nav-items-group:first-of-type > .nav-item-level-1:first-of-type {
-  margin-top: 20px;
-}
 .nav-item-level-1 {
   margin-top: 30px;
   font-size: 15.4px;

package/navigation/Navigation-layout.css

@@ -114,14 +114,18 @@ html.navigation-fullscreen .navigation-content {
   display: flex;
   margin: auto; /* A `max-width` is set by src/navigation/navigation-fullscreen/initNavigationFullscreen.ts */
 }
-html.navigation-fullscreen .navigation-content > .nav-column {
-  flex-grow: 1;
-  max-width: 350px;
-}
-html.navigation-fullscreen .nav-column > .nav-items-group:first-child > .nav-item-level-1:first-child {
-  margin-top: 0px;
-}
 html.navigation-fullscreen {
   /* disable scroll of main view */
   overflow: hidden !important;
 }
+html.navigation-fullscreen #navigation-body {
+  display: flex;
+}
+html.navigation-fullscreen #navigation-content-main {
+  flex-grow: 1;
+  display: grid;
+  margin-top: -25px;
+}
+html.navigation-fullscreen .nav-items-group {
+  padding: 0 10px;
+}

package/navigation/Navigation.tsx

@@ -3,12 +3,17 @@ export { NavigationMask }
 export type { NavigationData }
 export type { NavItem }
 
+// TODO/refactor: do this only on the server side?
+export { groupByLevelMin }
+export type { NavItemGrouped }
+
 import React from 'react'
 import { NavigationHeader } from './NavigationHeader'
 import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
 import { parseTitle } from '../parseTitle'
+import { autoScrollNav_SSR } from '../autoScrollNav'
 
 type NavigationData = Parameters<typeof Navigation>[0]
 
@@ -40,6 +45,8 @@ function Navigation({
           <NavigationFullscreenClose />
         </div>
       </div>
+      {/* Early scrolling, to avoid flashing */}
+      <script dangerouslySetInnerHTML={{ __html: autoScrollNav_SSR }}></script>
     </>
   )
 }
@@ -72,16 +79,14 @@ function NavigationContent(props: {
 
   return (
     <div id={props.id} className="navigation-content">
-      <div className="nav-column" style={{ position: 'relative' }}>
-        {navItemsGrouped.map((navItemGroup, i) => (
-          <div className="nav-items-group" key={i}>
-            <NavItemComponent navItem={navItemGroup} />
-            {navItemGroup.navItemChilds.map((navItem, j) => (
-              <NavItemComponent navItem={navItem} key={j} />
-            ))}
-          </div>
-        ))}
-      </div>
+      {navItemsGrouped.map((navItemGroup, i) => (
+        <div className="nav-items-group" key={i}>
+          <NavItemComponent navItem={navItemGroup} />
+          {navItemGroup.navItemChilds.map((navItem, j) => (
+            <NavItemComponent navItem={navItem} key={j} />
+          ))}
+        </div>
+      ))}
     </div>
   )
 }
@@ -130,8 +135,9 @@ function NavItemComponent({
   )
 }
 
-function groupByLevelMin(navItems: NavItemComputed[]) {
-  const navItemsGrouped: (NavItemComputed & { navItemChilds: NavItemComputed[] })[] = []
+type NavItemGrouped = ReturnType<typeof groupByLevelMin>[number]
+function groupByLevelMin<T extends NavItem>(navItems: T[]) {
+  const navItemsGrouped: (T & { navItemChilds: T[] })[] = []
   const levelMin: number = Math.min(...navItems.map((h) => h.level))
   navItems.forEach((navItem) => {
     if (navItem.level === levelMin) {

package/navigation/initPressKit.ts

@@ -14,6 +14,6 @@ function navigationHeaderRightClickInterceptor() {
   const navHeaderImg = document.querySelector('#navigation-header-logo img') as HTMLElement
   navHeaderImg.oncontextmenu = (ev) => {
     ev.preventDefault()
-    navigate('/press')
+    navigate('/press#logo')
   }
 }

package/navigation/navigation-fullscreen/NavigationFullscreenButton.tsx

@@ -25,6 +25,7 @@ function NavigationFullscreenButton() {
           style={{ position: 'fixed', height: '100vh', width: 20 }}
           aria-label={hotkeyLabel}
           data-balloon-pos="right"
+          data-balloon-blunt
         ></div>
       </a>
     </>
@@ -38,6 +39,7 @@ function NavigationFullscreenClose() {
       style={{ position: 'absolute', top: 11, right: 11, zIndex: 10 }}
       aria-label={hotkeyLabel}
       data-balloon-pos="left"
+      data-balloon-blunt
     >
       <img src={closeIcon} height={50} width={50} style={{ display: 'block' }} />
     </a>

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -7,7 +7,7 @@ import { assert } from '../../utils/client'
 let scrollPositionBeforeToggle: number
 
 function initNavigationFullscreenOnce() {
-  scrollPositionBeforeToggle = 0
+  scrollPositionBeforeToggle = 0 // Initial scroll of fullscreen navigation is 0
   initKeyBindings()
 }
 function initKeyBindings() {
@@ -20,13 +20,11 @@ function initKeyBindings() {
     },
     false,
   )
-  window.addEventListener('resize', updateColumnWidth, { passive: true })
   initTopNavigation()
 }
 function initNavigationFullscreen() {
   document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
   document.getElementById('navigation-fullscreen-close')!.onclick = toggleNavExpend
-  updateColumnWidth()
 }
 
 function toggleNavExpend() {
@@ -42,91 +40,6 @@ function hideNavigationFullScreen() {
   toggleNavExpend()
 }
 
-function updateColumnWidth() {
-  const navMinWidth = 299
-  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-items-group'))
-  const numberOfColumnsMax = navH1Groups.length
-
-  const widthAvailable = getViewportWidth()
-  const numberOfColumns = Math.max(1, Math.min(numberOfColumnsMax, Math.floor(widthAvailable / navMinWidth)))
-
-  let columns = navH1Groups.map((navH1Group) => {
-    const column = [
-      {
-        element: navH1Group,
-        elementHeight: navH1Group.children.length,
-      },
-    ]
-    return column
-  })
-
-  mergeColumns(columns, numberOfColumns)
-
-  const navContent = document.getElementById('navigation-content-main')!
-
-  Array.from(navContent.children).forEach((child) => {
-    assert(child.className === 'nav-column')
-  })
-  navContent.innerHTML = ''
-
-  columns.forEach((column) => {
-    const columnEl = document.createElement('div')
-    columnEl.className = 'nav-column'
-    column.forEach(({ element }) => {
-      columnEl.appendChild(element)
-    })
-    navContent.appendChild(columnEl)
-  })
-
-  const navItemMaxWidth = 350
-  navContent.style.maxWidth = `${numberOfColumns * navItemMaxWidth}px`
-}
-function getViewportWidth(): number {
-  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  return document.documentElement.clientWidth
-}
-
-function mergeColumns<T>(columns: { element: T; elementHeight: number }[][], maxNumberOfColumns: number) {
-  assert(columns.length > 0)
-  assert(maxNumberOfColumns > 0)
-  if (columns.length <= maxNumberOfColumns) {
-    return columns
-  }
-
-  let mergeCandidate = {
-    i: -1,
-    mergeHeight: Infinity,
-  }
-  for (let i = 0; i <= columns.length - 2; i++) {
-    const column1 = columns[i + 0]
-    const column2 = columns[i + 1]
-    const column1Height = sum(column1.map((c) => c.elementHeight))
-    const column2Height = sum(column2.map((c) => c.elementHeight))
-    const mergeHeight = column1Height + column2Height
-    if (mergeCandidate.mergeHeight > mergeHeight) {
-      mergeCandidate = {
-        i,
-        mergeHeight,
-      }
-    }
-  }
-
-  {
-    const { i } = mergeCandidate
-    assert(-1 < i && i < columns.length - 1, { i, columnsLength: columns.length, maxNumberOfColumns })
-    columns[i] = [...columns[i], ...columns[i + 1]]
-    columns.splice(i + 1, 1)
-  }
-
-  mergeColumns(columns, maxNumberOfColumns)
-}
-
-function sum(arr: number[]): number {
-  let total = 0
-  arr.forEach((n) => (total += n))
-  return total
-}
-
 function initTopNavigation() {
   document.addEventListener('click', (ev) => {
     const linkTag = findLinkTag(ev.target as HTMLElement)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.7.8",
+  "version": "0.7.9-commit-ea6d0e2",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/getCSSForResponsiveFullcreenNavItems.ts

@@ -0,0 +1,99 @@
+export { getCSSForResponsiveFullcreenNavItems }
+
+import assert from 'assert'
+import { type NavItemGrouped } from '../navigation/Navigation'
+
+function getCSSForResponsiveFullcreenNavItems(navItemsGrouped: NavItemGrouped[]) {
+  const columnWidthMin = 300
+  const columnWidthMax = 350
+  const columnsUnmerged = navItemsGrouped.map((navItem) => navItem.navItemChilds.length)
+  let CSS = '\n'
+  for (let numberOfColumns = navItemsGrouped.length; numberOfColumns >= 1; numberOfColumns--) {
+    let CSS_block: string[] = []
+    CSS_block.push(
+      ...[
+        //
+        `  html.navigation-fullscreen #navigation-content-main {`,
+        `    max-width: ${columnWidthMax * numberOfColumns}px;`,
+        `    grid-template-columns: repeat(${numberOfColumns}, auto);`,
+        `  }`,
+      ],
+    )
+    const columnsIdMap = determineColumns(columnsUnmerged, numberOfColumns)
+    columnsIdMap.forEach((columnGroupedId, columnUngroupedId) => {
+      CSS_block.push(
+        ...[
+          //
+          `  .nav-items-group:nth-child(${columnUngroupedId + 1}) {`,
+          `    grid-column: ${columnGroupedId + 1};`,
+          `  }`,
+        ],
+      )
+    })
+    const noMediaQuery = numberOfColumns === navItemsGrouped.length
+    if (!noMediaQuery) {
+      const maxWidth = (numberOfColumns + 1) * columnWidthMin - 1
+      CSS_block = [
+        //
+        `@media screen and (max-width: ${maxWidth}px) {`,
+        ...CSS_block,
+        `}`,
+      ]
+    }
+    CSS += CSS_block.join('\n') + '\n'
+  }
+  return CSS
+}
+
+function determineColumns(columnsUnmerged: number[], numberOfColumns: number): number[] {
+  assert(numberOfColumns <= columnsUnmerged.length)
+  const columnsMergingInit: ColumnMerging[] = columnsUnmerged.map((columnHeight, i) => ({
+    columnIdsMerged: [i],
+    heightTotal: columnHeight,
+  }))
+  const columnsMerged = mergeColumns(columnsMergingInit, numberOfColumns)
+  const columnsIdMap: number[] = new Array(columnsUnmerged.length)
+  assert(columnsMerged.length === numberOfColumns)
+  columnsMerged.forEach((columnMerged, columnMergedId) => {
+    columnMerged.columnIdsMerged.forEach((columnId) => {
+      columnsIdMap[columnId] = columnMergedId
+    })
+  })
+  assert(columnsIdMap.length === columnsUnmerged.length)
+  return columnsIdMap
+}
+type ColumnMerging = { columnIdsMerged: number[]; heightTotal: number }
+function mergeColumns(columnsMerging: ColumnMerging[], maxNumberOfColumns: number): ColumnMerging[] {
+  if (columnsMerging.length <= maxNumberOfColumns) return columnsMerging
+
+  let mergeCandidate: null | (ColumnMerging & { i: number }) = null
+  for (let i = 0; i <= columnsMerging.length - 2; i++) {
+    const column1 = columnsMerging[i + 0]
+    const column2 = columnsMerging[i + 1]
+    const heightTotal = column1.heightTotal + column2.heightTotal
+    if (!mergeCandidate || mergeCandidate.heightTotal > heightTotal) {
+      mergeCandidate = {
+        i,
+        columnIdsMerged: [
+          //
+          ...column1.columnIdsMerged,
+          ...column2.columnIdsMerged,
+        ],
+        heightTotal,
+      }
+    }
+  }
+  assert(mergeCandidate)
+
+  const { i } = mergeCandidate
+  assert(-1 < i && i < columnsMerging.length - 1)
+  const columnsMergingMod = [
+    //
+    ...columnsMerging.slice(0, i),
+    mergeCandidate,
+    ...columnsMerging.slice(i + 2),
+  ]
+
+  assert(columnsMergingMod.length === columnsMerging.length - 1)
+  return mergeColumns(columnsMergingMod, maxNumberOfColumns)
+}

package/renderer/onRenderClient.tsx

@@ -18,12 +18,13 @@ import { installSectionUrlHashs } from '../installSectionUrlHashs'
 import { addFeatureClickHandlers, addTwitterWidgets } from '../components/FeatureList/FeatureList.client'
 
 addEcosystemStamp()
-initOnLinkClick()
 initNavigationFullscreenOnce()
 
 let root: ReactDOM.Root
 let renderPromiseResolve: () => void
 async function onRenderClient(pageContext: PageContextClient) {
+  onRenderStart()
+
   // TODO: stop using any
   const pageContextResolved: PageContextResolved = (pageContext as any).pageContextResolved
   const renderPromise = new Promise<void>((r) => {
@@ -52,6 +53,11 @@ function applyHead(pageContext: PageContextClient) {
   document.title = pageContextResolved.documentTitle
 }
 
+function onRenderStart() {
+  hideMobileNavigation()
+  hideNavigationFullScreen()
+}
+
 function onRenderDone() {
   autoScrollNav()
   installSectionUrlHashs()
@@ -69,27 +75,6 @@ function OnRenderDoneHook({ children }: { children: React.ReactNode }) {
   return children
 }
 
-function initOnLinkClick() {
-  document.addEventListener('click', (ev) => {
-    const linkTag = findLinkTag(ev.target as HTMLElement)
-    if (!linkTag) return
-    const url = linkTag.getAttribute('href')
-    if (!url) return
-    hideMobileNavigation()
-    hideNavigationFullScreen()
-  })
-}
-function findLinkTag(target: HTMLElement): null | HTMLElement {
-  while (target.tagName !== 'A') {
-    const { parentNode } = target
-    if (!parentNode) {
-      return null
-    }
-    target = parentNode as HTMLElement
-  }
-  return target
-}
-
 function setHydrationIsFinished() {
   // Used by:
   // - https://github.com/vikejs/vike/blob/9d67f3dd4bdfb38c835186b8147251e0e3b06657/docs/.testRun.ts#L22

package/renderer/onRenderHtml.tsx

@@ -6,6 +6,8 @@ import { assert } from '../utils/server'
 import type { PageContextResolved } from '../config/resolvePageContext'
 import { getPageElement } from './getPageElement'
 import type { OnRenderHtmlAsync } from 'vike/types'
+import { groupByLevelMin } from '../navigation/Navigation'
+import { getCSSForResponsiveFullcreenNavItems } from './getCSSForResponsiveFullcreenNavItems'
 
 const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext,
@@ -15,6 +17,12 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
 
   const page = getPageElement(pageContext, pageContextResolved)
 
+  const { navItemsAll } = pageContextResolved.navigationData
+  const navItemsGrouped = groupByLevelMin(navItemsAll)
+  const CSSResponsiveNavItems = getCSSForResponsiveFullcreenNavItems(navItemsGrouped)
+
+  pageContextResolved.navigationData.navItems
+
   const descriptionTag = pageContextResolved.isLandingPage
     ? dangerouslySkipEscape(`<meta name="description" content="${pageContextResolved.meta.tagline}" />`)
     : ''
@@ -30,6 +38,7 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
         ${descriptionTag}
         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
         ${getOpenGraphTags(pageContext.urlPathname, pageContextResolved.documentTitle, pageContextResolved.meta)}
+        <style>${dangerouslySkipEscape(CSSResponsiveNavItems)}</style>
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>