@brillout/docpress 0.7.2 → 0.7.4

package/dist/components/Algolia/SourceIcon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+var LvlIcon = function () {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" },
+        React.createElement("path", { d: "M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" })));
+};
+export function SourceIcon(props) {
+    switch (props.type) {
+        case 'lvl1':
+            return React.createElement(LvlIcon, null);
+        case 'content':
+            return React.createElement(ContentIcon, null);
+        default:
+            return React.createElement(AnchorIcon, null);
+    }
+}
+function AnchorIcon() {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" },
+        React.createElement("path", { d: "M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+function ContentIcon() {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" },
+        React.createElement("path", { d: "M17 5H3h14zm0 5H3h14zm0 5H3h14z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" })));
+}

package/dist/components/Algolia/types.d.ts

@@ -0,0 +1,79 @@
+export type InternalDocSearchHit = DocSearchHit & {
+    __docsearch_parent: InternalDocSearchHit | null;
+};
+export type StoredDocSearchHit = Omit<DocSearchHit, '_highlightResult' | '_snippetResult'>;
+type ContentType = 'content' | 'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4' | 'lvl5' | 'lvl6';
+interface DocSearchHitAttributeHighlightResult {
+    value: string;
+    matchLevel: 'full' | 'none' | 'partial';
+    matchedWords: string[];
+    fullyHighlighted?: boolean;
+}
+interface DocSearchHitHighlightResultHierarchy {
+    lvl0: DocSearchHitAttributeHighlightResult;
+    lvl1: DocSearchHitAttributeHighlightResult;
+    lvl2: DocSearchHitAttributeHighlightResult;
+    lvl3: DocSearchHitAttributeHighlightResult;
+    lvl4: DocSearchHitAttributeHighlightResult;
+    lvl5: DocSearchHitAttributeHighlightResult;
+    lvl6: DocSearchHitAttributeHighlightResult;
+}
+interface DocSearchHitHighlightResult {
+    content: DocSearchHitAttributeHighlightResult;
+    hierarchy: DocSearchHitHighlightResultHierarchy;
+    hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
+}
+interface DocSearchHitAttributeSnippetResult {
+    value: string;
+    matchLevel: 'full' | 'none' | 'partial';
+}
+interface DocSearchHitSnippetResult {
+    content: DocSearchHitAttributeSnippetResult;
+    hierarchy: DocSearchHitHighlightResultHierarchy;
+    hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
+}
+export declare type DocSearchHit = {
+    objectID: string;
+    content: string | null;
+    url: string;
+    url_without_anchor: string;
+    type: ContentType;
+    anchor: string | null;
+    hierarchy: {
+        lvl0: string;
+        lvl1: string;
+        lvl2: string | null;
+        lvl3: string | null;
+        lvl4: string | null;
+        lvl5: string | null;
+        lvl6: string | null;
+    };
+    _highlightResult: DocSearchHitHighlightResult;
+    _snippetResult: DocSearchHitSnippetResult;
+    _rankingInfo?: {
+        promoted: boolean;
+        nbTypos: number;
+        firstMatchedWord: number;
+        proximityDistance?: number;
+        geoDistance: number;
+        geoPrecision?: number;
+        nbExactWords: number;
+        words: number;
+        filters: number;
+        userScore: number;
+        matchedGeoLocation?: {
+            lat: number;
+            lng: number;
+            distance: number;
+        };
+    };
+    _distinctSeqID?: number;
+    __autocomplete_indexName?: string;
+    __autocomplete_queryID?: string;
+    __autocomplete_algoliaCredentials?: {
+        appId: string;
+        apiKey: string;
+    };
+    __autocomplete_id?: number;
+};
+export {};

package/dist/components/Algolia/types.js

@@ -0,0 +1 @@
+export {};

package/dist/config/resolveHeadingsData.d.ts

@@ -13,4 +13,9 @@ declare function resolveHeadingsData(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
+    noSideNavigation: true | undefined;
+    topNavigationList: {
+        title: string;
+        url: string | null | undefined;
+    }[];
 };

