@brillout/docpress 0.8.12 → 0.8.13-commit-8740149

package/Layout.tsx

@@ -9,7 +9,7 @@ import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 import { Links } from './Links'
-import { toggleMenuModal } from './MenuModal'
+import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { SearchLink } from './docsearch/SearchLink'
@@ -58,6 +58,7 @@ function Layout({ children }: { children: React.ReactNode }) {
         ['--bg-color']: '#f5f5f7',
         ['--block-margin']: `${blockMargin}px`,
         ['--icon-text-padding']: '8px',
+        ['--top-nav-height']: `${isLandingPage ? 70 : 60}px`,
       }}
     >
       <MenuModal />
@@ -198,7 +199,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
 function NavMobile() {
   return (
     <div id="nav-mobile">
-      <NavigationHeader headerHeight={70} iconSize={40} paddingLeft={12} style={{ justifyContent: 'center' }} />
+      <NavigationHeader iconSize={40} paddingLeft={12} style={{ justifyContent: 'center' }} />
     </div>
   )
 }
@@ -255,7 +256,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          <NavigationHeader headerHeight={headerHeight} iconSize={39} paddingLeft={6} />
+          <NavigationHeader iconSize={39} paddingLeft={6} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -293,11 +294,10 @@ function NavLeft() {
 }
 
 function NavigationHeader({
-  headerHeight,
   iconSize,
   style,
   paddingLeft,
-}: { headerHeight: number; iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
+}: { iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   //*
   const { projectName } = pageContext.meta
@@ -324,8 +324,9 @@ function NavigationHeader({
       <div
         style={{
           display: 'flex',
-          height: headerHeight,
+          height: 'var(--top-nav-height)',
           containerType: 'inline-size',
+          alignItems: 'center',
           ...navWidth,
         }}
       >
@@ -383,41 +384,50 @@ function NavigationHeader({
   )
 }
 
-type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
-function MenuLink(props: PropsAnchor) {
+function MenuLink({ style }: { style: React.CSSProperties }) {
   return (
-    <a
-      {...props}
+    <div
       style={{
-        height: '100%',
+        height: 'calc(100% + 2 * var(--block-margin))',
         display: 'flex',
         alignItems: 'center',
-        cursor: 'pointer',
-        ...props.style,
+        ...style,
       }}
-      className="colorize-on-hover"
+      className="colorize-on-hover colorize-on-menu"
       onClick={(ev) => {
         ev.preventDefault()
         toggleMenuModal()
       }}
+      onMouseEnter={openMenuModal}
+      onMouseLeave={closeMenuModal}
       aria-label={'Ctrl\xa0+\xa0M'}
     >
+      {/* TODO/refactor
+      <style>{css`
+`}</style>
+*/}
+      <div
+        id="link-bg"
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: 'calc(100% - var(--block-margin))',
+          left: 0,
+          top: 0,
+        }}
+      ></div>
       <MenuIcon />
-      Menu
-    </a>
+      Docs
+    </div>
   )
 }
 function MenuIcon() {
   return (
-    <svg
+    <span
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
       className="decolorize-6"
-      viewBox="0 0 448 512"
     >
-      <path
-        fill="currentColor"
-        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
-      ></path>
-    </svg>
+      📚
+    </span>
   )
 }

package/MenuModal.tsx

@@ -1,5 +1,6 @@
 export { MenuModal }
 export { toggleMenuModal }
+export { openMenuModal }
 export { closeMenuModal }
 
 import React from 'react'
@@ -28,31 +29,39 @@ function MenuModal() {
            * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
           height: '100dh',
           /*/
-          height: '100vh',
-          maxHeight: '100dvh',
+          height: 'calc(100vh - var(--top-nav-height))',
           //*/
-          top: 0,
+          top: 'calc(var(--top-nav-height) + var(--block-margin))',
           left: 0,
           zIndex: 9999,
           overflow: 'scroll',
-          background: 'var(--bg-color)',
+          background: '#eaeaea',
+          // background: '#ededef',
+          // boxShadow: 'rgba(0, 0, 0, 0.35) 0 0 13px 3px',
+          // boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
+          boxShadow:
+            'rgb(6 24 44 / 8%) 0px 0px 0px 3px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset',
+          transition: 'opacity 0.3s ease-in-out',
         }}
+        onMouseEnter={openMenuModal}
+        onMouseLeave={closeMenuModal}
       >
         <div
           style={{
             // Place <LinksBottom /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '100dvh',
+            minHeight: 'calc(100vh - var(--top-nav-height))',
             justifyContent: 'space-between',
             // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
             containerType: 'inline-size',
           }}
         >
           <Nav />
-          <LinksBottom />
         </div>
+        {/* TODO: remove
         <CloseButton />
+        */}
       </div>
     </>
   )
@@ -62,6 +71,7 @@ function Nav() {
   const navItems = pageContext.navItemsAll
   return <NavigationContent columnLayout={true} navItems={navItems} />
 }
+// TODO: remove
 function LinksBottom() {
   return (
     <div
@@ -78,7 +88,8 @@ function LinksBottom() {
 function getStyle() {
   return css`
 html:not(.menu-modal-show) #menu-modal {
-  display: none;
+  opacity: 0;
+  pointer-events:none;
 }
 // disable scroll of main view
 html.menu-modal-show {
@@ -92,6 +103,7 @@ html.menu-modal-show {
 `
 }
 
+// TODO: remove?
 function CloseButton() {
   return (
     <div
@@ -142,6 +154,9 @@ function autoScroll() {
     inline: 'start',
   })
 }
+function openMenuModal() {
+  document.documentElement.classList.add('menu-modal-show')
+}
 function closeMenuModal() {
   document.documentElement.classList.remove('menu-modal-show')
 }

package/css/colorize-on-hover.css

@@ -4,7 +4,9 @@
  */
 @media (hover: hover) and (pointer: fine) {
   .colorize-on-hover:hover [class^='decolorize-'],
-  .colorize-on-hover:hover [class*=' decolorize-'] {
+  .colorize-on-hover:hover [class*=' decolorize-'],
+  html.menu-modal-show .colorize-on-menu [class^='decolorize-'],
+  html.menu-modal-show .colorize-on-menu [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
   .link-hover-animation a:hover {
@@ -38,3 +40,10 @@
 body {
   --active-color: rgba(0, 0, 0, 0.03);
 }
+
+
+/* TODO/refactor: move */
+:has(> #link-bg):hover > #link-bg,
+html.menu-modal-show #link-bg {
+  background: var(--active-color)
+}

package/dist/Layout.js

@@ -23,7 +23,7 @@ import { EditPageNote } from './components/EditPageNote';
 import { parseTitle } from './parseTitle';
 import { usePageContext, usePageContext2 } from './renderer/usePageContext';
 import { Links } from './Links';
-import { toggleMenuModal } from './MenuModal';
+import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal';
 import { MenuModal } from './MenuModal';
 import { autoScrollNav_SSR } from './autoScrollNav';
 import { SearchLink } from './docsearch/SearchLink';
@@ -68,6 +68,7 @@ function Layout(_a) {
             _b['--bg-color'] = '#f5f5f7',
             _b['--block-margin'] = "".concat(blockMargin, "px"),
             _b['--icon-text-padding'] = '8px',
+            _b['--top-nav-height'] = "".concat(isLandingPage ? 70 : 60, "px"),
             _b) },
         React.createElement(MenuModal, null),
         React.createElement("div", { className: isLandingPage ? '' : 'doc-page', style: __assign({ 
@@ -134,7 +135,7 @@ function PageContent(_a) {
 }
 function NavMobile() {
     return (React.createElement("div", { id: "nav-mobile" },
-        React.createElement(NavigationHeader, { headerHeight: 70, iconSize: 40, paddingLeft: 12, style: { justifyContent: 'center' } })));
+        React.createElement(NavigationHeader, { iconSize: 40, paddingLeft: 12, style: { justifyContent: 'center' } })));
 }
 function NavTop() {
     var _a;
@@ -174,7 +175,7 @@ function NavLeft() {
                     position: 'sticky',
                     top: 0,
                 } },
-                React.createElement(NavigationHeader, { headerHeight: headerHeight, iconSize: 39, paddingLeft: 6 }),
+                React.createElement(NavigationHeader, { iconSize: 39, paddingLeft: 6 }),
                 React.createElement("div", { style: {
                         backgroundColor: 'var(--bg-color)',
                         display: 'flex',
@@ -187,7 +188,7 @@ function NavLeft() {
 }
 function NavigationHeader(_a) {
     var _b;
-    var headerHeight = _a.headerHeight, iconSize = _a.iconSize, style = _a.style, paddingLeft = _a.paddingLeft;
+    var iconSize = _a.iconSize, style = _a.style, paddingLeft = _a.paddingLeft;
     var pageContext = usePageContext();
     //*
     var projectName = pageContext.meta.projectName;
@@ -203,7 +204,7 @@ function NavigationHeader(_a) {
         _b);
     var marginLeft = -10;
     return (React.createElement("div", { style: __assign({ backgroundColor: 'var(--bg-color)', display: 'flex', justifyContent: 'flex-end', borderBottom: 'var(--block-margin) solid white' }, style) },
-        React.createElement("div", { style: __assign({ display: 'flex', height: headerHeight, containerType: 'inline-size' }, navWidth) },
+        React.createElement("div", { style: __assign({ display: 'flex', height: 'var(--top-nav-height)', containerType: 'inline-size', alignItems: 'center' }, navWidth) },
             React.createElement("a", { style: __assign(__assign({ display: 'flex', alignItems: 'center', color: 'inherit', textDecoration: 'none', height: '100%', paddingLeft: paddingLeft + marginLeft * -1, marginLeft: marginLeft }, childrenStyle), { justifyContent: 'flex-start', flexGrow: 0.5 }), href: "/" },
                 React.createElement("img", { src: pageContext.meta.faviconUrl, height: iconSize, width: iconSize, onContextMenu: function (ev) {
                         if (!pageContext.config.pressKit)
@@ -220,16 +221,23 @@ function NavigationHeader(_a) {
             React.createElement(SearchLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 0.5 }) }),
             React.createElement(MenuLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 1 }) }))));
 }
-function MenuLink(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) {
+function MenuLink(_a) {
+    var style = _a.style;
+    return (React.createElement("div", { style: __assign({ height: 'calc(100% + 2 * var(--block-margin))', display: 'flex', alignItems: 'center' }, style), className: "colorize-on-hover colorize-on-menu", onClick: function (ev) {
             ev.preventDefault();
             toggleMenuModal();
-        }, "aria-label": 'Ctrl\xa0+\xa0M' }),
+        }, onMouseEnter: openMenuModal, onMouseLeave: closeMenuModal, "aria-label": 'Ctrl\xa0+\xa0M' },
+        React.createElement("div", { id: "link-bg", style: {
+                position: 'absolute',
+                width: '100%',
+                height: 'calc(100% - var(--block-margin))',
+                left: 0,
+                top: 0,
+            } }),
         React.createElement(MenuIcon, null),
-        "Menu"));
+        "Docs"));
 }
 function MenuIcon() {
-    return (React.createElement("svg", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6", viewBox: "0 0 448 512" },
-        React.createElement("path", { fill: "currentColor", d: "M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" })));
+    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
 }
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/MenuModal.d.ts

@@ -1,7 +1,9 @@
 export { MenuModal };
 export { toggleMenuModal };
+export { openMenuModal };
 export { closeMenuModal };
 import React from 'react';
 declare function MenuModal(): React.JSX.Element;
 declare function toggleMenuModal(): void;
+declare function openMenuModal(): void;
 declare function closeMenuModal(): void;

package/dist/MenuModal.js

@@ -4,6 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 export { MenuModal };
 export { toggleMenuModal };
+export { openMenuModal };
 export { closeMenuModal };
 import React from 'react';
 import { usePageContext } from './renderer/usePageContext';
@@ -25,33 +26,36 @@ function MenuModal() {
                  * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
                 height: '100dh',
                 /*/
-                height: '100vh',
-                maxHeight: '100dvh',
+                height: 'calc(100vh - var(--top-nav-height))',
                 //*/
-                top: 0,
+                top: 'calc(var(--top-nav-height) + var(--block-margin))',
                 left: 0,
                 zIndex: 9999,
                 overflow: 'scroll',
-                background: 'var(--bg-color)',
-            } },
+                background: '#eaeaea',
+                // background: '#ededef',
+                // boxShadow: 'rgba(0, 0, 0, 0.35) 0 0 13px 3px',
+                // boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
+                boxShadow: 'rgb(6 24 44 / 8%) 0px 0px 0px 3px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset',
+                transition: 'opacity 0.3s ease-in-out',
+            }, onMouseEnter: openMenuModal, onMouseLeave: closeMenuModal },
             React.createElement("div", { style: {
                     // Place <LinksBottom /> to the bottom
                     display: 'flex',
                     flexDirection: 'column',
-                    minHeight: '100dvh',
+                    minHeight: 'calc(100vh - var(--top-nav-height))',
                     justifyContent: 'space-between',
                     // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
                     containerType: 'inline-size',
                 } },
-                React.createElement(Nav, null),
-                React.createElement(LinksBottom, null)),
-            React.createElement(CloseButton, null))));
+                React.createElement(Nav, null)))));
 }
 function Nav() {
     var pageContext = usePageContext();
     var navItems = pageContext.navItemsAll;
     return React.createElement(NavigationContent, { columnLayout: true, navItems: navItems });
 }
