@brillout/docpress 0.8.13 → 0.8.14

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,9 +58,10 @@ 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 />
+      <MenuModal isTopNav={isLandingPage} />
       <div
         className={isLandingPage ? '' : 'doc-page'}
         style={{
@@ -112,6 +113,9 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
 .page-content {
   margin: auto;
 }
+#menu-modal {
+  position: absolute !important;
+}
 `
     if (!hideNavLeftAlways) {
       navLeftHide = css`
@@ -198,7 +202,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 +259,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 +297,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 +327,9 @@ function NavigationHeader({
       <div
         style={{
           display: 'flex',
-          height: headerHeight,
+          height: 'var(--top-nav-height)',
           containerType: 'inline-size',
+          alignItems: 'center',
           ...navWidth,
         }}
       >
@@ -383,30 +387,52 @@ function NavigationHeader({
   )
 }
 
-type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
-function MenuLink(props: PropsAnchor) {
+let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
+function MenuLink({ style }: { style: React.CSSProperties }) {
   return (
-    <a
-      {...props}
+    <div
       style={{
         height: '100%',
         display: 'flex',
         alignItems: 'center',
-        cursor: 'pointer',
-        ...props.style,
+        cursor: 'default',
+        ...style,
       }}
-      className="colorize-on-hover"
+      className="colorize-on-hover menu-toggle"
       onClick={(ev) => {
         ev.preventDefault()
         toggleMenuModal()
       }}
-      aria-label={'Ctrl\xa0+\xa0M'}
+      onMouseOver={() => {
+        if (onMouseIgnore) return
+        openMenuModal()
+      }}
+      onMouseLeave={() => {
+        if (onMouseIgnore) return
+        closeMenuModal()
+      }}
+      onTouchStart={() => {
+        onMouseIgnore = setTimeout(() => {
+          onMouseIgnore = undefined
+        }, 1000)
+      }}
     >
-      <MenuIcon />
-      Menu
-    </a>
+      <DocsIcon />
+      Docs
+    </div>
   )
 }
+function DocsIcon() {
+  return (
+    <span
+      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
+      className="decolorize-6"
+    >
+      📚
+    </span>
+  )
+}
+/* TODO/now: use for mobile
 function MenuIcon() {
   return (
     <svg
@@ -421,3 +447,8 @@ function MenuIcon() {
     </svg>
   )
 }
+*/
+
+function Style({ children }: { children: string }) {
+  return <style dangerouslySetInnerHTML={{ __html: children }} />
+}

package/Links.tsx

@@ -1,3 +1,6 @@
+// TODO/refactor: rename
+export { Links }
+
 import React from 'react'
 import iconGithub from './icons/github.svg'
 import iconTwitter from './icons/twitter.svg'
@@ -7,8 +10,6 @@ import iconLanguages from './icons/languages.svg'
 import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-export { Links }
-
 function Links({ style }: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config

package/MenuModal.tsx

@@ -1,5 +1,6 @@
 export { MenuModal }
 export { toggleMenuModal }
+export { openMenuModal }
 export { closeMenuModal }
 
 import React from 'react'
@@ -13,46 +14,46 @@ import { getViewportWidth } from './utils/getViewportWidth'
 
 initCloseListeners()
 
-function MenuModal() {
+function MenuModal({ isTopNav }: { isTopNav: boolean }) {
   return (
     <>
       <style>{getStyle()}</style>
       <div
         id="menu-modal"
-        className="link-hover-animation"
+        className="link-hover-animation add-transition"
         style={{
-          position: 'fixed',
+          position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
-          /* Do this once Firefox supports `dvh`: https://caniuse.com/?search=dvh
-           * - Then also replace all `vh` values with `dvh` values.
-           * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
-          height: '100dh',
-          /*/
-          height: '100vh',
-          maxHeight: '100dvh',
-          //*/
-          top: 0,
+          height: 'calc(100vh - var(--top-nav-height))',
+          top: 'var(--top-nav-height)',
           left: 0,
           zIndex: 9999,
           overflow: 'scroll',
-          background: '#eaeaea',
+          background: '#ededef',
+          transitionProperty: 'opacity',
         }}
+        onMouseOver={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 />
+          {/* TODO/now: use for mobile
           <LinksBottom />
+          */}
         </div>
+        {/* TODO/now: use for mobile
         <CloseButton />
+        */}
       </div>
     </>
   )
@@ -78,7 +79,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 {
@@ -142,6 +144,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,18 +4,33 @@
  */
 @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 .menu-toggle [class^='decolorize-'],
+  html.menu-modal-show .menu-toggle [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
-  .link-hover-animation a:hover {
+  .link-hover-animation a:hover,
+  .link-hover-animation .menu-toggle:hover,
+  html.menu-modal-show .menu-toggle {
     color: black !important;
     background-color: var(--active-color);
   }
 }
 
-.colorize-on-hover [class^='decolorize-'],
-.colorize-on-hover [class*=' decolorize-'] {
-  transition: filter 0.3s ease-in-out;
+[class^='decolorize-'],
+[class*=' decolorize-'],
+.link-hover-animation a,
+.link-hover-animation .menu-toggle,
+.add-transition {
+  transition: all 0.4s ease-in-out;
+}
+[class^='decolorize-'],
+[class*=' decolorize-'] {
+  transition-property: filter;
+}
+.link-hover-animation a,
+.menu-toggle {
+  transition-property: color, background-color;
 }
 
 .decolorize-7 {
@@ -31,10 +46,6 @@
   filter: grayscale(1) opacity(0.4);
 }
 
-.link-hover-animation a {
-  transition: all 0.3s ease-in-out !important;
-  transition-property: color, background-color !important;
-}
 body {
   --active-color: rgba(0, 0, 0, 0.03);
 }

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,8 +68,9 @@ 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(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
@@ -88,7 +89,7 @@ function LayoutDocsPage(_a) {
             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 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"], ["\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"])));
+        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);
         }
@@ -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,49 @@ 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) {
+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) {
             ev.preventDefault();
             toggleMenuModal();
-        }, "aria-label": 'Ctrl\xa0+\xa0M' }),
-        React.createElement(MenuIcon, null),
-        "Menu"));
+        }, onMouseOver: function () {
+            if (onMouseIgnore)
+                return;
+            openMenuModal();
+        }, onMouseLeave: function () {
+            if (onMouseIgnore)
+                return;
+            closeMenuModal();
+        }, onTouchStart: function () {
+            onMouseIgnore = setTimeout(function () {
+                onMouseIgnore = undefined;
+            }, 1000);
+        } },
+        React.createElement(DocsIcon, null),
+        "Docs"));
 }
+function DocsIcon() {
+    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
+}
+/* TODO/now: use for mobile
 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 (
+    <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 } });
 }
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/Links.d.ts

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

package/dist/Links.js

@@ -9,6 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+// TODO/refactor: rename
+export { Links };
 import React from 'react';
 import iconGithub from './icons/github.svg';
 import iconTwitter from './icons/twitter.svg';
@@ -17,7 +19,6 @@ import iconChangelog from './icons/changelog.svg';
 import iconLanguages from './icons/languages.svg';
 import { usePageContext } from './renderer/usePageContext';
 import '@docsearch/css';
-export { Links };
 function Links(_a) {
     var style = _a.style;
     var pageContext = usePageContext();

package/dist/MenuModal.d.ts

@@ -1,7 +1,11 @@
 export { MenuModal };
 export { toggleMenuModal };
+export { openMenuModal };
 export { closeMenuModal };
 import React from 'react';
-declare function MenuModal(): React.JSX.Element;
+declare function MenuModal({ isTopNav }: {
+    isTopNav: boolean;
+}): 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';
@@ -14,38 +15,31 @@ import { Links } from './Links';
 import { isBrowser } from './utils/isBrowser';
 import { getViewportWidth } from './utils/getViewportWidth';
 initCloseListeners();
-function MenuModal() {
+function MenuModal(_a) {
+    var isTopNav = _a.isTopNav;
     return (React.createElement(React.Fragment, null,
         React.createElement("style", null, getStyle()),
-        React.createElement("div", { id: "menu-modal", className: "link-hover-animation", style: {
-                position: 'fixed',
+        React.createElement("div", { id: "menu-modal", className: "link-hover-animation add-transition", style: {
+                position: isTopNav ? 'absolute' : 'fixed',
                 width: '100%',
-                /* Do this once Firefox supports `dvh`: https://caniuse.com/?search=dvh
-                 * - Then also replace all `vh` values with `dvh` values.
-                 * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
-                height: '100dh',
-                /*/
-                height: '100vh',
-                maxHeight: '100dvh',
-                //*/
-                top: 0,
+                height: 'calc(100vh - var(--top-nav-height))',
+                top: 'var(--top-nav-height)',
                 left: 0,
                 zIndex: 9999,
                 overflow: 'scroll',
-                background: '#eaeaea',
-            } },
+                background: '#ededef',
+                transitionProperty: 'opacity',
+            }, onMouseOver: 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();
@@ -60,7 +54,7 @@ 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);
 }
 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 },
@@ -87,6 +81,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/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/initKeyBindings.ts

@@ -1,7 +1,7 @@
 export { initKeyBindings }
 
 import { closeDocsearchModal } from './docsearch/toggleDocsearchModal'
-import { closeMenuModal, toggleMenuModal } from './MenuModal'
+import { closeMenuModal } from './MenuModal'
 
 function initKeyBindings() {
   window.addEventListener(
@@ -14,11 +14,6 @@ function initKeyBindings() {
         closeMenuModal()
       }
 
-      if (key === 'm' && ev.ctrlKey) {
-        closeDocsearchModal()
-        toggleMenuModal()
-      }
-
       // Replicates docsearch keybinding
       // https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L45-L49
       if ((key === 'k' && (ev.ctrlKey || ev.metaKey)) || (key === '/' && !isEditingContent(ev))) {

package/package.json

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