@brillout/docpress 0.8.14 → 0.8.15

package/dist/Layout.js

@@ -14,15 +14,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 export { Layout };
-export { containerQueryMobile };
-export { navWidthMin };
-export { navWidthMax };
+export { containerQueryMobileLayout };
+export { containerQueryMobileMenu };
+export { navLeftWidthMin };
+export { navLeftWidthMax };
+export { unexpandNav };
 import React from 'react';
 import { NavigationContent } from './navigation/Navigation';
 import { EditPageNote } from './components/EditPageNote';
 import { parseTitle } from './parseTitle';
 import { usePageContext, usePageContext2 } from './renderer/usePageContext';
-import { Links } from './Links';
+import { NavSecondaryContent } from './NavSecondaryContent';
 import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal';
 import { MenuModal } from './MenuModal';
 import { autoScrollNav_SSR } from './autoScrollNav';
@@ -30,19 +32,20 @@ import { SearchLink } from './docsearch/SearchLink';
 import { navigate } from 'vike/client/router';
 import { css } from './utils/css';
 import { PassThrough } from './utils/PassTrough';
-var mainViewWidthMax = 800;
-var mainViewPadding = 20;
-var navWidthMax = 370;
-var navWidthMin = 300;
-var navWidth = {
-    minWidth: navWidthMin,
-    maxWidth: navWidthMax,
-    width: '100%',
-};
+import { Style } from './utils/Style';
+import { cls } from './utils/cls';
 var blockMargin = 3;
+var mainViewPadding = 20;
+var mainViewWidthMax = 800;
+var navLeftWidthMax = 370;
+var navLeftWidthMin = 300;
+// 840 = 800 + 20 * 2
 var mainViewMax = mainViewWidthMax + mainViewPadding * 2;
