@brillout/docpress 0.15.12 → 0.15.13-commit-03246ec

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -3,7 +3,7 @@ export { NavigationWithColumnLayout }
 import React, { useEffect, useState } from 'react'
 import { assert } from '../utils/server'
 import { getViewportWidth } from '../utils/getViewportWidth'
-import { containerQueryMobileMenu, navLeftWidthMax, navLeftWidthMin } from '../Layout'
+import { viewTablet, navLeftWidthMax, navLeftWidthMin } from '../Layout'
 import { throttle } from '../utils/throttle'
 import { Collapsible } from './Collapsible'
 import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
@@ -23,6 +23,16 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
     window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
   const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  const columnWidthBase = navLeftWidthMax + 20
+  const maxColumns = Math.max(...navItemsByColumnLayouts.map((layout) => layout.columns.length), 1)
+  const widthMax = maxColumns * columnWidthBase
+  const getColumnsWrapperStyle = (columnLayout: NavItemsByColumnLayout) => {
+    const widthColumn = columnLayout.columns.length * columnWidthBase
+    return {
+      width: Math.max(700, widthColumn),
+      maxWidth: `min(100%, ${widthMax}px)`,
+    }
+  }
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -40,10 +50,10 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
-                <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                   <Collapsible
                     head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
-                    disabled={columnLayout.columns.length > 1}
+                    disabled={maxColumns > 1}
                     collapsedInit={!columnLayout.navItemLevel1.isRelevant}
                     marginBottomOnExpand={marginBottomOnExpand}
                   >
@@ -61,7 +71,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                 </ColumnsWrapper>
               </div>
             ) : (
-              <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+              <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                 <ColumnsLayout>
                   {columnLayout.columns.map((column, j) => (
                     <Column key={j}>
@@ -69,7 +79,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                         <div key={k} style={{ marginBottom: 0 }}>
                           <Collapsible
                             head={(onClick) => <NavItemComponent navItem={category.navItemLevel1} onClick={onClick} />}
-                            disabled={columnLayout.columns.length > 1}
+                            disabled={maxColumns > 1}
                             collapsedInit={!category.navItemLevel1.isRelevant}
                             marginBottomOnExpand={marginBottomOnExpand}
                           >
@@ -93,7 +103,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
 
   function getStyle() {
     const style = css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   .menu-navigation-content {
     position: absolute;
     width: 100%;
@@ -165,14 +175,14 @@ function Column({ children }: { children: React.ReactNode }) {
     </div>
   )
 }
-function ColumnsWrapper({ children, numberOfColumns }: { children: React.ReactNode; numberOfColumns: number }) {
+function ColumnsWrapper({ children, style }: { children: React.ReactNode; style: React.CSSProperties }) {
   return (
     <div
+      className="columns-wrapper"
       style={{
-        width: numberOfColumns * (navLeftWidthMax + 20),
-        maxWidth: '100%',
         paddingLeft: 3,
         margin: 'auto',
+        ...style,
       }}
     >
       {children}
@@ -269,17 +279,23 @@ function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColu
   let isFullWidthCategory: boolean | undefined
   navItems.forEach((navItem) => {
     if (navItem.level === 1) {
-      const isFullWidthCategoryPrevious = isFullWidthCategory
-      isFullWidthCategory = !!navItem.menuModalFullWidth
-      if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
+      if (isFullWidthCategory) {
+        assert(navItem.menuModalFullWidth)
+      }
+      const isFullWidthCategoryPrevious = !!isFullWidthCategory
+      if (navItem.menuModalFullWidth) {
+        isFullWidthCategory = true
+        // Flush
         navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious })
         columnEntries = []
+      } else {
+        isFullWidthCategory = false
       }
     }
     assert(isFullWidthCategory !== undefined)
-    if (navItem.isColumnEntry) {
+    if (navItem.isPotentialColumn) {
       assert(navItem.level === 1 || navItem.level === 4)
-      columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
+      columnEntry = { navItems: [navItem], columnMap: navItem.isPotentialColumn }
       columnEntries.push(columnEntry)
     } else {
       assert(navItem.level !== 1)

package/MenuModal/toggleMenuModal.ts

@@ -4,7 +4,7 @@ export { keepMenuModalOpen }
 export { closeMenuModal }
 export { coseMenuModalOnMouseLeave }
 
-import { containerQueryMobileMenu } from '../Layout'
+import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
 import { getViewportWidth } from '../utils/getViewportWidth'
 import { isBrowser } from '../utils/isBrowser'
@@ -111,7 +111,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < containerQueryMobileMenu) autoScroll()
+    if (getViewportWidth() < viewTablet) autoScroll()
   }
 }
 

package/MenuModal.tsx

@@ -3,7 +3,7 @@ export { MenuModal }
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
-import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
@@ -79,7 +79,7 @@ function Nav() {
 
 function getStyle() {
   return css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   #menu-modal-scroll-container {
     max-height: calc(100vh - var(--nav-head-height) - var(--block-margin));
     ${/* https://github.com/brillout/docpress/issues/23 */ ''}
@@ -99,7 +99,7 @@ function getStyle() {
     display: none !important;
   }
 }
-@media(max-width: ${containerQueryMobileMenu}px) {
+@media(max-width: ${viewTablet}px) {
   #menu-modal-scroll-container {
     ${/* Fallback for Firefox: it doesn't support `dvh` yet: https://caniuse.com/?search=dvh */ ''}
     ${/* Let's always and systematically use `dvh` instead of `vh` once Firefox supports it */ ''}
@@ -132,10 +132,13 @@ function getStyle() {
   .show-only-on-desktop {
     display: none !important;
   }
+  .columns-wrapper {
+    width: 100% !important;
+  }
 }
 
 ${/* Hide same-page headings navigation */ ''}
-@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
+@container container-viewport (min-width: ${viewDesktop}px) {
   #menu-modal-wrapper .nav-item-level-3 {
     display: none;
   }

package/NavItemComponent.tsx

@@ -31,8 +31,22 @@ type NavItem = {
   title: string
   titleInNav: string
   menuModalFullWidth?: true
-  isColumnEntry?: ColumnMap
+  /**
+   * Maps viewport column counts to column indices.
+   * Indicates this nav item is a "column entry" (a level-1 or level-4 heading that starts a new column section).
+   * Example: `{ 1: 0, 2: 1, 3: 0 }` means:
+   * - When there's 1 column, put this item in column 0
+   * - When there are 2 columns, put it in column 1
+   * - When there are 3 columns, put it in column 0
+   */
+  isPotentialColumn?: ColumnMap
 }
+/**
+ * A mapping of viewport column counts to column indices.
+ * Used to determine which column a nav item should be placed in for different viewport widths.
+ * Key: number of columns in the viewport
+ * Value: the column index (0-based) where this item should be placed
+ */
 type ColumnMap = Record<number, number>
 
 type PropsNavItem = PropsAnchor & PropsSpan