+// TODO: remove
 function LinksBottom() {
     return (React.createElement("div", { style: {
             display: 'flex',
@@ -60,8 +64,9 @@ function LinksBottom() {
         React.createElement(Links, { style: { height: 70 } })));
 }
 function getStyle() {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n  display: none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"], ["\nhtml:not(.menu-modal-show) #menu-modal {\n  display: none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"])), containerQueryMobile);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n  opacity: 0;\n  pointer-events:none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"], ["\nhtml:not(.menu-modal-show) #menu-modal {\n  opacity: 0;\n  pointer-events:none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"])), containerQueryMobile);
 }
+// TODO: remove?
 function CloseButton() {
     return (React.createElement("div", { onClick: toggleMenuModal, style: { position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }, "aria-label": 'Escape\nCtrl\xa0+\xa0M', "data-label-shift": true },
         React.createElement("svg", { width: "48.855", height: "48.855", version: "1.1", viewBox: "0 0 22.901 22.901", xmlns: "http://www.w3.org/2000/svg" },
@@ -87,6 +92,9 @@ function autoScroll() {
         inline: 'start',
     });
 }
+function openMenuModal() {
+    document.documentElement.classList.add('menu-modal-show');
+}
 function closeMenuModal() {
     document.documentElement.classList.remove('menu-modal-show');
 }

package/dist/docsearch/SearchLink.js

@@ -21,6 +21,5 @@ function SearchLink(props) {
         "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" })));
+    return (React.createElement("span", { style: { marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }, className: "decolorize-7" }, "\uD83D\uDD0D"));
 }

package/dist/navigation/Navigation.js

@@ -43,6 +43,7 @@ function NavigationColumnLayout(props) {
         window.addEventListener('resize', updateviewportwidth, { passive: true });
     });
     var navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth);