-var containerQuerySpacing = mainViewMax + navWidthMax + blockMargin;
-var containerQueryMobile = mainViewMax + navWidthMin;
+var containerQueryMobileMenu = 1000;
+// 1143 = 840 + 300
+var containerQueryMobileLayout = mainViewMax + navLeftWidthMin;
+// 1213 = 840 + 370 + 3
+var containerQueryExtraSpace = mainViewMax + navLeftWidthMax + blockMargin;
 // Avoid whitespace at the bottom of pages with almost no content
 var whitespaceBuster1 = {
     minHeight: '100vh',
@@ -68,30 +71,31 @@ 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['--nav-head-height'] = "".concat(isLandingPage ? 70 : 60, "px"),
             _b) },
         React.createElement(MenuModal, { isTopNav: isLandingPage }),
         React.createElement("div", { className: isLandingPage ? '' : 'doc-page', style: __assign({ 
                 // 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
-                containerType: 'inline-size' }, whitespaceBuster1) }, content)));
+                container: 'container-viewport / inline-size' }, whitespaceBuster1) },
+            React.createElement(NavHead, null),
+            content)));
 }
 function LayoutDocsPage(_a) {
     var children = _a.children;
     var pageContext = usePageContext();
-    var hideNavLeftAlways = pageContext.navItems.length <= 1;
+    var hideNavLeftAlways = pageContext.navItemsDetached && pageContext.navItemsDetached.length <= 1;
     return (React.createElement(React.Fragment, null,
         React.createElement("style", null, getStyle()),
-        React.createElement(NavMobile, null),
         React.createElement("div", { style: __assign({ display: 'flex' }, whitespaceBuster2) },
             React.createElement(NavLeft, null),
             React.createElement("div", { className: "low-prio-grow", style: { width: 0, maxWidth: 50, background: 'var(--bg-color)' } }),
             React.createElement(PageContent, null, children))));
     function getStyle() {
-        var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n@container(min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"], ["\n@container(min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"])), containerQuerySpacing, navWidthMax);
+        var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n@container container-viewport (min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"], ["\n@container container-viewport (min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"])), containerQueryExtraSpace, navLeftWidthMax);
         var navLeftHide = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n#nav-left {\n  display: none;\n}\n.page-wrapper {\n  --main-view-padding: 10px !important;\n  flex-grow: 1;\n  align-items: center;\n}\n.page-content {\n  margin: auto;\n}\n#menu-modal {\n  position: absolute !important;\n}\n"], ["\n#nav-left {\n  display: none;\n}\n.page-wrapper {\n  --main-view-padding: 10px !important;\n  flex-grow: 1;\n  align-items: center;\n}\n.page-content {\n  margin: auto;\n}\n#menu-modal {\n  position: absolute !important;\n}\n"])));
         if (!hideNavLeftAlways) {
-            navLeftHide = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n@container(max-width: ", "px) {\n  ", "\n}\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n"], ["\n@container(max-width: ", "px) {\n  ", "\n}\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n"])), containerQueryMobile - 1, navLeftHide, containerQueryMobile);
+            navLeftHide = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n@container container-viewport (max-width: ", "px) {\n  ", "\n}\n@container container-viewport (min-width: ", "px) {\n  .nav-head-top {\n    display: none !important;\n  }\n}\n"], ["\n@container container-viewport (max-width: ", "px) {\n  ", "\n}\n@container container-viewport (min-width: ", "px) {\n  .nav-head-top {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileLayout - 1, navLeftHide, containerQueryMobileLayout);
         }
         style += navLeftHide;
         return style;
@@ -99,15 +103,8 @@ function LayoutDocsPage(_a) {
 }
 function LayoutLandingPage(_a) {
     var children = _a.children;
-    var mobile = 800;
     return (React.createElement(React.Fragment, null,
-        React.createElement("style", null, getStyle()),
-        React.createElement(NavTop, null),
-        React.createElement(NavMobile, null),
         React.createElement(PageContent, null, children)));
-    function getStyle() {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n@container(max-width: ", "px) {\n  #top-navigation {\n    display: none !important;\n  }\n"], ["\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n@container(max-width: ", "px) {\n  #top-navigation {\n    display: none !important;\n  }\n"])), mobile, mobile - 1);
-    }
 }
 function PageContent(_a) {
     var _b;
@@ -133,98 +130,157 @@ function PageContent(_a) {
             children,
             !isLandingPage && React.createElement(EditPageNote, { pageContext: pageContext }))));
 }
-function NavMobile() {
-    return (React.createElement("div", { id: "nav-mobile" },
-        React.createElement(NavigationHeader, { iconSize: 40, paddingLeft: 12, style: { justifyContent: 'center' } })));
-}
-function NavTop() {
-    var _a;
-    var pageContext2 = usePageContext2();
-    var paddingSize = 35;
-    var padding = "0 ".concat(paddingSize, "px");
-    var TopNavigation = pageContext2.config.TopNavigation || PassThrough;
-    return (React.createElement("div", { id: "top-navigation", className: "link-hover-animation", style: (_a = {
-                position: 'relative',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                textDecoration: 'none',
-                marginBottom: 'var(--block-margin)',
-                backgroundColor: 'var(--bg-color)'
-            },
-            _a['--padding-side'] = "".concat(paddingSize, "px"),
-            _a.fontSize = '1.06em',
-            _a.color = '#666',
-            _a) },
-        React.createElement("div", { style: { display: 'flex', alignItems: 'center', height: 70 } },
-            React.createElement(TopNavigation, null),
-            React.createElement(SearchLink, { style: { padding: padding } }),
-            React.createElement(MenuLink, { style: { padding: padding } }),
-            React.createElement(Links, { style: { display: 'inline-flex', padding: padding, marginLeft: -8 } }))));
-}
 function NavLeft() {
     var pageContext = usePageContext();
-    var navItems = pageContext.navItems, navItemsAll = pageContext.navItemsAll, isDetachedPage = pageContext.isDetachedPage;
-    var headerHeight = 60;
+    var navItemsAll = pageContext.navItemsAll, navItemsDetached = pageContext.navItemsDetached;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { id: "nav-left", className: "link-hover-animation", style: {
                 flexGrow: 1,
                 borderRight: 'var(--block-margin) solid white',
+                zIndex: 1,
             } },
             React.createElement("div", { style: {
                     position: 'sticky',
                     top: 0,
                 } },
-                React.createElement(NavigationHeader, { iconSize: 39, paddingLeft: 6 }),
+                React.createElement(NavHead, { isNavLeft: true }),
                 React.createElement("div", { style: {
                         backgroundColor: 'var(--bg-color)',
                         display: 'flex',
                         justifyContent: 'flex-end',
                     } },
-                    React.createElement("div", { id: "navigation-container", style: __assign({ top: 0, height: "calc(100vh - ".concat(headerHeight, "px - var(--block-margin))"), overflowY: 'auto', overscrollBehavior: 'contain', paddingBottom: 40 }, navWidth) }, 
-                    // TODO/refactor: simplify?
-                    isDetachedPage ? (React.createElement(NavigationContent, { navItems: navItems })) : (React.createElement(NavigationContent, { navItems: navItemsAll, showOnlyRelevant: true })))))),
+                    React.createElement("div", { id: "navigation-container", style: {
+                            top: 0,
+                            height: "calc(100vh - var(--nav-head-height) - var(--block-margin))",
+                            overflowY: 'auto',
+                            overscrollBehavior: 'contain',
+                            paddingBottom: 40,
+                            minWidth: navLeftWidthMin,
+                            maxWidth: navLeftWidthMax,
+                            width: '100%',
+                        } }, navItemsDetached ? (React.createElement(NavigationContent, { navItems: navItemsDetached })) : (React.createElement(NavigationContent, { navItems: navItemsAll, showOnlyRelevant: true })))))),
         React.createElement("script", { dangerouslySetInnerHTML: { __html: autoScrollNav_SSR } })));
 }
