@brillout/docpress 0.8.11 → 0.8.12

package/dist/docsearch/SearchLink.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export { SearchLink };
+import React from 'react';
+import { openDocsearchModal } from './toggleDocsearchModal';
+function SearchLink(props) {
+    return (React.createElement("a", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer' }, props.style), className: "colorize-on-hover", onClick: function (ev) {
+            ev.preventDefault();
+            openDocsearchModal();
+        }, "aria-label": 'Ctrl\xa0+\xa0K' }),
+        React.createElement(SearchIcon, null),
+        "Search"));
+}
+function SearchIcon() {
+    return (React.createElement("svg", { style: { marginRight: 'var(--icon-text-padding)', lineHeight: 0, width: '1.3em' }, className: "decolorize-7", viewBox: "0 0 20 20" },
+        React.createElement("path", { d: "M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z", fill: "none", stroke: "currentColor", strokeWidth: "2" })));
+}

package/dist/docsearch/toggleDocsearchModal.d.ts

@@ -0,0 +1,4 @@
+export { closeDocsearchModal };
+export { openDocsearchModal };
+declare function closeDocsearchModal(): void;
+declare function openDocsearchModal(): void;

package/dist/docsearch/toggleDocsearchModal.js

@@ -0,0 +1,26 @@
+export { closeDocsearchModal };
+export { openDocsearchModal };
+import { assert } from '../utils/client';
+function closeDocsearchModal() {
+    if (isClosed())
+        return;
+    toggle();
+}
+function openDocsearchModal() {
+    if (!isClosed())
+        return;
+    toggle();
+}
+// There doesn't seem be an official API to open/close the DocSearch modal:
+// - https://github.com/algolia/docsearch/issues/2321
+// - https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/DocSearch.tsx#L52
+function toggle() {
+    // Trigger https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L71
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
+}
+function isClosed() {
+    var test1 = !document.body.classList.contains('DocSearch--active');
+    var test2 = document.getElementsByClassName('DocSearch-Modal').length === 0;
+    assert(test1 === test2);
+    return test1 || test2;
+}

package/dist/navigation/Navigation.d.ts

@@ -14,10 +14,11 @@ type NavItem = {
     menuModalFullWidth?: true;
 };
 type NavItemAll = NavItem & {
-    isColumnLayoutElement?: true;
+    isColumnEntry?: ColumnMap;
 };
 declare function NavigationContent(props: {
     navItems: NavItem[];
     showOnlyRelevant?: true;
     columnLayout?: true;
 }): React.JSX.Element;
+type ColumnMap = Record<number, number>;

package/dist/navigation/Navigation.js

@@ -11,13 +11,15 @@ var __assign = (this && this.__assign) || function () {
 };
 // TODO/refactor: rename file and/or component
 export { NavigationContent };
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { assert, assertWarning, jsxToTextContent } from '../utils/server';
 import './Navigation.css';
 import { parseTitle } from '../parseTitle';
 import { usePageContext } from '../renderer/usePageContext';
 import '@docsearch/css';
 import '../global.d.ts';
+import { getViewportWidth } from '../utils/getViewportWidth';
+import { navWidthMax, navWidthMin } from '../Layout';
 function NavigationContent(props) {
     var pageContext = usePageContext();
     var navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname);