+    var margin = 40;
     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: {
@@ -51,7 +52,8 @@ function NavigationColumnLayout(props) {
                 justifyContent: 'space-between',
                 maxWidth: '100%',
                 margin: 'auto',
-                marginBottom: 40,
+                marginTop: i === 0 ? -1 * margin : undefined,
+                marginBottom: margin,
             } },
             columns.map(function (columnEntry, j) { return (React.createElement("div", { key: j, style: {
                     flexGrow: 1,
@@ -59,7 +61,7 @@ function NavigationColumnLayout(props) {
                     display: 'flex',
                     flexDirection: 'column',
                     paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
-                } }, columnEntry.map(function (navItems, k) { return (React.createElement("div", { key: k },
+                } }, columnEntry.map(function (navItems, k) { return (React.createElement("div", { key: k, style: { marginTop: isFullWidth ? undefined : margin } },
                 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] })));

package/docsearch/SearchLink.tsx

@@ -29,17 +29,8 @@ function SearchLink(props: PropsAnchor) {
 }
 function SearchIcon() {
   return (
-    <svg
-      style={{ marginRight: 'var(--icon-text-padding)', lineHeight: 0, width: '1.3em' }}
-      className="decolorize-7"
-      viewBox="0 0 20 20"
-    >
-      <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"
-      ></path>
-    </svg>
+    <span style={{ marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }} className="decolorize-7">
+      🔍
+    </span>
   )
 }

package/navigation/Navigation.tsx

@@ -59,6 +59,7 @@ function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[]
   })
 
   const navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth)
+  const margin = 40
 
   return (
     <>
@@ -71,7 +72,8 @@ function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[]
             justifyContent: 'space-between',
             maxWidth: '100%',
             margin: 'auto',
-            marginBottom: 40,
+            marginTop: i === 0 ? -1 * margin : undefined,
+            marginBottom: margin,
           }}
         >
           {columns.map((columnEntry, j) => (
@@ -86,7 +88,7 @@ function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[]
               }}
             >
               {columnEntry.map((navItems, k) => (
-                <div key={k}>
+                <div key={k} style={{ marginTop: isFullWidth ? undefined : margin }}>
                   {navItems.map((navItem, l) => (
                     <NavItemComponent navItem={navItem} key={l} />
                   ))}

package/package.json

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