-function NavigationHeader(_a) {
+function NavHead(_a) {
     var _b;
-    var iconSize = _a.iconSize, style = _a.style, paddingLeft = _a.paddingLeft;
+    var isNavLeft = _a.isNavLeft;
+    var pageContext = usePageContext();
+    var pageContext2 = usePageContext2();
+    var projectName = pageContext.meta.projectName;
+    var isLandingPage = pageContext.isLandingPage;
+    var linkStyle = {
+        height: '100%',
+        padding: '0 var(--padding-side)',
+        justifyContent: 'center',
+    };
+    var TopNavigation = pageContext2.config.TopNavigation || PassThrough;
+    var navSecondaryContent = (React.createElement("div", { className: isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink', style: __assign({ padding: 0, display: 'flex', height: '100%' }, (!isNavLeft
+            ? {}
+            : {
+                position: 'absolute',
+                left: '100%',
+                top: 0,
+                paddingLeft: 'var(--block-margin)',
+                '--padding-side': '20px',
+                width: mainViewMax, // guaranteed real estate
+            })) },
+        React.createElement(TopNavigation, null),
+        React.createElement(NavSecondaryContent, { style: {
+                display: 'inline-flex',
+                fontSize: '1.06em',
+                padding: '0 var(--padding-side)',
+                marginLeft: -8,
+            } })));
+    return (React.createElement("div", { className: cls(['nav-head-full-width', !isNavLeft && 'nav-head-top', 'link-hover-animation']), style: {
+            display: 'flex',
+            justifyContent: isNavLeft ? 'flex-end' : 'center',
+            backgroundColor: 'var(--bg-color)',
+            borderBottom: 'var(--block-margin) solid white',
+            position: 'relative',
+        } },
+        isNavLeft && React.createElement(NavHeaderLeftFullWidthBackground, null),
+        React.createElement("div", { style: {
+                container: 'container-nav-head / inline-size',
+                width: '100%',
+                minWidth: isNavLeft && navLeftWidthMin,
+                maxWidth: isNavLeft && navLeftWidthMax,
+            } },
+            React.createElement("div", { className: "nav-head-content", style: (_b = {
+                        width: '100%',
+                        height: 'var(--nav-head-height)',
+                        fontSize: "min(16.96px, ".concat(isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw', ")"),
+                        color: '#666'
+                    },
+                    _b['--icon-text-padding'] = 'min(8px, 1.8cqw)',
+                    _b.display = 'flex',
+                    _b.justifyContent = 'center',
+                    _b) },
+                React.createElement(NavLogo, { className: "grow-half" }),
+                React.createElement(SearchLink, { className: "grow-half", style: linkStyle }),
+                React.createElement(MenuLink, { className: "grow-full", style: linkStyle }),
+                navSecondaryContent)),
+        getStyle()));
+    function getStyle() {
+        var style = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n@container container-nav-head (max-width: 550px) {\n  .grow-full {\n    flex-grow: 1;\n  }\n  .grow-half {\n    flex-grow: 0.5;\n  }\n  .nav-head-content {\n    --padding-side: 0px;\n  }\n  .nav-logo {\n    padding-left: 15px;\n    margin-left: -10px;\n  }\n}\n@container container-nav-head (min-width: 501px) {\n  .nav-head-content {\n    --padding-side: 35px;\n  }\n  .nav-logo {\n    padding: 0 var(--padding-side);\n  }\n}\n@media(max-width: ", "px) {\n  .hide-on-shrink {\n    display: none !important;\n  }\n}\n"], ["\n@container container-nav-head (max-width: 550px) {\n  .grow-full {\n    flex-grow: 1;\n  }\n  .grow-half {\n    flex-grow: 0.5;\n  }\n  .nav-head-content {\n    --padding-side: 0px;\n  }\n  .nav-logo {\n    padding-left: 15px;\n    margin-left: -10px;\n  }\n}\n@container container-nav-head (min-width: 501px) {\n  .nav-head-content {\n    --padding-side: 35px;\n  }\n  .nav-logo {\n    padding: 0 var(--padding-side);\n  }\n}\n@media(max-width: ", "px) {\n  .hide-on-shrink {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileMenu);
+        if (isLandingPage)
+            style += css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n@media(min-width: ", "px) {\n  .nav-logo {\n    display: none !important;\n  }\n}\n"], ["\n@media(min-width: ", "px) {\n  .nav-logo {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileMenu + 1);
+        if (isNavLeft) {
+            style += css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\n.show-on-nav-hover {\n  opacity: 0;\n  transition-property: opacity;\n  pointer-events: none;\n}\nhtml:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {\n  opacity: 1;\n  pointer-events: all;\n}\n"], ["\n\n.show-on-nav-hover {\n  opacity: 0;\n  transition-property: opacity;\n  pointer-events: none;\n}\nhtml:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {\n  opacity: 1;\n  pointer-events: all;\n}\n"])));
+        }
+        return React.createElement(Style, null, style);
+    }
+}
+function unexpandNav() {
+    document.documentElement.classList.add('unexpand-nav');
+    // Using setTimeout() because requestAnimationFrame() doesn't delay enough
+    setTimeout(function () {
+        document.documentElement.classList.remove('unexpand-nav');
+    }, 1000);
+}
+function NavHeaderLeftFullWidthBackground() {
+    return (React.createElement("div", { className: "show-on-nav-hover add-transition", style: {
+            height: '100%',
+            width: '100vw',
+            zIndex: -1,
+            background: 'var(--bg-color)',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            boxSizing: 'content-box',
+            borderBottom: 'var(--block-margin) solid white',
+        } }));
+}
+function NavLogo(_a) {
+    var className = _a.className;
     var pageContext = usePageContext();
-    //*
+    var iconSize = 39;
     var projectName = pageContext.meta.projectName;
-    /*/
-    const projectName = 'Vike'
-    //*/
-    var isProjectNameShort = projectName.length <= 4;
-    var childrenStyle = (_b = {
-            justifyContent: 'center',
-            fontSize: isProjectNameShort ? '4.8cqw' : '4.5cqw'
-        },
-        _b['--icon-text-padding'] = '1.8cqw',
-        _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: '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)
-                            return; // no /press page
-                        if (window.location.pathname === '/press')
-                            return;
-                        ev.preventDefault();
-                        navigate('/press#logo');
-                    } }),
-                React.createElement("span", { style: {
-                        marginLeft: "calc(var(--icon-text-padding) + 2px)",
-                        fontSize: isProjectNameShort ? '1.65em' : '1.3em',
-                    } }, projectName)),
-            React.createElement(SearchLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 0.5 }) }),
-            React.createElement(MenuLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 1 }) }))));
+    return (React.createElement("a", { className: cls(['nav-logo', className]), style: {
+            display: 'flex',
+            alignItems: 'center',
+            color: 'inherit',
+            height: '100%',
+            justifyContent: 'flex-start',
+        }, href: "/" },
+        React.createElement("img", { src: pageContext.meta.faviconUrl, height: iconSize, width: iconSize, onContextMenu: function (ev) {
+                if (!pageContext.config.pressKit)
+                    return; // no /press page
+                if (window.location.pathname === '/press')
+                    return;
+                ev.preventDefault();
+                navigate('/press#logo');
+            } }),
+        React.createElement("span", { style: {
+                marginLeft: "calc(var(--icon-text-padding) + 2px)",
+                fontSize: isProjectNameShort(projectName) ? '1.65em' : '1.3em',
+            } }, projectName)));
+}
+function isProjectNameShort(projectName) {
+    return projectName.length <= 4;
 }
 var onMouseIgnore;