@@ -29,38 +31,44 @@ function NavigationContent(props) {
     }
     else {
         assert(!props.showOnlyRelevant);
-        var navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed);
-        var paddingBottom_1 = 40;
-        navContent = (React.createElement(React.Fragment, null, navItemsColumnLayout.map(function (_a, i) {
-            var navItemsColumnEntries = _a.navItemsColumnEntries, isFullWidth = _a.isFullWidth;
-            return (React.createElement("div", { key: i, style: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                } },
-                React.createElement("div", { className: "column-layout-".concat(i) + (!isFullWidth ? '' : ' nav-category nav-category-full-width'), style: {
-                        flexGrow: 1,
-                        columnGap: 20,
-                        paddingBottom: isFullWidth ? paddingBottom_1 : undefined,
-                    } },
-                    navItemsColumnEntries.map(function (navItemColumnEntry, j) { return (React.createElement("div", { key: j, className: 'column-layout-entry' + (isFullWidth ? '' : ' nav-category'), style: {
-                            breakInside: 'avoid',
-                            paddingBottom: !isFullWidth ? paddingBottom_1 : undefined,
-                            paddingTop: isFullWidth ? undefined : 0,
-                            width: '100%',
-                        } },
-                        React.createElement(NavItemComponent, { navItem: navItemColumnEntry }),
-                        navItemColumnEntry.navItemChilds.map(function (navItem, k) { return (React.createElement(NavItemComponent, { navItem: navItem, key: k })); }),
-                        React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItemColumnEntry, paddingBottom: paddingBottom_1 }))); }),
-                    React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : navItemsColumnEntries[0], paddingBottom: paddingBottom_1 }))));
-        })));
+        navContent = React.createElement(NavigationColumnLayout, { navItemsWithComputed: navItemsWithComputed });
     }
     return (React.createElement("div", { className: "navigation-content", style: { marginTop: 10 } }, navContent));
 }
+function NavigationColumnLayout(props) {
+    var _a = useState(), viewportWidth = _a[0], setViewportWidth = _a[1];
+    var updateviewportwidth = function () { return setViewportWidth(getViewportWidth()); };
+    useEffect(function () {
+        updateviewportwidth();
+        window.addEventListener('resize', updateviewportwidth, { passive: true });
+    });
+    var navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth);
+    return (React.createElement(React.Fragment, null, navItemsByColumnLayouts.map(function (_a, i) {
+        var columns = _a.columns, isFullWidth = _a.isFullWidth;
+        return (React.createElement("div", { key: i, style: {
+                display: 'flex',
+                width: columns.length * (navWidthMax + 20),
+                justifyContent: 'space-between',
+                maxWidth: '100%',
+                margin: 'auto',
+                marginBottom: 40,
+            } },
+            columns.map(function (columnEntry, j) { return (React.createElement("div", { key: j, style: {
+                    flexGrow: 1,
+                    maxWidth: navWidthMax,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
+                } }, columnEntry.map(function (navItems, k) { return (React.createElement("div", { key: k },
+                navItems.map(function (navItem, l) { return (React.createElement(NavItemComponent, { navItem: navItem, key: l })); }),
+                React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItems[0] }))); }))); }),
+            React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : columns[0][0][0] })));
+    })));
+}
 function CategoryBorder(_a) {
-    var navItemLevel1 = _a.navItemLevel1, paddingBottom = _a.paddingBottom;
+    var navItemLevel1 = _a.navItemLevel1;
     return !navItemLevel1 ? null : (React.createElement("div", { className: "category-border", style: {
             background: navItemLevel1.color,
-            height: "calc(100% - ".concat(paddingBottom, "px - 53px)"),
         } }));
 }
 function NavItemComponent(_a) {
@@ -108,33 +116,54 @@ function NavItemComponent(_a) {
         return React.createElement("span", __assign({}, props));
     }
 }
-function groupByColumnLayout(navItems) {
-    var navItemsColumnLayout = [];
-    var navItemsColumnEntries = [];
+function getNavItemsByColumnLayouts(navItems, viewportWidth) {
+    if (viewportWidth === void 0) { viewportWidth = 0; }
+    var navItemsByColumnEntries = getNavItemsByColumnEntries(navItems);
+    var numberOfColumnsMax = Math.floor(viewportWidth / navWidthMin) || 1;
+    var navItemsByColumnLayouts = navItemsByColumnEntries.map(function (_a) {
+        var columnEntries = _a.columnEntries, isFullWidth = _a.isFullWidth;
+        var numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length);
+        var columns = [];
+        columnEntries.forEach(function (columnEntry) {
+            var _a;
+            var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
+            assert(idx >= 0);
+            (_a = columns[idx]) !== null && _a !== void 0 ? _a : (columns[idx] = []);
+            columns[idx].push(columnEntry.navItems);
+        });
+        var navItemsByColumnLayout = { columns: columns, isFullWidth: isFullWidth };
+        return navItemsByColumnLayout;
+    });
+    return navItemsByColumnLayouts;
+}
+function getNavItemsByColumnEntries(navItems) {
+    var navItemsByColumnEntries = [];
+    var columnEntries = [];
+    var columnEntry;
     var isFullWidth;
     navItems.forEach(function (navItem) {
         if (navItem.level === 1) {
             var isFullWidthPrevious = isFullWidth;
             isFullWidth = !!navItem.menuModalFullWidth;
             if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-                navItemsColumnLayout.push({ navItemsColumnEntries: navItemsColumnEntries, isFullWidth: isFullWidthPrevious });
-                navItemsColumnEntries = [];
+                navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidth: isFullWidthPrevious });
+                columnEntries = [];
             }
         }
         assert(isFullWidth !== undefined);
