@brillout/docpress 0.15.13-commit-ffe283f → 0.15.13-commit-9b3f898

package/Layout.tsx

@@ -26,7 +26,6 @@ import { Style } from './utils/Style'
 import { cls } from './utils/cls'
 import { iconBooks } from './icons'
 import { EditLink } from './EditLink'
-import type { PageContext } from 'vike/types'
 
 const blockMargin = 3
 const mainViewPadding = 20
@@ -89,12 +88,16 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
   return (
     <>
       <div style={{ display: 'flex', ...whitespaceBuster2 }}>
-        <NavLeft />
-        <div
-          id="nav-left-margin"
-          className="low-prio-grow"
-          style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }}
-        />
+        {!isNavLeftAlwaysHidden() && (
+          <>
+            <NavLeft />
+            <div
+              id="nav-left-margin"
+              className="low-prio-grow"
+              style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }}
+            />
+          </>
+        )}
         <PageContent>{children}</PageContent>
       </div>
       <Style>{css`
@@ -181,7 +184,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          {!isNavLeftAlwaysHidden(pageContext) && <NavHead isNavLeft={true} />}
+          <NavHead isNavLeft={true} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -234,7 +237,8 @@ function NavigationContent(props: {
   )
 }
 
-function isNavLeftAlwaysHidden(pageContext: PageContext) {
+function isNavLeftAlwaysHidden() {
+  const pageContext = usePageContext()
   const { isLandingPage, navItemsDetached, pageDesign } = pageContext.resolved
   return isLandingPage || pageDesign?.hideMenuLeft || (navItemsDetached && navItemsDetached.length <= 1)
 }
@@ -255,11 +259,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   const navHeadSecondary = (
     <div
-      className={cls([
-        'nav-head-secondary',
-        isNavLeft && 'show-on-nav-hover add-transition',
-        !!navMaxWidth && 'has-max-width',
-      ])}
+      className={cls(['nav-head-secondary', isNavLeft && 'show-on-nav-hover add-transition'])}
       style={{
         padding: 0,
         display: 'flex',
@@ -289,7 +289,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <div
-      className={cls(['nav-head', isNavLeft && 'is-nav-left', 'link-hover-animation'])}
+      className={cls(['nav-head link-hover-animation', isNavLeft && 'is-nav-left', !!navMaxWidth && 'has-max-width'])}
       style={{
         display: 'flex',
         justifyContent: isNavLeft ? 'flex-end' : 'center',
@@ -332,8 +332,6 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   )
 }
 function getStyleNav() {
-  const pageContext = usePageContext()
-
   let style = ''
 
   // Mobile
@@ -394,7 +392,7 @@ function getStyleNav() {
     }
     &.has-max-width {
       .desktop-grow {
-        display: block;
+        display: block !important;
       }
       .desktop-grow,
       .nav-head-secondary {
@@ -406,7 +404,7 @@ function getStyleNav() {
 `
 
   // Desktop
-  if (!isNavLeftAlwaysHidden(pageContext)) {
+  if (!isNavLeftAlwaysHidden()) {
     style += css`
 @container container-viewport (min-width: ${viewDesktop}px) {
   .nav-head:not(.is-nav-left) {
@@ -452,22 +450,29 @@ function getStyleNav() {
   body {
     --main-view-padding: 10px !important;
   }
-  .page-wrapper {
-    flex-grow: 1;
-    align-items: center;
-  }
-  .page-content {
-    margin: auto;
-  }
-  #menu-modal-wrapper {
-    position: absolute !important;
-  }
+  ${getStyleNavLeftHidden()}
 }
 `
+  } else {
+    style += getStyleNavLeftHidden()
   }
 
   return style
 }
+function getStyleNavLeftHidden() {
+  return css`
+.page-wrapper {
+  flex-grow: 1;
+  align-items: center;
+}
+.page-content {
+  margin: auto;
+}
+#menu-modal-wrapper {
+  position: absolute !important;
+}
+`
+}
 
 function unexpandNav() {
   document.documentElement.classList.add('unexpand-nav')

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -23,7 +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>
@@ -41,7 +50,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
-                <ColumnsWrapper numberOfColumns={maxColumns}>
+                <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                   <Collapsible
                     head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
                     disabled={maxColumns > 1}
@@ -62,7 +71,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                 </ColumnsWrapper>
               </div>
             ) : (
-              <ColumnsWrapper numberOfColumns={maxColumns}>
+              <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                 <ColumnsLayout>
                   {columnLayout.columns.map((column, j) => (
                     <Column key={j}>
@@ -166,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}

package/MenuModal.tsx

@@ -132,6 +132,9 @@ function getStyle() {
   .show-only-on-desktop {
     display: none !important;
   }
+  .columns-wrapper {
+    width: 100% !important;
+  }
 }
 
 ${/* Hide same-page headings navigation */ ''}

package/installSectionUrlHashs.ts

@@ -28,7 +28,9 @@ function installSectionUrlHashs() {
 }
 
 function assertNavLink(urlHash: string, heading: HTMLHeadingElement) {
-  const navigationEl = document.querySelector('#nav-left .navigation-content')!
+  const navigationContainerEl = document.querySelector('#nav-left')
+  if (!navigationContainerEl) return
+  const navigationEl = navigationContainerEl.querySelector('.navigation-content')!
   {
     const { pathname } = window.location
     const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${pathname}"]`))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-ffe283f",
+  "version": "0.15.13-commit-9b3f898",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",