-function MenuLink(_a) {
-    var style = _a.style;
-    return (React.createElement("div", { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'default' }, style), className: "colorize-on-hover menu-toggle", onClick: function (ev) {
+function MenuLink(props) {
+    return (React.createElement("div", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'default', userSelect: 'none' }, props.style), className: ['colorize-on-hover menu-toggle', props.className].filter(Boolean).join(' '), onClick: function (ev) {
             ev.preventDefault();
             toggleMenuModal();
         }, onMouseOver: function () {
@@ -239,31 +295,20 @@ function MenuLink(_a) {
             onMouseIgnore = setTimeout(function () {
                 onMouseIgnore = undefined;
             }, 1000);
-        } },
-        React.createElement(DocsIcon, null),
-        "Docs"));
+        } }),
+        React.createElement("span", { className: "text-docs" },
+            React.createElement(DocsIcon, null),
+            " Docs"),
+        React.createElement("span", { className: "text-menu" },
+            React.createElement(MenuIcon, null),
+            " Menu"),
+        React.createElement(Style, null, css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n@media(max-width: ", "px) {\n  .text-docs {\n    display: none;\n  }\n}\n@media(min-width: ", "px) {\n  .text-menu {\n    display: none;\n  }\n}\n"], ["\n@media(max-width: ", "px) {\n  .text-docs {\n    display: none;\n  }\n}\n@media(min-width: ", "px) {\n  .text-menu {\n    display: none;\n  }\n}\n"])), containerQueryMobileMenu, containerQueryMobileMenu + 1))));
 }
 function DocsIcon() {
-    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
+    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
 }
