@brillout/docpress 0.8.14 → 0.8.16

package/navigation/Collapsible.tsx

@@ -0,0 +1,64 @@
+export { Collapsible }
+
+import React, { useRef, useState } from 'react'
+import { cls } from '../utils/cls'
+import './Collapsible.css'
+
+function Collapsible({
+  head,
+  children,
+  disabled = false,
+  collapsedInit,
+  marginBottomOnExpand,
+}: {
+  head: (onClick: () => void) => React.ReactNode
+  children: React.ReactNode
+  disabled: boolean
+  collapsedInit: boolean
+  marginBottomOnExpand?: number
+}) {
+  const [collapsed, setCollapsed] = useState(collapsedInit)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const onClick = () => {
+    if (!disabled) {
+      setIsAnimating(true)
+      if (!collapsed) {
+        // If expanding, set height to current scroll height before animation
+        contentRef.current!.style.height = `${contentRef.current!.scrollHeight}px`
+        // Force a reflow
+        contentRef.current!.offsetHeight
+      }
+      setCollapsed((prev) => !prev)
+    }
+  }
+
+  const onTransitionEnd = () => {
+    setIsAnimating(false)
+  }
+
+  const showContent = disabled ? true : !collapsed
+
+  return (
+    <div
+      className={cls(['collapsible', !disabled && (showContent ? 'collapsible-expanded' : 'collapsible-collapsed')])}
+    >
+      {head(onClick)}
+      <div
+        ref={contentRef}
+        onTransitionEnd={onTransitionEnd}
+        style={{
+          height: !showContent ? 0 : isAnimating ? contentRef.current!.scrollHeight : 'auto',
+          overflow: 'hidden',
+          transition: 'none 0.3s ease',
+          transitionProperty: 'height, margin-bottom',
+          marginBottom: (showContent && marginBottomOnExpand) || undefined,
+        }}
+        aria-expanded={showContent}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/navigation/Navigation.css

@@ -20,7 +20,7 @@
   padding-left: var(--padding-left-global);
   padding-right: 4px;
 }
-.nav-item-level-1 + .nav-item-level-4 {
+.nav-item-level-4:first-child {
   padding-top: 0;
   margin-top: -2px;
 }
@@ -59,9 +59,6 @@
   padding: var(--padding) 0;
   padding-left: calc(var(--padding-left-global) + 5px);
 }
-#menu-modal .nav-item-level-3 {
-  border-right: 4px solid #eee;
-}
 .nav-item-level-3 {
   --shadow-size: 9px;
   --shadow-color: rgba(0, 0, 0, 0.11);
@@ -106,8 +103,17 @@
   position: absolute;
   top: 0;
   left: 0;
-  transform: translate(0, 53px);
-  height: calc(100% - 53px);
+  height: 100%;
   width: 3px;
   z-index: 99;
 }
+
+:has(> .collapsible-icon) {
+  position: relative;
+}
+.collapsible-icon {
+  position: absolute;
+  top: calc(100% / 2 - 6px);
+  margin-left: 9px;
+  vertical-align: middle;
+}

package/navigation/Navigation.tsx

@@ -2,7 +2,6 @@
 export { NavigationContent }
 // TODO/refactor: do this only on the server side?
 export type { NavItem }
-export type { NavItemAll }
 
 import React, { useEffect, useState } from 'react'
 import { assert, assertWarning, jsxToTextContent } from '../utils/server'
@@ -12,7 +11,9 @@ import { usePageContext } from '../renderer/usePageContext'
 import '@docsearch/css'
 import '../global.d.ts'
 import { getViewportWidth } from '../utils/getViewportWidth'