package/dist/config/resolveHeadingsData.js

@@ -67,12 +67,17 @@ function resolveHeadingsData(pageContext) {
             };
         }
     }
+    var topNavigationList = headingsResolved
+        .filter(function (heading) { return heading.topNavigation; })
+        .map(function (h) { return ({ title: typeof h.topNavigation === 'string' ? h.topNavigation : h.title, url: h.url }); });
     var pageContextAddendum = {
         navigationData: navigationData,
         linksAll: linksAll,
         isLandingPage: isLandingPage,
         pageTitle: pageTitle,
         documentTitle: documentTitle,
+        noSideNavigation: activeHeading.noSideNavigation,
+        topNavigationList: topNavigationList,
     };
     return pageContextAddendum;
 }
@@ -140,12 +145,14 @@ function getActiveHeading(headingsResolved, headingsDetachedResolved, pageContex
         })) !== null && _a !== void 0 ? _a : null;
     }
     if (!activeHeading) {
-        throw new Error(__spreadArray([
-            "URL ".concat(pc.bold(urlPathname), " not found in following URLs:")
-        ], headingsResolved
-            .map(function (h) { return "  ".concat(h.url); })
-            .filter(Boolean)
-            .sort(), true).join('\n'));
+        throw new Error([
+            "URL ".concat(pc.bold(urlPathname), " not found in following URLs:"),
+            __spreadArray(__spreadArray([], headingsResolved, true), headingsDetachedResolved, true).filter(Boolean)
+                .map(function (h) { return h.url; })
+                .sort()
+                .map(function (url) { return "  ".concat(url); })
+                .join('\n'),
+        ].join('\n'));
     }
     return { activeHeading: activeHeading, isDetachedPage: isDetachedPage };
 }

package/dist/config/resolvePageContext.d.ts

@@ -20,6 +20,11 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
+    noSideNavigation: true | undefined;
+    topNavigationList: {
+        title: string;
+        url: string | null | undefined;
+    }[];
 } & {
     urlPathname: string;
     meta: {

package/dist/navigation/Navigation.js

@@ -34,11 +34,11 @@ function NavigationMask() {
 }
 function NavigationContent(props) {
     var navItemsWithComputed = addComputedProps(props.navItems, props.currentUrl);
-    var navItemsGrouped = groupByLevel1(navItemsWithComputed);
+    var navItemsGrouped = groupByLevelMin(navItemsWithComputed);
     return (React.createElement("div", { id: props.id, className: "navigation-content" },
-        React.createElement("div", { className: "nav-column", style: { position: 'relative' } }, navItemsGrouped.map(function (navItemLevel1, i) { return (React.createElement("div", { className: "nav-items-level-1-group", key: i },
-            React.createElement(NavItemComponent, { navItem: navItemLevel1 }),
-            navItemLevel1.navItemChilds.map(function (navItem, j) { return (React.createElement(NavItemComponent, { navItem: navItem, key: j })); }))); }))));
+        React.createElement("div", { className: "nav-column", style: { position: 'relative' } }, navItemsGrouped.map(function (navItemGroup, i) { return (React.createElement("div", { className: "nav-items-group", key: i },
+            React.createElement(NavItemComponent, { navItem: navItemGroup }),
+            navItemGroup.navItemChilds.map(function (navItem, j) { return (React.createElement(NavItemComponent, { navItem: navItem, key: j })); }))); }))));
 }
 function NavItemComponent(_a) {
     var _b;
@@ -62,16 +62,16 @@ function NavItemComponent(_a) {
     return (React.createElement("a", { className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
-            navItem.isActive && ' is-active',
-            navItem.isActiveFirst && ' is-active-first',
-            navItem.isActiveLast && ' is-active-last',
+            navItem.url && navItem.isActive && ' is-active',
+            navItem.url && navItem.isActiveFirst && ' is-active-first',
+            navItem.url && navItem.isActiveLast && ' is-active-last',
             navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
             navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
         ]
             .filter(Boolean)
             .join(' '), href: (_b = navItem.url) !== null && _b !== void 0 ? _b : undefined }, titleInNavJsx));
 }