-/* TODO/now: use for mobile
 function MenuIcon() {
-  return (
-    <svg
-      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>
-  )
-}
-*/
-function Style(_a) {
-    var children = _a.children;
-    return React.createElement("style", { dangerouslySetInnerHTML: { __html: children } });
+    return (React.createElement("svg", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', 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" })));
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/MenuModal.js

@@ -10,20 +10,19 @@ import React from 'react';
 import { usePageContext } from './renderer/usePageContext';
 import { NavigationContent } from './navigation/Navigation';
 import { css } from './utils/css';
-import { containerQueryMobile } from './Layout';
-import { Links } from './Links';
-import { isBrowser } from './utils/isBrowser';
+import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout';
+import { NavSecondaryContent } from './NavSecondaryContent';
 import { getViewportWidth } from './utils/getViewportWidth';
-initCloseListeners();
+import { Style } from './utils/Style';
 function MenuModal(_a) {
     var isTopNav = _a.isTopNav;
     return (React.createElement(React.Fragment, null,
-        React.createElement("style", null, getStyle()),
+        React.createElement(Style, null, getStyle()),
         React.createElement("div", { id: "menu-modal", className: "link-hover-animation add-transition", style: {
                 position: isTopNav ? 'absolute' : 'fixed',
                 width: '100%',
-                height: 'calc(100vh - var(--top-nav-height))',
-                top: 'var(--top-nav-height)',
+                height: 'calc(100vh - var(--nav-head-height))',
+                top: 'var(--nav-head-height)',
                 left: 0,
                 zIndex: 9999,
                 overflow: 'scroll',
@@ -34,37 +33,43 @@ function MenuModal(_a) {
                     // Place <LinksBottom /> to the bottom
                     display: 'flex',
                     flexDirection: 'column',
-                    minHeight: 'calc(100vh - var(--top-nav-height))',
+                    minHeight: 'calc(100vh - var(--nav-head-height))',
                     justifyContent: 'space-between',
                     // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
-                    containerType: 'inline-size',
+                    container: 'container-viewport / inline-size',
                 } },
-                React.createElement(Nav, null)))));
+                React.createElement(Nav, null),
+                React.createElement(NavSecondary, { className: "show-only-for-mobile" })),
+            React.createElement(CloseButton, { className: "show-only-for-mobile" }))));
 }
 function Nav() {
     var pageContext = usePageContext();
     var navItems = pageContext.navItemsAll;
     return React.createElement(NavigationContent, { columnLayout: true, navItems: navItems });
 }