-        if (navItem.isColumnLayoutElement) {
+        if (navItem.isColumnEntry) {
             assert(navItem.level === 1 || navItem.level === 4);
-            var navItemColumnEntry = __assign(__assign({}, navItem), { navItemChilds: [] });
-            navItemsColumnEntries.push(navItemColumnEntry);
+            columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry };
+            columnEntries.push(columnEntry);
         }
         else {
             assert(navItem.level !== 1);
-            navItemsColumnEntries[navItemsColumnEntries.length - 1].navItemChilds.push(navItem);
+            columnEntry.navItems.push(navItem);
         }
     });
     assert(isFullWidth !== undefined);
-    navItemsColumnLayout.push({ navItemsColumnEntries: navItemsColumnEntries, isFullWidth: isFullWidth });
-    return navItemsColumnLayout;
+    navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidth: isFullWidth });
+    return navItemsByColumnEntries;
 }
 function getNavItemsWithComputed(navItems, currentUrl) {
     var navItemIdx;

package/dist/renderer/determineColumnEntries.d.ts

@@ -0,0 +1,3 @@
+export { determineColumnEntries };
+import { type NavItemAll } from '../navigation/Navigation';
+declare function determineColumnEntries(navItems: NavItemAll[]): undefined;

package/dist/renderer/{getStyleColumnLayout.js → determineColumnEntries.js}

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,14 +18,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-export { getStyleColumnLayout };
-export { determineColumnLayoutEntries };
-import { css } from '../utils/css';
+export { determineColumnEntries };
 import { assert, assertUsage, isBrowser } from '../utils/server';
 assert(!isBrowser());
-var columnWidthMin = 300;
-var columnWidthMax = 350;
-function determineColumnLayoutEntries(navItems) {
+function determineColumnEntries(navItems) {
     var navItemsWithLength = navItems.map(function (navItem) { return (__assign(__assign({}, navItem), { numberOfHeadings: navItem.level === 1 || navItem.level === 4 ? 0 : null })); });
     var navItemLevel1;
     var navItemLevel4;
@@ -54,7 +46,7 @@ function determineColumnLayoutEntries(navItems) {
         }
     });
     var columnLayouts = [];
-    var columns = [];
+    var columnEntries = [];
     var isFullWidth;
     navItemsWithLength.forEach(function (navItem, i) {
         var isFullWidthBegin = false;
@@ -64,8 +56,8 @@ function determineColumnLayoutEntries(navItems) {
             if (isFullWidth)
                 isFullWidthBegin = true;
             if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-                columnLayouts.push(columns);
-                columns = [];
+                columnLayouts.push(columnEntries);
+                columnEntries = [];
             }
         }
         var navItemPrevious = navItemsWithLength[i - 1];
@@ -87,64 +79,25 @@ function determineColumnLayoutEntries(navItems) {
                 assert(navItemNext.numberOfHeadings);
                 numberOfHeadings = navItemNext.numberOfHeadings;
             }
-            columns.push(numberOfHeadings);
-            navItems[i].isColumnLayoutElement = true;
+            columnEntries.push({ navItemLeader: navItems[i], numberOfEntries: numberOfHeadings });
         }
     });