-function groupByLevel1(navItems) {
+function groupByLevelMin(navItems) {
     var navItemsGrouped = [];
     var levelMin = Math.min.apply(Math, navItems.map(function (h) { return h.level; }));
     navItems.forEach(function (navItem) {

package/dist/navigation/NavigationHeader.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import '@docsearch/css';
 export { NavigationHeader };
+export { Links };
 declare function NavigationHeader(): React.JSX.Element;
+declare function Links({ style }: {
+    style?: React.CSSProperties;
+}): React.JSX.Element;

package/dist/navigation/NavigationHeader.js

@@ -17,8 +17,10 @@ import iconChangelog from '../icons/changelog.svg';
 import iconLanguages from '../icons/languages.svg';
 import { usePageContext, usePageContext2 } from '../renderer/usePageContext';
 import { DocSearch } from '@docsearch/react';
+import { Hit } from '../components/Algolia/Hit';
 import '@docsearch/css';
 export { NavigationHeader };
+export { Links };
 function NavigationHeader() {
     var _a;
     var pageContext = usePageContext();
@@ -34,22 +36,18 @@ function NavigationHeader() {
             React.createElement(NavHeader, null)),
         React.createElement(Links, null)));
 }
-function Links() {
+function Links(_a) {
+    var style = _a.style;
     var pageContext = usePageContext();
-    var _a = pageContext.config, projectInfo = _a.projectInfo, i18n = _a.i18n;
+    var _b = pageContext.config, projectInfo = _b.projectInfo, i18n = _b.i18n;
     var iconI18n = !i18n ? null : (React.createElement(LinkIcon, { className: "decolorize-4", icon: iconLanguages, href: '/languages', style: { height: 21, position: 'relative', top: 0, left: 0 } }));
     var algolia = pageContext.meta.algolia;
-    return (React.createElement("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            paddingTop: 0,
-            justifyContent: 'left',
-        } },
+    return (React.createElement("div", { style: __assign({ display: 'flex', alignItems: 'center', paddingTop: 0, justifyContent: 'left' }, style) },
+        algolia && (React.createElement("div", { className: "decolorize-6 colorize-on-hover" },
+            React.createElement(DocSearch, { appId: algolia.appId, indexName: algolia.indexName, apiKey: algolia.apiKey, insights: true, hitComponent: Hit }))),
         React.createElement(LinkIcon, { className: "decolorize-4", icon: iconGithub, href: projectInfo.githubRepository }),
         projectInfo.discordInvite && (React.createElement(LinkIcon, { className: "decolorize-6", icon: iconDiscord, href: projectInfo.discordInvite })),
-        React.createElement(LinkIcon, { className: "decolorize-7", icon: iconTwitter, href: projectInfo.twitterProfile }),
-        algolia && (React.createElement("div", { className: "decolorize-6 colorize-on-hover" },
-            React.createElement(DocSearch, { appId: algolia.appId, indexName: algolia.indexName, apiKey: algolia.apiKey, transformItems: transformItems, insights: true }))),
+        React.createElement(LinkIcon, { className: "decolorize-4", icon: iconTwitter, href: projectInfo.twitterProfile }),
         iconI18n,
         React.createElement(ChangelogButton, null)));
 }
@@ -75,11 +73,3 @@ function LinkIcon(_a) {
         React.createElement("a", { className: 'colorize-on-hover ' + className, href: href, style: { padding: 3, display: 'inline-block', lineHeight: 0 } },
             React.createElement("img", { src: icon, height: "20", style: style }))));
 }
-var transformItems = function (hits) {
-    hits.map(function (hit) {
-        if (hit.url.indexOf('#page-content') > 0) {
-            hit.url = hit.url.replace('#page-content', '');
-        }
-    });
-    return hits;
-};

package/dist/types/Heading.d.ts

@@ -7,6 +7,8 @@ type HeadingResolved = {
     level: number;
     title: string;
     titleInNav: string;
+    noSideNavigation?: true;
+    topNavigation?: true | string;
     linkBreadcrumb: string[];
     sectionTitles?: string[];
 } & Tmp;
@@ -14,20 +16,24 @@ type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'>
     level: 2;
     linkBreadcrumb: null;
 };