-function LinksBottom() {
-    return (React.createElement("div", { style: {
+function NavSecondary(_a) {
+    var className = _a.className;
+    return (React.createElement("div", { className: className, style: {
             display: 'flex',
             justifyContent: 'center',
+            marginTop: 20,
         } },
-        React.createElement(Links, { style: { height: 70 } })));
+        React.createElement(NavSecondaryContent, { style: { height: 70 } })));
 }
 function getStyle() {
-    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);
+    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 container-viewport (min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n@media(max-width: ", "px) {\n  #menu-modal {\n    --nav-head-height: 0px !important;\n  }\n}\n@media(min-width: ", "px) {\n  .show-only-for-mobile {\n    display: none !important;\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 container-viewport (min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n@media(max-width: ", "px) {\n  #menu-modal {\n    --nav-head-height: 0px !important;\n  }\n}\n@media(min-width: ", "px) {\n  .show-only-for-mobile {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileLayout, containerQueryMobileMenu, containerQueryMobileMenu + 1);
 }
-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 },
+function CloseButton(_a) {
+    var className = _a.className;
+    return (React.createElement("div", { className: className, 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" },
             React.createElement("circle", { cx: "11.45", cy: "11.45", r: "10.607", fill: "#ececec", stroke: "#666", strokeDashoffset: "251.44", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.6875", style: { paintOrder: 'normal' } }),
             React.createElement("path", { d: "m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z", fill: "#666", stroke: "#666", strokeWidth: ".11719" }))));
 }
 function toggleMenuModal() {
     document.documentElement.classList.toggle('menu-modal-show');
-    if (document.documentElement.classList.contains('menu-modal-show') && getViewportWidth() < containerQueryMobile) {
+    if (document.documentElement.classList.contains('menu-modal-show') &&
+        getViewportWidth() < containerQueryMobileLayout) {
         autoScroll();
     }
 }
@@ -75,46 +80,28 @@ function autoScroll() {
     var navLink = navLinks[0];
     if (!navLink)
         return;
+    // None of the following seemes to be working: https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
+    if (findCollapsibleEl(navLink).classList.contains('collapsible-collapsed'))
+        return;
     navLink.scrollIntoView({
         behavior: 'instant',
         block: 'center',
         inline: 'start',
     });
 }
+function findCollapsibleEl(navLink) {
+    var parentEl = navLink;
+    while (parentEl) {
+        if (parentEl.classList.contains('collapsible'))
+            return parentEl;
+        parentEl = parentEl.parentElement;
+    }
+    return null;
+}
 function openMenuModal() {
     document.documentElement.classList.add('menu-modal-show');
 }
 function closeMenuModal() {
     document.documentElement.classList.remove('menu-modal-show');
 }
-function initCloseListeners() {
-    if (!isBrowser())
-        return;
-    document.addEventListener('click', onLinkClick);
-    // It's redundant (and onLinkClick() is enough), but just to be sure.
-    addEventListener('hashchange', closeMenuModal);
-}
-function onLinkClick(ev) {
-    if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey)
-        return;
-    var linkTag = findLinkTag(ev.target);
-    if (!linkTag)
-        return;
-    var href = linkTag.getAttribute('href');
-    if (!href)
-        return;
-    if (!href.startsWith('/') && !href.startsWith('#'))
-        return;
-    closeMenuModal();
-}
-function findLinkTag(target) {
-    while (target.tagName !== 'A') {
-        var parentNode = target.parentNode;
-        if (!parentNode) {
-            return null;
-        }
-        target = parentNode;
-    }
-    return target;
-}
 var templateObject_1;

package/dist/{Links.d.ts → NavSecondaryContent.d.ts}

@@ -1,6 +1,7 @@
-export { Links };
+export { NavSecondaryContent };
 import React from 'react';
 import '@docsearch/css';
-declare function Links({ style }: {
+declare function NavSecondaryContent(props: {
     style?: React.CSSProperties;
+    className?: string;
 }): React.JSX.Element;

package/dist/{Links.js → NavSecondaryContent.js}

@@ -9,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-// TODO/refactor: rename
-export { Links };
+export { NavSecondaryContent };
 import React from 'react';
 import iconGithub from './icons/github.svg';
 import iconTwitter from './icons/twitter.svg';
@@ -19,12 +18,11 @@ import iconChangelog from './icons/changelog.svg';
 import iconLanguages from './icons/languages.svg';
 import { usePageContext } from './renderer/usePageContext';
 import '@docsearch/css';
-function Links(_a) {
-    var style = _a.style;
+function NavSecondaryContent(props) {
     var pageContext = usePageContext();
-    var _b = pageContext.config, projectInfo = _b.projectInfo, i18n = _b.i18n;
+    var _a = pageContext.config, projectInfo = _a.projectInfo, i18n = _a.i18n;
     var iconI18n = !i18n ? null : (React.createElement(LinkIcon, { className: "decolorize-4", icon: iconLanguages, href: '/languages', style: { height: 21, position: 'relative', top: 0, left: 0 } }));
-    return (React.createElement("div", { style: __assign({ display: 'flex', alignItems: 'center', paddingTop: 0, justifyContent: 'left', height: '100%' }, style) },
+    return (React.createElement("div", __assign({}, props, { style: __assign({ display: 'flex', alignItems: 'center' }, props.style) }),
         iconI18n,
         projectInfo.discordInvite && (React.createElement(LinkIcon, { className: "decolorize-6", icon: iconDiscord, href: projectInfo.discordInvite })),
         React.createElement(LinkIcon, { className: "decolorize-4", icon: iconTwitter, href: projectInfo.twitterProfile }),
@@ -37,7 +35,7 @@ function ChangelogButton() {
     return (React.createElement("a", { href: "".concat(projectInfo.githubRepository, "/blob/main/CHANGELOG.md"), className: "colorize-on-hover", style: {
             display: 'flex',
             alignItems: 'center',
-            padding: 10,
+            padding: '0 5px',
             height: '100%',
         } },
         React.createElement("div", { className: "button", style: {

package/dist/components/HorizontalLine.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 export { HorizontalLine };
+import React from 'react';
 declare function HorizontalLine({ primary }: {
     primary?: true;
 }): React.JSX.Element;

package/dist/components/HorizontalLine.js

@@ -1,8 +1,9 @@
-import React from 'react';
 export { HorizontalLine };
+import React from 'react';
+import { cls } from '../utils/cls';
 function HorizontalLine(_a) {
     var primary = _a.primary;
-    return (React.createElement("div", { className: 'header-separator-line ' + (primary ? 'primary' : ''), style: { textAlign: 'center' } },
+    return (React.createElement("div", { className: cls(primary && 'primary'), style: { textAlign: 'center' } },
         React.createElement("hr", { style: {
                 display: 'inline-block',
                 margin: 0,

package/dist/config/resolveHeadingsData.d.ts

@@ -1,11 +1,10 @@
 export { resolveHeadingsData };
-import type { NavItem, NavItemAll } from '../navigation/Navigation';
+import type { NavItem } from '../navigation/Navigation';
 import type { LinkData } from '../components';
 import type { PageContextOriginal } from './resolvePageContext';
 declare function resolveHeadingsData(pageContext: PageContextOriginal): {
-    isDetachedPage: boolean;
-    navItems: NavItem[];
-    navItemsAll: NavItemAll[];
+    navItemsAll: NavItem[];
+    navItemsDetached: NavItem[] | undefined;
     linksAll: LinkData[];
     isLandingPage: boolean;
     pageTitle: string | null;