-    columnLayouts.push(columns);
-    return { columnLayouts: columnLayouts };
-}
-function getStyleColumnLayout(columnLayouts) {
-    var style = '\n' + css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n.column-layout-entry {\n  break-before: avoid;\n}\n"], ["\n.column-layout-entry {\n  break-before: avoid;\n}\n"])));
-    style += '\n';
-    columnLayouts.forEach(function (columns, i) {
+    assert(columnEntries);
+    columnLayouts.push(columnEntries);
+    columnLayouts.forEach(function (columnEntries) {
         var _loop_1 = function (numberOfColumns) {
-            var styleGivenNumberOfColumns = [];
-            styleGivenNumberOfColumns.push(css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n.column-layout-", " {\n  column-count: ", ";\n  max-width: min(100%, ", "px);\n}\n"], ["\n.column-layout-", " {\n  column-count: ", ";\n  max-width: min(100%, ", "px);\n}\n"])), i, numberOfColumns, columnWidthMax * numberOfColumns));
-            var columnsIdMap = determineColumns(columns, numberOfColumns);
-            var columnBreakPoints = determineColumnBreakPoints(columnsIdMap);
-            columnBreakPoints.forEach(function (columnBreakPoint, columnUngroupedId) {
-                if (!columnBreakPoint)
-                    return;
-                styleGivenNumberOfColumns.push(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n.column-layout-", " .column-layout-entry:nth-child(", ") {\n  break-before: column;\n  padding-top: 36px;\n}\n"], ["\n.column-layout-", " .column-layout-entry:nth-child(", ") {\n  break-before: column;\n  padding-top: 36px;\n}\n"])), i, columnUngroupedId + 1));
+            var columnsIdMap = determineColumns(columnEntries.map(function (columnEntry) { return columnEntry.numberOfEntries; }), numberOfColumns);
+            columnEntries.forEach(function (columnEntry, i) {
+                var _a;
+                var _b;
+                (_a = (_b = columnEntry.navItemLeader).isColumnEntry) !== null && _a !== void 0 ? _a : (_b.isColumnEntry = {});
+                columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnsIdMap[i];
             });
-            {
-                assert(styleGivenNumberOfColumns.length > 0);
-                var getMaxWidth = function (columns) { return (columns + 1) * columnWidthMin - 1; };
-                var isFirst = numberOfColumns === 1;
-                var isLast = numberOfColumns === columns.length;
-                var query = [
-                    !isFirst && "(min-width: ".concat(getMaxWidth(numberOfColumns - 1) + 1, "px)"),
-                    !isLast && "(max-width: ".concat(getMaxWidth(numberOfColumns), "px)"),
-                ]
-                    .filter(Boolean)
-                    .join(' and ');
-                if (query) {
-                    styleGivenNumberOfColumns = __spreadArray(__spreadArray(["@container ".concat(query, " {")], styleGivenNumberOfColumns, true), ["}"], false);
-                }
-            }
-            style += styleGivenNumberOfColumns.join('\n') + '\n';
         };
-        for (var numberOfColumns = columns.length; numberOfColumns >= 1; numberOfColumns--) {
+        for (var numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
             _loop_1(numberOfColumns);
         }
     });
-    return style;
-}
-function determineColumnBreakPoints(columnsIdMap) {
-    assert(columnsIdMap[0] === 0);
-    var columnGroupedIdBefore = 0;
-    var columnBreakPoints = columnsIdMap.map(function (columnGroupedId) {
-        assert([
-            //
-            columnGroupedIdBefore,
-            columnGroupedIdBefore + 1,
-        ].includes(columnGroupedId));
-        var val = columnGroupedId !== columnGroupedIdBefore;
-        columnGroupedIdBefore = columnGroupedId;
-        return val;
-    });
-    return columnBreakPoints;
 }
 function determineColumns(columnsUnmerged, numberOfColumns) {
     assert(numberOfColumns <= columnsUnmerged.length);
@@ -188,4 +141,3 @@ function mergeColumns(columnsMerging, numberOfColumns) {
     assert(columnsMergingMod.length === columnsMerging.length - 1);
     return mergeColumns(columnsMergingMod, numberOfColumns);
 }
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/utils/PassTrough.d.ts

@@ -0,0 +1,3 @@
+export { PassThrough };
+import React from 'react';
+declare function PassThrough({ children }: any): React.JSX.Element;

package/dist/utils/PassTrough.js

@@ -0,0 +1,6 @@
+export { PassThrough };
+import React from 'react';
+function PassThrough(_a) {
+    var children = _a.children;
+    return React.createElement(React.Fragment, null, children);
+}

package/dist/utils/getViewportWidth.d.ts

@@ -0,0 +1 @@
+export declare function getViewportWidth(): number;

package/dist/utils/getViewportWidth.js

@@ -0,0 +1,4 @@
+export function getViewportWidth() {
+    // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+    return document.documentElement.clientWidth;
+}

package/navigation/Navigation.css

@@ -99,7 +99,7 @@
   content: "";
 }
 
-.nav-category {
+:has(> .category-border) {
   position: relative
 }
 .category-border {
@@ -107,6 +107,7 @@
   top: 0;
   left: 0;
   transform: translate(0, 53px);
+  height: calc(100% - 53px);
   width: 3px;
   z-index: 99;
 }

package/navigation/Navigation.tsx

@@ -4,13 +4,15 @@ export { NavigationContent }
 export type { NavItem }
 export type { NavItemAll }
 
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { assert, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { parseTitle } from '../parseTitle'
 import { usePageContext } from '../renderer/usePageContext'
 import '@docsearch/css'
 import '../global.d.ts'
+import { getViewportWidth } from '../utils/getViewportWidth'
+import { navWidthMax, navWidthMin } from '../Layout'
 
 type NavItem = {
   level: number
@@ -21,7 +23,7 @@ type NavItem = {
   menuModalFullWidth?: true
 }
 type NavItemAll = NavItem & {
-  isColumnLayoutElement?: true
+  isColumnEntry?: ColumnMap
 }
 function NavigationContent(props: {
   navItems: NavItem[]
@@ -38,71 +40,74 @@ function NavigationContent(props: {
       .map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
   } else {
     assert(!props.showOnlyRelevant)
-    const navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed)
-    const paddingBottom = 40
-    navContent = (
-      <>
-        {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
-          <div
-            key={i}
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
+    navContent = <NavigationColumnLayout navItemsWithComputed={navItemsWithComputed} />
+  }
+
+  return (
+    <div className="navigation-content" style={{ marginTop: 10 }}>
+      {navContent}
+    </div>
+  )
+}
+
+function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[] }) {
+  let [viewportWidth, setViewportWidth] = useState<number | undefined>()
+  const updateviewportwidth = () => setViewportWidth(getViewportWidth())
+  useEffect(() => {
+    updateviewportwidth()
+    window.addEventListener('resize', updateviewportwidth, { passive: true })
+  })
+
+  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth)
+
+  return (
+    <>
+      {navItemsByColumnLayouts.map(({ columns, isFullWidth }, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'flex',
+            width: columns.length * (navWidthMax + 20),
+            justifyContent: 'space-between',
+            maxWidth: '100%',
+            margin: 'auto',
+            marginBottom: 40,
+          }}
+        >
+          {columns.map((columnEntry, j) => (
             <div
-              className={`column-layout-${i}` + (!isFullWidth ? '' : ' nav-category nav-category-full-width')}
+              key={j}
               style={{
                 flexGrow: 1,
-                columnGap: 20,
-                paddingBottom: isFullWidth ? paddingBottom : undefined,
+                maxWidth: navWidthMax,
+                display: 'flex',
+                flexDirection: 'column',
+                paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
               }}
             >
-              {navItemsColumnEntries.map((navItemColumnEntry, j) => (
-                <div
-                  key={j}
-                  className={'column-layout-entry' + (isFullWidth ? '' : ' nav-category')}
-                  style={{
-                    breakInside: 'avoid',
-                    paddingBottom: !isFullWidth ? paddingBottom : undefined,
-                    paddingTop: isFullWidth ? undefined : 0,
-                    width: '100%',
-                  }}
-                >
-                  <NavItemComponent navItem={navItemColumnEntry} />
-                  {navItemColumnEntry.navItemChilds.map((navItem, k) => (
-                    <NavItemComponent navItem={navItem} key={k} />
+              {columnEntry.map((navItems, k) => (
+                <div key={k}>
+                  {navItems.map((navItem, l) => (
+                    <NavItemComponent navItem={navItem} key={l} />
                   ))}
-                  <CategoryBorder
-                    navItemLevel1={isFullWidth ? undefined : navItemColumnEntry!}
-                    paddingBottom={paddingBottom}
-                  />
+                  <CategoryBorder navItemLevel1={isFullWidth ? undefined : navItems[0]!} />
                 </div>
               ))}
-              <CategoryBorder
-                navItemLevel1={!isFullWidth ? undefined : navItemsColumnEntries[0]!}
-                paddingBottom={paddingBottom}
-              />
             </div>
-          </div>
-        ))}
-      </>
-    )
-  }
-
-  return (
-    <div className="navigation-content" style={{ marginTop: 10 }}>
-      {navContent}
-    </div>
+          ))}
+          <CategoryBorder navItemLevel1={!isFullWidth ? undefined : columns[0][0][0]!} />
+        </div>
+      ))}
+    </>
   )
 }
-function CategoryBorder({ navItemLevel1, paddingBottom }: { navItemLevel1?: NavItemComputed; paddingBottom: number }) {
+
+function CategoryBorder({ navItemLevel1 }: { navItemLevel1?: NavItemComputed }) {
   return !navItemLevel1 ? null : (
     <div
       className="category-border"
       style={{
         background: navItemLevel1.color!,
-        height: `calc(100% - ${paddingBottom}px - 53px)`,
       }}
     />
   )
@@ -162,33 +167,57 @@ function NavItemComponent({
   }
 }
 
-type NavItemsColumnEntry = NavItemComputed & { navItemChilds: NavItemComputed[] }
-function groupByColumnLayout(navItems: NavItemComputed[]) {
-  const navItemsColumnLayout: { navItemsColumnEntries: NavItemsColumnEntry[]; isFullWidth: boolean }[] = []
-  let navItemsColumnEntries: NavItemsColumnEntry[] = []
+type NavItemsByColumnLayout = { columns: NavItemComputed[][][]; isFullWidth: boolean }
+function getNavItemsByColumnLayouts(navItems: NavItemComputed[], viewportWidth: number = 0): NavItemsByColumnLayout[] {
+  const navItemsByColumnEntries = getNavItemsByColumnEntries(navItems)
+  const numberOfColumnsMax = Math.floor(viewportWidth / navWidthMin) || 1
+  const navItemsByColumnLayouts: NavItemsByColumnLayout[] = navItemsByColumnEntries.map(
+    ({ columnEntries, isFullWidth }) => {
+      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
+    },
+  )
+  return navItemsByColumnLayouts
+}
+
+type NavItemsByColumnEntries = { columnEntries: ColumnEntry[]; isFullWidth: 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
   navItems.forEach((navItem) => {
     if (navItem.level === 1) {
       const isFullWidthPrevious = isFullWidth
       isFullWidth = !!navItem.menuModalFullWidth
       if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-        navItemsColumnLayout.push({ navItemsColumnEntries, isFullWidth: isFullWidthPrevious })
-        navItemsColumnEntries = []
+        navItemsByColumnEntries.push({ columnEntries, isFullWidth: isFullWidthPrevious })
+        columnEntries = []
       }
     }
     assert(isFullWidth !== undefined)
-    if (navItem.isColumnLayoutElement) {
+    if (navItem.isColumnEntry) {
       assert(navItem.level === 1 || navItem.level === 4)
-      const navItemColumnEntry = { ...navItem, navItemChilds: [] }
-      navItemsColumnEntries.push(navItemColumnEntry)
+      columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
+      columnEntries.push(columnEntry)
     } else {
       assert(navItem.level !== 1)
-      navItemsColumnEntries[navItemsColumnEntries.length - 1].navItemChilds.push(navItem)
+      columnEntry.navItems.push(navItem)
     }
   })
   assert(isFullWidth !== undefined)
-  navItemsColumnLayout.push({ navItemsColumnEntries, isFullWidth })
-  return navItemsColumnLayout
+  navItemsByColumnEntries.push({ columnEntries, isFullWidth })
+  return navItemsByColumnEntries
 }
 
 type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]

package/package.json

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