-import { navWidthMax, navWidthMin } from '../Layout'
+import { navLeftWidthMax, navLeftWidthMin } from '../Layout'
+import { throttle } from '../utils/throttle'
+import { Collapsible } from './Collapsible'
 
 type NavItem = {
   level: number
@@ -21,8 +22,6 @@ type NavItem = {
   title: string
   titleInNav: string
   menuModalFullWidth?: true
-}
-type NavItemAll = NavItem & {
   isColumnEntry?: ColumnMap
 }
 function NavigationContent(props: {
@@ -35,12 +34,12 @@ function NavigationContent(props: {
 
   let navContent: React.ReactNode
   if (!props.columnLayout) {
-    navContent = navItemsWithComputed
-      .filter((navItemGroup) => !props.showOnlyRelevant || navItemGroup.isRelevant)
-      .map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
+    let navItemsRelevant = navItemsWithComputed
+    if (props.showOnlyRelevant) navItemsRelevant = navItemsRelevant.filter((navItemGroup) => navItemGroup.isRelevant)
+    navContent = navItemsRelevant.map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
   } else {
     assert(!props.showOnlyRelevant)
-    navContent = <NavigationColumnLayout navItemsWithComputed={navItemsWithComputed} />
+    navContent = <NavigationWithColumnLayout navItemsWithComputed={navItemsWithComputed} />
   }
 
   return (
@@ -50,75 +49,124 @@ function NavigationContent(props: {
   )
 }
 
-function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[] }) {
+function NavigationWithColumnLayout(props: { navItemsWithComputed: NavItemComputed[] }) {
   let [viewportWidth, setViewportWidth] = useState<number | undefined>()
   const updateviewportwidth = () => setViewportWidth(getViewportWidth())
   useEffect(() => {
     updateviewportwidth()
-    window.addEventListener('resize', updateviewportwidth, { passive: true })
+    window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
-
   const navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth)
-  const margin = 40
-
   return (
     <>
-      {navItemsByColumnLayouts.map(({ columns, isFullWidth }, i) => (
-        <div
-          key={i}
-          style={{
-            display: 'flex',
-            width: columns.length * (navWidthMax + 20),
-            justifyContent: 'space-between',
-            maxWidth: '100%',
-            margin: 'auto',
-            marginTop: i === 0 ? -1 * margin : undefined,
-            marginBottom: margin,
-          }}
-        >
-          {columns.map((columnEntry, j) => (
-            <div
-              key={j}
-              style={{
-                flexGrow: 1,
-                maxWidth: navWidthMax,
-                display: 'flex',
-                flexDirection: 'column',
-                paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
-              }}
-            >
-              {columnEntry.map((navItems, k) => (
-                <div key={k} style={{ marginTop: isFullWidth ? undefined : margin }}>
-                  {navItems.map((navItem, l) => (
-                    <NavItemComponent navItem={navItem} key={l} />
-                  ))}
-                  <CategoryBorder navItemLevel1={isFullWidth ? undefined : navItems[0]!} />
-                </div>
-              ))}
+      {navItemsByColumnLayouts.map((columnLayout, i) => (
+        <div key={i}>
+          {columnLayout.isFullWidthCategory ? (
+            <div style={{ marginTop: 0 }}>
+              <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                <Collapsible
+                  head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
+                  disabled={columnLayout.columns.length > 1}
+                  collapsedInit={!columnLayout.navItemLevel1.isRelevant}
+                  marginBottomOnExpand={10}
+                >
+                  <ColumnsLayout className="collapsible">
+                    {columnLayout.columns.map((column, j) => (
+                      <Column key={j}>
+                        {column.navItems.map((navItem, k) => (
+                          <NavItemComponent key={k} navItem={navItem} />
+                        ))}
+                      </Column>
+                    ))}
+                    <CategoryBorder navItemLevel1={columnLayout.navItemLevel1} />
+                  </ColumnsLayout>
+                </Collapsible>
+              </ColumnsWrapper>
             </div>
-          ))}
-          <CategoryBorder navItemLevel1={!isFullWidth ? undefined : columns[0][0][0]!} />
+          ) : (
+            <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+              <ColumnsLayout>
+                {columnLayout.columns.map((column, j) => (
+                  <Column key={j}>
+                    {column.categories.map((category, k) => (
+                      <div key={k} style={{ marginBottom: 0 }}>
+                        <Collapsible
+                          head={(onClick) => <NavItemComponent navItem={category.navItemLevel1} onClick={onClick} />}
+                          disabled={columnLayout.columns.length > 1}
+                          collapsedInit={!category.navItemLevel1.isRelevant}
+                          marginBottomOnExpand={40}
+                        >
+                          {category.navItems.map((navItem, l) => (
+                            <NavItemComponent key={l} navItem={navItem} />
+                          ))}
+                          <CategoryBorder navItemLevel1={category.navItemLevel1} />
+                        </Collapsible>
+                      </div>
+                    ))}
+                  </Column>
+                ))}
+              </ColumnsLayout>
+            </ColumnsWrapper>
+          )}
         </div>
       ))}
     </>
   )
 }
-
-function CategoryBorder({ navItemLevel1 }: { navItemLevel1?: NavItemComputed }) {
-  return !navItemLevel1 ? null : (
+function Column({ children }: { children: React.ReactNode }) {
+  return (
     <div
-      className="category-border"
       style={{
-        background: navItemLevel1.color!,
+        flexGrow: 1,
+        maxWidth: navLeftWidthMax,
+        display: 'flex',
+        flexDirection: 'column',
       }}
-    />
+    >
+      {children}
+    </div>
   )
 }
+function ColumnsWrapper({ children, numberOfColumns }: { children: React.ReactNode; numberOfColumns: number }) {
+  return (
+    <div
+      style={{
+        width: numberOfColumns * (navLeftWidthMax + 20),
+        maxWidth: '100%',
+        margin: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+function ColumnsLayout({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div
+      className={className}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+function CategoryBorder({ navItemLevel1 }: { navItemLevel1: NavItemComputed }) {
+  assert(navItemLevel1.level === 1)
+  return <div className="category-border" style={{ background: navItemLevel1.color! }} />
+}
 
+type PropsNavItem = PropsAnchor & PropsSpan
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
+type PropsSpan = React.HTMLProps<HTMLSpanElement>
 function NavItemComponent({
   navItem,
+  onClick,
 }: {
   navItem: NavItemComputed
+  onClick?: PropsNavItem['onClick']
 }) {
   assert([1, 2, 3, 4].includes(navItem.level), navItem)
 
@@ -141,9 +189,20 @@ function NavItemComponent({
     )
   }
 
-  const props: PropsAnchor & PropsSpan = {
+  let children: JSX.Element = titleInNavJsx
+  if (navItem.level === 1) {
+    children = (
+      <>
+        {children}
+        <Chevron className="collapsible-icon" height={9} />
+      </>
+    )
+  }
+
+  const props: PropsNavItem = {
     href: navItem.url ?? undefined,
-    children: titleInNavJsx,
+    children,
+    onClick,
     className: [
       'nav-item',
       'nav-item-level-' + navItem.level,
@@ -159,8 +218,6 @@ function NavItemComponent({
       ['--category-color']: navItem.color!,
     }
   }
-  type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
-  type PropsSpan = React.HTMLProps<HTMLSpanElement>
 
   if (navItem.level === 2 || navItem.level === 3) {
     return <a {...props} />
@@ -169,45 +226,88 @@ function NavItemComponent({
   }
 }
 
-type NavItemsByColumnLayout = { columns: NavItemComputed[][][]; isFullWidth: boolean }
+type NavItemsByColumnLayout =
+  | {
+      columns: {
+        categories: {
+          navItemLevel1: NavItemComputed
+          navItems: NavItemComputed[]
+        }[]
+      }[]
+      isFullWidthCategory: false
+    }
+  | {
+      navItemLevel1: NavItemComputed
+      columns: { navItems: NavItemComputed[] }[]
+      isFullWidthCategory: true
+    }
+type NavItemsByColumnLayout2 = { columns: NavItemComputed[][][]; isFullWidthCategory: boolean }
 function getNavItemsByColumnLayouts(navItems: NavItemComputed[], viewportWidth: number = 0): NavItemsByColumnLayout[] {
   const navItemsByColumnEntries = getNavItemsByColumnEntries(navItems)
-  const numberOfColumnsMax = Math.floor(viewportWidth / navWidthMin) || 1
+  const numberOfColumnsMax = Math.floor(viewportWidth / navLeftWidthMin) || 1
   const navItemsByColumnLayouts: NavItemsByColumnLayout[] = navItemsByColumnEntries.map(
-    ({ columnEntries, isFullWidth }) => {
+    ({ columnEntries, isFullWidthCategory }) => {
       const numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length)
-      const columns: NavItemComputed[][][] = []
-      columnEntries.forEach((columnEntry) => {
-        const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
-        assert(idx >= 0)
-        columns[idx] ??= []
-        columns[idx].push(columnEntry.navItems)
-      })
-      const navItemsByColumnLayout: NavItemsByColumnLayout = { columns, isFullWidth }
-      return navItemsByColumnLayout
+      if (!isFullWidthCategory) {
+        const columns: {
+          categories: {
+            navItemLevel1: NavItemComputed
+            navItems: NavItemComputed[]
+          }[]
+        }[] = []
+        columnEntries.forEach((columnEntry) => {
+          const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
+          assert(idx >= 0)
+          columns[idx] ??= { categories: [] }
+          const navItemLevel1 = columnEntry.navItems[0]
+          const navItems = columnEntry.navItems.slice(1)
+          columns[idx].categories.push({ navItemLevel1, navItems })
+        })
+        const navItemsByColumnLayout: NavItemsByColumnLayout = { columns, isFullWidthCategory }
+        return navItemsByColumnLayout
+      } else {
+        let navItemLevel1: NavItemComputed
+        const columns: { navItems: NavItemComputed[] }[] = []
+        columnEntries.forEach((columnEntry, i) => {
+          const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
+          assert(idx >= 0)
+          columns[idx] ??= { navItems: [] }
+          let { navItems } = columnEntry
+          if (i === 0) {
+            navItemLevel1 = navItems[0]
+            navItems = navItems.slice(1)
+          }
+          columns[idx].navItems.push(...navItems)
+        })
+        const navItemsByColumnLayout: NavItemsByColumnLayout = {
+          columns,
+          navItemLevel1: navItemLevel1!,
+          isFullWidthCategory,
+        }
+        return navItemsByColumnLayout
+      }
     },
   )
   return navItemsByColumnLayouts
 }
-
-type NavItemsByColumnEntries = { columnEntries: ColumnEntry[]; isFullWidth: boolean }[]
+type NavItemsByColumnEntries = { columnEntries: ColumnEntry[]; isFullWidthCategory: boolean }[]
 type ColumnEntry = { navItems: NavItemComputed[]; columnMap: ColumnMap }
 type ColumnMap = Record<number, number>
 function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColumnEntries {
   const navItemsByColumnEntries: NavItemsByColumnEntries = []
   let columnEntries: ColumnEntry[] = []
   let columnEntry: ColumnEntry
-  let isFullWidth: boolean | undefined
+  let isFullWidthCategory: boolean | undefined
   navItems.forEach((navItem) => {
     if (navItem.level === 1) {
-      const isFullWidthPrevious = isFullWidth
-      isFullWidth = !!navItem.menuModalFullWidth
-      if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-        navItemsByColumnEntries.push({ columnEntries, isFullWidth: isFullWidthPrevious })
+      const isFullWidthCategoryPrevious = isFullWidthCategory
+      isFullWidthCategory = !!navItem.menuModalFullWidth
+      if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
+        navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious })
         columnEntries = []
       }
     }
-    assert(isFullWidth !== undefined)
+    assert(isFullWidthCategory !== undefined)
     if (navItem.isColumnEntry) {
       assert(navItem.level === 1 || navItem.level === 4)
       columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
@@ -217,13 +317,13 @@ function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColu
       columnEntry.navItems.push(navItem)
     }
   })
-  assert(isFullWidth !== undefined)
-  navItemsByColumnEntries.push({ columnEntries, isFullWidth })
+  assert(isFullWidthCategory !== undefined)
+  navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory })
   return navItemsByColumnEntries
 }
 
 type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]
-function getNavItemsWithComputed(navItems: NavItemAll[], currentUrl: string) {
+function getNavItemsWithComputed(navItems: NavItem[], currentUrl: string) {
   let navItemIdx: number | undefined
   const navItemsWithComputed = navItems.map((navItem, i) => {
     assert([1, 2, 3, 4].includes(navItem.level), navItem)
@@ -269,3 +369,14 @@ function getNavItemsWithComputed(navItems: NavItemAll[], currentUrl: string) {
 
   return navItemsWithComputed
 }
+
+function Chevron(props: React.HTMLProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 512 292.52" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="#aaa"
+        d="M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z"
+      />
+    </svg>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/{determineColumnEntries.ts → determineNavItemsColumnLayout.ts}

@@ -1,14 +1,30 @@
-export { determineColumnEntries }
+export { determineNavItemsColumnLayout }
 
 // A CSS-only solution doesn't seem to exist.
 // - https://github.com/brillout/docpress/blob/2e41d8b9df098ff8312b02f7e9d41a202548e2b9/src/renderer/getStyleColumnLayout.ts#L4-L26
 
-import { type NavItemAll } from '../navigation/Navigation'
+import { type NavItem } from '../navigation/Navigation'
 import { assert, assertUsage, isBrowser } from '../utils/server'
 assert(!isBrowser())
 
-type NavItemWithLength = NavItemAll & { numberOfHeadings: number | null }
-function determineColumnEntries(navItems: NavItemAll[]): undefined {
+function determineNavItemsColumnLayout(navItems: NavItem[]): undefined {
+  const columnLayouts = getColumnEntries(navItems)
+  columnLayouts.forEach((columnEntries) => {
+    for (let numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
+      const columnMapping = determineColumnLayout(
+        columnEntries.map((columnEntry) => columnEntry.numberOfEntries),
+        numberOfColumns,
+      )
+      columnEntries.forEach((columnEntry, i) => {
+        columnEntry.navItemLeader.isColumnEntry ??= {}
+        columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnMapping[i]
+      })
+    }
+  })
+}
+
+function getColumnEntries(navItems: NavItem[]) {
+  type NavItemWithLength = NavItem & { numberOfHeadings: number | null }
   const navItemsWithLength: NavItemWithLength[] = navItems.map((navItem) => ({
     ...navItem,
     numberOfHeadings: navItem.level === 1 || navItem.level === 4 ? 0 : null,
@@ -36,17 +52,17 @@ function determineColumnEntries(navItems: NavItemAll[]): undefined {
     }
   })
 
-  type ColumnEntry = { navItemLeader: NavItemAll; numberOfEntries: number }
+  type ColumnEntry = { navItemLeader: NavItem; numberOfEntries: number }
   const columnLayouts: ColumnEntry[][] = []
   let columnEntries: ColumnEntry[] = []
-  let isFullWidth: boolean | undefined
+  let isFullWidthCategory: boolean | undefined
   navItemsWithLength.forEach((navItem, i) => {
-    let isFullWidthBegin = false
+    let isFullWidthCategoryBegin = false
     if (navItem.level === 1) {
-      const isFullWidthPrevious = isFullWidth
-      isFullWidth = !!navItem.menuModalFullWidth
-      if (isFullWidth) isFullWidthBegin = true
-      if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
+      const isFullWidthCategoryPrevious = isFullWidthCategory
+      isFullWidthCategory = !!navItem.menuModalFullWidth
+      if (isFullWidthCategory) isFullWidthCategoryBegin = true
+      if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
         columnLayouts.push(columnEntries)
         columnEntries = []
       }
@@ -54,16 +70,18 @@ function determineColumnEntries(navItems: NavItemAll[]): undefined {
     const navItemPrevious = navItemsWithLength[i - 1]
     const navItemNext = navItemsWithLength[i + 1]
     if (
-      !isFullWidth ? navItem.level === 1 : (navItem.level === 4 && navItemPrevious!.level !== 1) || isFullWidthBegin
+      !isFullWidthCategory
+        ? navItem.level === 1
+        : (navItem.level === 4 && navItemPrevious!.level !== 1) || isFullWidthCategoryBegin
     ) {
-      if (isFullWidth) {
-        assert(navItem.level === 4 || (navItem.level === 1 && isFullWidthBegin))
+      if (isFullWidthCategory) {
+        assert(navItem.level === 4 || (navItem.level === 1 && isFullWidthCategoryBegin))
       } else {
         assert(navItem.level === 1)
       }
       let { numberOfHeadings } = navItem
       assert(numberOfHeadings !== null)
-      if (isFullWidthBegin) {
+      if (isFullWidthCategoryBegin) {
         assert(navItem.level === 1)
         assertUsage(
           navItemNext && navItemNext.level === 4,
@@ -78,22 +96,10 @@ function determineColumnEntries(navItems: NavItemAll[]): undefined {
   })
   assert(columnEntries!)
   columnLayouts.push(columnEntries)
-
-  columnLayouts.forEach((columnEntries) => {
-    for (let numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
-      const columnsIdMap = determineColumns(
-        columnEntries.map((columnEntry) => columnEntry.numberOfEntries),
-        numberOfColumns,
-      )
-      columnEntries.forEach((columnEntry, i) => {
-        columnEntry.navItemLeader.isColumnEntry ??= {}
-        columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnsIdMap[i]
-      })
-    }
-  })
+  return columnLayouts
 }
 
-function determineColumns(columnsUnmerged: number[], numberOfColumns: number): number[] {
+function determineColumnLayout(columnsUnmerged: number[], numberOfColumns: number): number[] {
   assert(numberOfColumns <= columnsUnmerged.length)
   const columnsMergingInit: ColumnMerging[] = columnsUnmerged.map((columnHeight, i) => ({
     columnIdsMerged: [i],

package/renderer/initOnNavigation.ts

@@ -0,0 +1,37 @@
+export { initOnNavigation }
+
+import { isBrowser } from '../utils/isBrowser'
+import { closeMenuModal } from '../MenuModal'
+import { unexpandNav } from '../Layout'
+
+function onNavigation() {
+  closeMenuModal()
+  unexpandNav()
+}
+
+function initOnNavigation() {
+  if (!isBrowser()) return
+  document.addEventListener('click', (ev) => onLinkClick(ev, onNavigation))
+  // It's redundant as onLinkClick() should be enough, but just to be sure.
+  addEventListener('hashchange', onNavigation)
+}
+
+function onLinkClick(ev: MouseEvent, callback: () => void) {
+  if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey) return
+  const linkTag = findLinkTag(ev.target as HTMLElement)
+  if (!linkTag) return
+  const href = linkTag.getAttribute('href')
+  if (!href) return
+  if (!href.startsWith('/') && !href.startsWith('#')) return
+  callback()
+}
+function findLinkTag(target: HTMLElement): null | HTMLElement {
+  while (target.tagName !== 'A') {
+    const { parentNode } = target
+    if (!parentNode) {
+      return null
+    }
+    target = parentNode as HTMLElement
+  }
+  return target
+}

package/renderer/onRenderClient.tsx

@@ -11,6 +11,7 @@ import { autoScrollNav } from '../autoScrollNav'
 import { installSectionUrlHashs } from '../installSectionUrlHashs'
 import { getGlobalObject } from '../utils/client'
 import { initKeyBindings } from '../initKeyBindings'
+import { initOnNavigation } from './initOnNavigation'
 
 const globalObject = getGlobalObject<{
   root?: ReactDOM.Root
@@ -19,6 +20,7 @@ const globalObject = getGlobalObject<{
 
 addEcosystemStamp()
 initKeyBindings()
+initOnNavigation()
 
 async function onRenderClient(pageContext: PageContextClient) {
   onRenderStart()

package/renderer/usePageContext.tsx

@@ -1,13 +1,10 @@
-// `usePageContext` allows us to access `pageContext` in any React component.
-// More infos: https://vike.dev/pageContext-anywhere
+export { usePageContext }
+export { PageContextProvider }
 
 import React, { useContext } from 'react'
 import type { PageContextResolved } from '../config/resolvePageContext'
 import type { PageContext } from 'vike/types'
 
-export { PageContextProvider }
-export { usePageContext }
-
 const Context = React.createContext<PageContextResolved>(undefined as any)
 
 function PageContextProvider({