-type HeadingDetachedDefinition = {
-    url: string;
+type HeadingDefinitionCommon = {
     title: string;
+    topNavigation?: true | string;
+};
+type HeadingDetachedDefinition = HeadingDefinitionCommon & {
+    url: string;
     sectionTitles?: string[];
 };
-type HeadingDefinition = {
+type HeadingDefinition = HeadingDefinitionCommon & {
     url?: null | string;
-    title: string;
     titleInNav?: string;
+    noSideNavigation?: true;
 } & HeadingDefinitionLevel & Tmp;
 type IsCategory = {
     url?: undefined;
     titleDocument?: undefined;
     titleInNav?: undefined;
+    noSideNavigation?: undefined;
 };
 type HeadingDefinitionLevel = ({
     level: 1;

package/dist/utils/assert.js

@@ -8,13 +8,13 @@ if (isBrowser()) {
     console.log([
         '[@brillout/docpress] DEV MODE',
         isDevMode() ? 'enabled' : 'disabled',
-        !isLocalhost() && 'run window.toggleDevMode() to toggle DEV MODE',
+        !isLocalhost() && '— run window.toggleDevMode() to toggle DEV MODE',
     ]
         .filter(Boolean)
         .join(' '));
     if (isDevMode()) {
         window.onerror = function (err) {
-            alert(err);
+            window.alert(err);
             window.onerror = null;
         };
     }
@@ -35,9 +35,6 @@ function assert(condition, debugInfo) {
         errMsg += ' Debug info: ' + String(debugInfo);
     }
     var err = new Error(errMsg);
-    if (isBrowser() && isDevMode()) {
-        window.alert(err.stack);
-    }
     throw err;
 }
 function assertUsage(condition, msg) {
@@ -45,9 +42,6 @@ function assertUsage(condition, msg) {
         return;
     }
     var err = new Error('[DocPress][Wrong Usage] ' + msg);
-    if (isBrowser() && isDevMode()) {
-        window.alert(err.stack);
-    }
     throw err;
 }
 function isBrowser() {
@@ -77,8 +71,10 @@ function assertWarning(condition, msg) {
         return;
     }
     msg = '[DocPress][Warning] ' + msg;
-    console.warn(msg);
     if (isBrowser() && isDevMode()) {
-        window.alert(msg);
+        throw new Error(msg);
+    }
+    else {
+        console.warn(msg);
     }
 }

package/icons/twitter.svg

@@ -1,16 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#1D9BF0;}
-</style>
-<g id="Logo_1_">
-	<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
-		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
-		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
-		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
-		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
-		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
-</g>
-</svg>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/></svg>

package/navigation/Navigation-items.css

@@ -22,7 +22,7 @@
   padding-right: 4px;
   text-decoration: none;
 }
-.nav-column:first-of-type > .nav-items-level-1-group:first-of-type > .nav-item-level-1:first-of-type {
+.nav-column:first-of-type > .nav-items-group:first-of-type > .nav-item-level-1:first-of-type {
   margin-top: 20px;
 }
 .nav-item-level-1 {

package/navigation/Navigation-layout.css

@@ -118,7 +118,7 @@ html.navigation-fullscreen .navigation-content > .nav-column {
   flex-grow: 1;
   max-width: 350px;
 }
-html.navigation-fullscreen .nav-column > .nav-items-level-1-group:first-child > .nav-item-level-1:first-child {
+html.navigation-fullscreen .nav-column > .nav-items-group:first-child > .nav-item-level-1:first-child {
   margin-top: 0px;
 }
 html.navigation-fullscreen {

package/navigation/Navigation.tsx

@@ -37,7 +37,6 @@ function Navigation({
             </>
           )}
           <NavigationContent id="navigation-content-main" navItems={navItemsAll} currentUrl={currentUrl} />
-          {/* <ScrollOverlay /> */}
           <NavigationFullscreenClose />
         </div>
       </div>
@@ -69,15 +68,15 @@ function NavigationContent(props: {
   currentUrl: string
 }) {
   const navItemsWithComputed = addComputedProps(props.navItems, props.currentUrl)
-  const navItemsGrouped = groupByLevel1(navItemsWithComputed)
+  const navItemsGrouped = groupByLevelMin(navItemsWithComputed)
 
   return (
     <div id={props.id} className="navigation-content">
       <div className="nav-column" style={{ position: 'relative' }}>
-        {navItemsGrouped.map((navItemLevel1, i) => (
-          <div className="nav-items-level-1-group" key={i}>
-            <NavItemComponent navItem={navItemLevel1} />
-            {navItemLevel1.navItemChilds.map((navItem, j) => (
+        {navItemsGrouped.map((navItemGroup, i) => (
+          <div className="nav-items-group" key={i}>
+            <NavItemComponent navItem={navItemGroup} />
+            {navItemGroup.navItemChilds.map((navItem, j) => (
               <NavItemComponent navItem={navItem} key={j} />
             ))}
           </div>
@@ -115,9 +114,9 @@ function NavItemComponent({
       className={[
         'nav-item',
         'nav-item-level-' + navItem.level,
-        navItem.isActive && ' is-active',
-        navItem.isActiveFirst && ' is-active-first',
-        navItem.isActiveLast && ' is-active-last',
+        navItem.url && navItem.isActive && ' is-active',
+        navItem.url && navItem.isActiveFirst && ' is-active-first',
+        navItem.url && navItem.isActiveLast && ' is-active-last',
         navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
         navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
       ]
@@ -131,8 +130,8 @@ function NavItemComponent({
   )
 }
 
-function groupByLevel1<T extends { level: number }>(navItems: T[]) {
-  const navItemsGrouped: (T & { navItemChilds: T[] })[] = []
+function groupByLevelMin(navItems: NavItemComputed[]) {
+  const navItemsGrouped: (NavItemComputed & { navItemChilds: NavItemComputed[] })[] = []
   const levelMin: number = Math.min(...navItems.map((h) => h.level))
   navItems.forEach((navItem) => {
     if (navItem.level === levelMin) {

package/navigation/NavigationHeader.tsx

@@ -6,9 +6,11 @@ import iconChangelog from '../icons/changelog.svg'
 import iconLanguages from '../icons/languages.svg'
 import { usePageContext, usePageContext2 } from '../renderer/usePageContext'
 import { DocSearch } from '@docsearch/react'
+import { Hit } from '../components/Algolia/Hit'
 import '@docsearch/css'
 
 export { NavigationHeader }
+export { Links }
 
 function NavigationHeader() {
   const pageContext = usePageContext()
@@ -46,7 +48,7 @@ function NavigationHeader() {
   )
 }
 
-function Links() {
+function Links({ style }: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config
   const iconI18n = !i18n ? null : (
@@ -65,24 +67,25 @@ function Links() {
         alignItems: 'center',
         paddingTop: 0,
         justifyContent: 'left',
+        ...style,
       }}
     >
-      <LinkIcon className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
-      {projectInfo.discordInvite && (
-        <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
-      )}
-      <LinkIcon className="decolorize-7" icon={iconTwitter} href={projectInfo.twitterProfile} />
       {algolia && (
         <div className="decolorize-6 colorize-on-hover">
           <DocSearch
             appId={algolia.appId}
             indexName={algolia.indexName}
             apiKey={algolia.apiKey}
-            transformItems={transformItems}
             insights={true}
+            hitComponent={Hit}
           />
         </div>
       )}
+      <LinkIcon className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
+      {projectInfo.discordInvite && (
+        <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
+      )}
+      <LinkIcon className="decolorize-4" icon={iconTwitter} href={projectInfo.twitterProfile} />
       {iconI18n}
       <ChangelogButton />
     </div>
@@ -126,17 +129,3 @@ function LinkIcon({ className, icon, href, style }: { className: string; icon: s
     </>
   )
 }
-
-// Remove superfluous hash '#page-content' from URLs pointing to whole pages
-//  - https://github.com/algolia/docsearch/issues/1801
-//  - https://discourse.algolia.com/t/how-to-avoid-hash-in-search-result-url/6486
-//  - https://discourse.algolia.com/t/docsearchs-transformdata-function-cannot-remove-hashes-from-result-urls/8487
-type TransformItems = Parameters<typeof DocSearch>[0]['transformItems']
-const transformItems: TransformItems = (hits) => {
-  hits.map((hit) => {
-    if (hit.url.indexOf('#page-content') > 0) {
-      hit.url = hit.url.replace('#page-content', '')
-    }
-  })
-  return hits
-}

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -1,12 +1,16 @@
 export { initNavigationFullscreen }
+export { initNavigationFullscreenOnce }
 export { hideNavigationFullScreen }
 
 import { assert } from '../../utils/client'
-let scrollPositionBeforeToggle: number = 0
-initOnce()
 
-function initOnce() {
-  window.addEventListener('resize', updateColumnWidth, { passive: true })
+let scrollPositionBeforeToggle: number
+
+function initNavigationFullscreenOnce() {
+  scrollPositionBeforeToggle = 0
+  initKeyBindings()
+}
+function initKeyBindings() {
   document.addEventListener(
     // We don't use keydown to not interfere with user pressing `<Esc>` for closing the browser's `<Ctrl-F>` search diablog, see https://stackoverflow.com/questions/66595035/how-to-detect-escape-key-if-search-bar-of-browser-is-open
     'keydown',
@@ -16,6 +20,8 @@ function initOnce() {
     },
     false,
   )
+  window.addEventListener('resize', updateColumnWidth, { passive: true })
+  initTopNavigation()
 }
 function initNavigationFullscreen() {
   document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
@@ -24,12 +30,11 @@ function initNavigationFullscreen() {
 }
 
 function toggleNavExpend() {
+  assert(scrollPositionBeforeToggle !== undefined)
   const navContainer = document.getElementById('navigation-container')!
   const scrollPos = navContainer.scrollTop
   document.documentElement.classList.toggle('navigation-fullscreen')
-  if (scrollPositionBeforeToggle !== undefined) {
-    navContainer.scrollTop = scrollPositionBeforeToggle
-  }
+  navContainer.scrollTop = scrollPositionBeforeToggle
   scrollPositionBeforeToggle = scrollPos
 }
 function hideNavigationFullScreen() {
@@ -39,7 +44,7 @@ function hideNavigationFullScreen() {
 
 function updateColumnWidth() {
   const navMinWidth = 299
-  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-items-level-1-group'))
+  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-items-group'))
   const numberOfColumnsMax = navH1Groups.length
 
   const widthAvailable = getViewportWidth()
@@ -121,3 +126,22 @@ function sum(arr: number[]): number {
   arr.forEach((n) => (total += n))
   return total
 }
+
+function initTopNavigation() {
+  document.addEventListener('click', (ev) => {
+    const linkTag = findLinkTag(ev.target as HTMLElement)
+    if (!linkTag) return
+    if (linkTag.id !== 'doclink') return
+    toggleNavExpend()
+  })
+}
+function findLinkTag(target: HTMLElement): null | HTMLElement {
+  while (target.tagName !== 'A') {
+    const { parentNode } = target
+    if (!parentNode) {
+      return null
+    }
+    target = parentNode as HTMLElement
+  }
+  return target
+}