@brillout/docpress 0.15.13-commit-253f5e5 → 0.15.13-commit-1d03f73

package/ExternalLinks.tsx

@@ -77,6 +77,7 @@ function ChangelogButton() {
           style={{
             position: 'relative',
             top: 1,
+            color: 'var(--color-text)',
           }}
         >
           v{version}

package/Layout.tsx

@@ -70,6 +70,7 @@ function Layout({ children }: { children: React.ReactNode }) {
     content = <LayoutDocsPage>{children}</LayoutDocsPage>
   }
 
+  const isNavLeftHidden = isNavLeftAlwaysHidden()
   return (
     <div
       style={{
@@ -81,11 +82,11 @@ function Layout({ children }: { children: React.ReactNode }) {
         // We don't add `container` to `body` nor `html` beacuse in Firefox it breaks the `position: fixed` of <MenuModal>
         // https://stackoverflow.com/questions/74601420/css-container-inline-size-and-fixed-child
         container: 'container-viewport / inline-size',
-        maxWidth: bodyMaxWidth,
+        maxWidth: isNavLeftHidden ? undefined : bodyMaxWidth,
         margin: 'auto',
       }}
     >
-      <MenuModal isTopNav={isLandingPage} />
+      <MenuModal isTopNav={isLandingPage} isNavLeftHidden={isNavLeftHidden} />
       <div className={isLandingPage ? '' : 'doc-page'} style={whitespaceBuster1}>
         <NavHead />
         {content}
@@ -270,7 +271,7 @@ function NavigationContent(props: {
 function isNavLeftAlwaysHidden() {
   const pageContext = usePageContext()
   const { isLandingPage, navItemsDetached, pageDesign } = pageContext.resolved
-  return isLandingPage || pageDesign?.hideMenuLeft || (navItemsDetached && navItemsDetached.length <= 1)
+  return isLandingPage || !!pageDesign?.hideMenuLeft || !!(navItemsDetached && navItemsDetached.length <= 1)
 }
 
 const menuLinkStyle: React.CSSProperties = {

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 { viewTablet, navLeftWidthMax, navLeftWidthMin } from '../Layout'
+import { viewTablet, navLeftWidthMax, navLeftWidthMin, bodyMaxWidth } from '../Layout'
 import { throttle } from '../utils/throttle'
 import { Collapsible } from './Collapsible'
 import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
@@ -22,7 +22,8 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
     updateviewportwidth()
     window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
-  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  const availableWidth = viewportWidth && Math.min(viewportWidth, bodyMaxWidth)
+  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, availableWidth)
   const columnWidthBase = navLeftWidthMax + 20
   const maxColumns = Math.max(...navItemsByColumnLayouts.map((layout) => layout.columns.length), 1)
   const widthMax = maxColumns * columnWidthBase
@@ -222,9 +223,9 @@ type NavItemsByColumnLayout =
       columns: { navItems: NavItemComputed[] }[]
       isFullWidthCategory: true
     }
-function getNavItemsByColumnLayouts(navItems: NavItemComputed[], viewportWidth: number = 0): NavItemsByColumnLayout[] {
+function getNavItemsByColumnLayouts(navItems: NavItemComputed[], availableWidth: number = 0): NavItemsByColumnLayout[] {
   const navItemsByColumnEntries = getNavItemsByColumnEntries(navItems)
-  const numberOfColumnsMax = Math.floor(viewportWidth / navLeftWidthMin) || 1
+  const numberOfColumnsMax = Math.floor(availableWidth / navLeftWidthMin) || 1
   const navItemsByColumnLayouts: NavItemsByColumnLayout[] = navItemsByColumnEntries.map(
     ({ columnEntries, isFullWidthCategory }) => {
       const numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length)

package/MenuModal.tsx

@@ -10,7 +10,7 @@ import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayo
 import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
 import { EditLink } from './EditLink'
 
-function MenuModal({ isTopNav }: { isTopNav: boolean }) {
+function MenuModal({ isTopNav, isNavLeftHidden }: { isTopNav: boolean; isNavLeftHidden: boolean }) {
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -25,7 +25,7 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           background: '#ededef',
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
-          maxWidth: bodyMaxWidth,
+          maxWidth: isNavLeftHidden ? undefined : bodyMaxWidth,
           // Horizontal align
           // https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div/32694476#32694476
           left: '50%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-253f5e5",
+  "version": "0.15.13-commit-1d03f73",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",