@brillout/docpress 0.15.13 → 0.16.1

package/Layout.tsx

@@ -1,18 +1,29 @@
 export { Layout }
 export { MenuToggle }
-export { containerQueryMobileLayout }
-export { containerQueryMobileNav as containerQueryMobileMenu }
+export { viewDesktop }
+export { viewTablet }
 export { navLeftWidthMin }
 export { navLeftWidthMax }
+export { bodyMaxWidth }
 export { unexpandNav }
 export { blockMargin }
 
+// - @media VS @container
+//   - Using `@container container-viewport` instead of @media would be interesting because @media doesn't consider the scrollbar width.
+//   - But we still use @media because using @container is complicated(/buggy?) to use inside <MenuModal> because of `position: fixed`.
+// - We use --padding-side because we cannot set a fixed max-width on the <NavHead> container .nav-head-content — DocPress doesn't know how many extra <NavHead> elements the user adds using the +docpress.topNavigation setting.
+
 import React from 'react'
 import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent'
 import { parseMarkdownMini } from './parseMarkdownMini'
 import { usePageContext } from './renderer/usePageContext'
 import { ExternalLinks } from './ExternalLinks'
-import { coseMenuModalOnMouseLeave, openMenuModal, toggleMenuModal } from './MenuModal/toggleMenuModal'
+import {
+  closeMenuModalOnMouseLeaveToggle,
+  ignoreHoverOnTouchStart,
+  openMenuModalOnMouseEnter,
+  toggleMenuModal,
+} from './MenuModal/toggleMenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { initializeJsToggle_SSR } from './code-blocks/hooks/useSelectCodeLang'
@@ -23,17 +34,19 @@ import { Style } from './utils/Style'
 import { cls } from './utils/cls'
 import { iconBooks } from './icons'
 import { EditLink } from './EditLink'
+import './Layout.css'
 
-const blockMargin = 3
+const blockMargin = 4
 const mainViewPadding = 20
-const mainViewWidthMax = 800
-const mainViewMax = (mainViewWidthMax + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
+const mainViewWidthMaxInner = 800
+const mainViewWidthMax = (mainViewWidthMaxInner + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
 const navLeftWidthMin = 300
 const navLeftWidthMax = 370
-const containerQuerySmallNav = 550
-const containerQueryMobileNav = 1000
-const containerQueryMobileLayout = (mainViewMax + navLeftWidthMin) as 1140 // 1140 = 840 + 300
-const containerQueryExtraSpace = (mainViewMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
+const viewMobile = 450
+const viewTablet = 1016
+const viewDesktop = (mainViewWidthMax + navLeftWidthMin + blockMargin) as 1144 // 1140 = 840 + 300 + 4
+const viewDesktopLarge = (mainViewWidthMax + navLeftWidthMax + blockMargin) as 1214 // 1214 = 840 + 370 + 4
+const bodyMaxWidth = 1300
 
 // Avoid whitespace at the bottom of pages with almost no content
 const whitespaceBuster1: React.CSSProperties = {
@@ -56,98 +69,77 @@ function Layout({ children }: { children: React.ReactNode }) {
     content = <LayoutDocsPage>{children}</LayoutDocsPage>
   }
 
+  const isNavLeftAlwaysHidden_ = isNavLeftAlwaysHidden()
   return (
     <div
       style={{
-        ['--bg-color']: '#f5f5f5',
+        ['--color-bg-gray']: '#f5f5f5',
         ['--block-margin']: `${blockMargin}px`,
-        ['--icon-text-padding']: '8px',
         // ['--nav-head-height']: `${isLandingPage ? 70 : 63}px`,
         ['--nav-head-height']: `63px`,
+        ['--main-view-padding']: `${mainViewPadding}px`,
+        // 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
+        container: 'container-viewport / inline-size',
+        maxWidth: isNavLeftAlwaysHidden_ ? undefined : bodyMaxWidth,
+        margin: 'auto',
       }}
     >
-      <MenuModal isTopNav={isLandingPage} />
-      <div
-        className={isLandingPage ? '' : 'doc-page'}
-        style={{
-          // 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
-          container: 'container-viewport / inline-size',
-          ...whitespaceBuster1,
-        }}
-      >
+      <MenuModal isTopNav={isLandingPage} isNavLeftAlwaysHidden_={isNavLeftAlwaysHidden_} />
+      <div className={isLandingPage ? '' : 'doc-page'} style={whitespaceBuster1}>
         <NavHead />
         {content}
       </div>
       {/* Early toggling, to avoid layout jumps */}
       <script dangerouslySetInnerHTML={{ __html: initializeJsToggle_SSR }}></script>
+      <Style>{getStyleLayout()}</Style>
     </div>
   )
 }
 
 function LayoutDocsPage({ children }: { children: React.ReactNode }) {
-  const pageContext = usePageContext()
-  const hideNavLeftAlways =
-    pageContext.resolved.pageDesign?.hideMenuLeft ||
-    (pageContext.resolved.navItemsDetached && pageContext.resolved.navItemsDetached.length <= 1)
   return (
     <>
-      <Style>{getStyle()}</Style>
       <div style={{ display: 'flex', ...whitespaceBuster2 }}>
-        <NavLeft />
-        <div
-          id="nav-left-margin"
-          className="low-prio-grow"
-          style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }}
-        />
+        {!isNavLeftAlwaysHidden() && (
+          <>
+            <NavLeft />
+            <div
+              id="nav-left-margin"
+              className="low-prio-grow"
+              style={{ width: 0, maxWidth: 50, background: 'var(--color-bg-gray)' }}
+            />
+          </>
+        )}
         <PageContent>{children}</PageContent>
       </div>
-    </>
-  )
-  function getStyle() {
-    let style = css`
-@container container-viewport (min-width: ${containerQueryExtraSpace}px) {
+      <Style>{css`
+@container container-viewport (max-width: ${viewDesktopLarge - 1}px) {
+  #nav-left {
+    flex-grow: 1;
+    min-width: ${navLeftWidthMin + blockMargin}px;
+  }
+}
+@container container-viewport (min-width: ${viewDesktopLarge}px) {
   .low-prio-grow {
     flex-grow: 1;
   }
-  #navigation-container {
-    width: ${navLeftWidthMax}px !important;
+  #nav-left {
+    min-width: ${navLeftWidthMax + blockMargin}px;
   }
-}`
-    let navLeftHidden = css`
-#nav-left, #nav-left-margin {
-  display: none;
-}
-.page-wrapper {
-  --main-view-padding: 10px !important;
-  flex-grow: 1;
-  align-items: center;
 }
 .page-content {
-  margin: auto;
+  --hash-offset: 24px;
 }
-#menu-modal-wrapper {
-  position: absolute !important;
-}
-`
-    if (!hideNavLeftAlways) {
-      navLeftHidden = css`
-@container container-viewport (max-width: ${containerQueryMobileLayout - 1}px) {
-  ${navLeftHidden}
-}
-@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
-  .nav-head-full-width {
-    display: none !important;
+@container container-viewport (max-width: ${viewDesktopLarge - 1}px) and (min-width: ${viewDesktop}px) {
+  .page-content {
+    --hash-offset: 27px;
   }
 }
-`
-    }
-    style += navLeftHidden
-
-    return style
-  }
+`}</Style>
+    </>
+  )
 }
-
 function LayoutLandingPage({ children }: { children: React.ReactNode }) {
   return (
     <>
@@ -164,15 +156,16 @@ function PageContent({ children }: { children: React.ReactNode }) {
   const { globalNote } = pageContext.globalContext.config.docpress
   */
   const ifDocPage = (style: React.CSSProperties) => (isLandingPage ? {} : style)
-  const contentMaxWidth = pageContext.resolved.pageDesign?.contentMaxWidth ?? mainViewWidthMax
+  const contentMaxWidth = pageContext.resolved.pageDesign?.contentMaxWidth ?? mainViewWidthMaxInner
   return (
     <div
       className="page-wrapper low-prio-grow"
       style={{
-        // Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
+        // We must set min-width to avoid layout overflow on mobile/desktop view.
+        // https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
         minWidth: 0,
         ...ifDocPage({
-          backgroundColor: 'var(--bg-color)',
+          backgroundColor: 'var(--color-bg-gray)',
           paddingBottom: 50,
         }),
       }}
@@ -180,8 +173,6 @@ function PageContent({ children }: { children: React.ReactNode }) {
       <div
         className="page-content"
         style={{
-          // Also define --main-view-padding for landing page because it's used by <Contributors> and <Sponsors>
-          ['--main-view-padding']: `${mainViewPadding}px`,
           ...ifDocPage({
             width: `calc(${contentMaxWidth}px + 2 * var(--main-view-padding))`,
             maxWidth: '100%',
@@ -192,7 +183,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
         {/* globalNote */}
         {pageTitleParsed && !pageContext.resolved.pageDesign?.hideTitle && (
           <div>
-            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 6, padding: 10 }} />
+            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 15 }} />
             <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>
           </div>
         )}
@@ -211,9 +202,10 @@ function NavLeft() {
         id="nav-left"
         className="link-hover-animation"
         style={{
-          flexGrow: 1,
-          borderRight: 'var(--block-margin) solid white',
+          borderRight: 'var(--block-margin) solid var(--color-bg-white)',
           zIndex: 1,
+          // We must set min-width to avoid layout overflow when the text of a navigation item exceeds the available width.
+          // https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
         }}
       >
         <div
@@ -225,9 +217,7 @@ function NavLeft() {
           <NavHead isNavLeft={true} />
           <div
             style={{
-              backgroundColor: 'var(--bg-color)',
-              display: 'flex',
-              justifyContent: 'flex-end',
+              backgroundColor: 'var(--color-bg-gray)',
             }}
           >
             <div
@@ -239,7 +229,6 @@ function NavLeft() {
                 overscrollBehavior: 'contain',
                 paddingBottom: 40,
                 minWidth: navLeftWidthMin,
-                maxWidth: navLeftWidthMax,
                 width: '100%',
               }}
             >
@@ -254,9 +243,18 @@ function NavLeft() {
       </div>
       {/* Early scrolling, to avoid flashing */}
       <script dangerouslySetInnerHTML={{ __html: autoScrollNav_SSR }}></script>
+      <Style>{getStyleNavLeft()}</Style>
     </>
   )
 }
+function getStyleNavLeft() {
+  return css`
+.nav-item {
+  box-sizing: content-box;
+  max-width: ${navLeftWidthMax}px;
+}`
+}
+
 function NavigationContent(props: {
   navItems: NavItem[]
   showOnlyRelevant?: true
@@ -275,43 +273,51 @@ function NavigationContent(props: {
   )
 }
 
+function isNavLeftAlwaysHidden() {
+  const pageContext = usePageContext()
+  const { isLandingPage, navItemsDetached, pageDesign } = pageContext.resolved
+  return isLandingPage || !!pageDesign?.hideMenuLeft || !!(navItemsDetached && navItemsDetached.length <= 1)
+}
+
 const menuLinkStyle: React.CSSProperties = {
   height: '100%',
   padding: '0 var(--padding-side)',
   justifyContent: 'center',
 }
 
+// Two <NavHead> instances are rendered:
+//  - The left-side <NavHead> shown on documentation pages on desktop
+//  - The top <NavHead> shown otherwise
 function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
-  const { isLandingPage } = pageContext.resolved
   const { navMaxWidth, name, algolia } = pageContext.globalContext.config.docpress
+  const hideNavHeadLogo = pageContext.resolved.isLandingPage && !navMaxWidth
 
-  const navSecondaryContent = (
+  const navHeadSecondary = (
     <div
-      className={isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink desktop-grow'}
+      className={cls(['nav-head-secondary', isNavLeft && 'show-on-nav-hover add-transition'])}
       style={{
         padding: 0,
         display: 'flex',
         height: '100%',
-        ...(!isNavLeft
-          ? {}
-          : {
+        ...(isNavLeft
+          ? {
               position: 'absolute',
               left: '100%',
               top: 0,
-              '--padding-side': '20px',
-              width: mainViewMax, // guaranteed real estate
-            }),
+              width: mainViewWidthMax, // guaranteed real estate
+            }
+          : {}),
       }}
     >
       {pageContext.globalContext.config.docpress.topNavigation}
-      {!isNavLeft && <div className="desktop-grow" />}
+      <div className="desktop-grow" style={{ display: 'none' }} />
       <ExternalLinks
         style={{
           display: 'inline-flex',
           fontSize: '1.06em',
-          padding: '0 var(--padding-side)',
-          marginLeft: -8,
+          paddingRight: 'var(--main-view-padding)',
+          paddingLeft: 'var(--padding-side)',
         }}
       />
     </div>
@@ -319,22 +325,19 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <div
-      className={cls(['nav-head-top', !isNavLeft && 'nav-head-full-width', 'link-hover-animation'])}
+      className={cls(['nav-head link-hover-animation', isNavLeft && 'is-nav-left', !!navMaxWidth && 'has-max-width'])}
       style={{
-        display: 'flex',
-        justifyContent: isNavLeft ? 'flex-end' : 'center',
-        backgroundColor: 'var(--bg-color)',
-        borderBottom: 'var(--block-margin) solid white',
+        backgroundColor: 'var(--color-bg-gray)',
+        borderBottom: 'var(--block-margin) solid var(--color-bg-white)',
         position: 'relative',
       }}
     >
-      {isNavLeft && <NavHeaderLeftFullWidthBackground />}
+      {isNavLeft && <NavHeadLeftFullWidthBackground />}
       <div
         style={{
+          // DON'T REMOVE this container: it's needed for the `cqw` values
           container: 'container-nav-head / inline-size',
           width: '100%',
-          minWidth: isNavLeft && navLeftWidthMin,
-          maxWidth: isNavLeft && navLeftWidthMax,
         }}
       >
         <div
@@ -344,107 +347,154 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             maxWidth: navMaxWidth,
             margin: 'auto',
             height: 'var(--nav-head-height)',
-            fontSize: `min(15.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
+            fontSize: `min(14.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
             color: '#666',
-            ['--icon-text-padding']: 'min(8px, 1.8cqw)',
             display: 'flex',
             justifyContent: 'center',
           }}
         >
-          <NavLogo className="grow-half" />
-          {!isNavLeft && <div className="desktop-grow" />}
-          {algolia && <SearchLink className="grow-half" style={menuLinkStyle} />}
-          <MenuToggleMain className="grow-full" style={menuLinkStyle} />
-          {navSecondaryContent}
+          {!hideNavHeadLogo && <NavHeadLogo isNavLeft={isNavLeft} />}
+          <div className="desktop-grow" style={{ display: 'none' }} />
+          {algolia && <SearchLink className="always-shown" style={menuLinkStyle} />}
+          <MenuToggleMain className="always-shown nav-head-menu-toggle" style={menuLinkStyle} />
+          {navHeadSecondary}
         </div>
       </div>
-      <Style>{getStyle()}</Style>
     </div>
   )
+}
+function getStyleLayout() {
+  let style = ''
 
-  function getStyle() {
-    let style = css`
-@container container-nav-head (max-width: ${containerQuerySmallNav}px) {
-  .grow-full {
-    flex-grow: 1;
+  // Mobile
+  style += css`
+@media(max-width: ${viewMobile}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-menu-toggle {
+      justify-content: flex-end !important;
+      padding-right: var(--main-view-padding) !important;
+    }
+    .nav-head-content {
+      --icon-text-padding: min(8px, 1.3cqw);
+      & > * {
+        flex-grow: 1;
+      }
+    }
   }
-  .grow-half {
-    flex-grow: 0.5;
+}`
+
+  // Mobile + tablet
+  style += css`
+@media(max-width: ${viewTablet}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-secondary {
+      display: none !important;
+    }
   }
-  .nav-head-content {
-    --padding-side: 0px;
+}`
+
+  // Tablet
+  style += css`
+@media(max-width: ${viewTablet}px) and (min-width: ${viewMobile + 1}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-content {
+      --icon-text-padding: 8px;
+      --padding-side: 20px;
+    }
   }
-  .nav-logo {
-    justify-content: flex-start;
-    padding-left: 15px;
-    margin-left: -10px;
+}`
+
+  // Desktop small + desktop
+  style += css`
+@media(min-width: ${viewTablet + 1}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-content {
+      --icon-text-padding: min(8px, 0.5cqw);
+      --padding-side: min(20px, 1.2cqw);
+    }
+    &.has-max-width {
+      .desktop-grow {
+        display: block !important;
+      }
+      .desktop-grow,
+      .nav-head-secondary {
+        flex-grow: 1;
+      }
+    }
+  }
+  .page-wrapper {
+    min-width: ${mainViewWidthMax}px !important;
   }
 }
-@container container-viewport (max-width: ${containerQuerySmallNav}px) {
-  .grow-half {
-    flex-grow: 1 !important;
+`
+
+  // Desktop
+  if (!isNavLeftAlwaysHidden()) {
+    style += css`
+@container container-viewport (min-width: ${viewDesktop}px) {
+  .nav-head:not(.is-nav-left) {
+    display: none !important;
   }
-  .nav-logo {
-    justify-content: center;
-    padding: 0;
-    margin: 0;
+  .nav-head.is-nav-left {
+    .nav-head-content {
+      --icon-text-padding: min(8px, 7 * (1cqw - 2.5px));
+      & > :not(.always-shown) {
+        --padding-side: min(24px, 27 * (1cqw - 2.5px));
+      }
+      & > * {
+        flex-grow: 0.5;
+      }
+      & > .nav-head-menu-toggle {
+        flex-grow: 1;
+      }
+    }
   }
-}
-@container container-nav-head (min-width: 501px) {
-  .nav-head-content {
-    --padding-side: 24px;
+  .show-on-nav-hover {
+    opacity: 0;
+    transition-property: opacity;
+    pointer-events: none;
   }
-  .nav-logo {
-    padding: 0 var(--padding-side);
+  html:not(.unexpand-nav) {
+    & .nav-head.is-nav-left:hover .show-on-nav-hover,
+    &:has(.nav-head:hover) #menu-modal-wrapper.show-on-nav-hover,
+    &.menu-modal-show .nav-head.is-nav-left .show-on-nav-hover,
+    &.menu-modal-show #menu-modal-wrapper.show-on-nav-hover {
+      opacity: 1;
+      pointer-events: all;
+    }
   }
 }
-@container container-nav-head (min-width: ${containerQueryMobileNav + 150}px) {
-  .nav-head-content {
-    --padding-side: 25px;
+@container container-viewport (max-width: ${viewDesktop - 1}px) {
+  #nav-left, #nav-left-margin {
+    display: none;
   }
-}
-@media(max-width: ${containerQueryMobileNav}px) {
-  .hide-on-shrink {
-    display: none !important;
+  body {
+    --main-view-padding: 10px !important;
   }
+  ${getStyleNavLeftHidden()}
 }
 `
-    if (navMaxWidth) {
-      style += css`
-@media(min-width: ${containerQueryMobileNav + 1}px) {
-  .desktop-grow {
-    flex-grow: 1;
+  } else {
+    style += getStyleNavLeftHidden()
   }
+
+  return style
 }
-`
-    }
-    if (isLandingPage && !navMaxWidth)
-      style += css`
-@media(min-width: ${containerQueryMobileNav + 1}px) {
-  .nav-logo {
-    display: none !important;
-  }
+function getStyleNavLeftHidden() {
+  return css`
+.page-wrapper {
+  flex-grow: 1;
+  align-items: center;
 }
-`
-    if (isNavLeft) {
-      style += css`
-
-.show-on-nav-hover {
-  opacity: 0;
-  transition-property: opacity;
-  pointer-events: none;
+.page-content {
+  margin: auto;
 }
-html:not(.unexpand-nav) :has(.nav-head-top:hover) .show-on-nav-hover,
-html:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,
-html:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {
-  opacity: 1;
-  pointer-events: all;
+#menu-modal-wrapper {
+  position: absolute !important;
 }
 `
-    }
-    return style
-  }
 }
+
 function unexpandNav() {
   document.documentElement.classList.add('unexpand-nav')
   // Using setTimeout() because requestAnimationFrame() doesn't delay enough
@@ -453,27 +503,27 @@ function unexpandNav() {
   }, 1000)
 }
 
-function NavHeaderLeftFullWidthBackground() {
+function NavHeadLeftFullWidthBackground() {
   return (
     <>
       <div
-        className="nav-bg show-on-nav-hover add-transition"
+        className="nav-head-bg show-on-nav-hover add-transition"
         style={{
           height: '100%',
           zIndex: -1,
-          background: 'var(--bg-color)',
+          background: 'var(--color-bg-gray)',
           position: 'absolute',
           left: 0,
           top: 0,
           boxSizing: 'content-box',
-          borderBottom: 'var(--block-margin) solid white',
+          borderBottom: 'var(--block-margin) solid var(--color-bg-white)',
         }}
       />
       <Style>{
         // (min-width: 0px) => trick to always apply => @container seems to always require a condition
         css`
 @container container-viewport (min-width: 0px) {
-  .nav-bg {
+  .nav-head-bg {
      width: 100cqw;
   }
 }
@@ -483,7 +533,7 @@ function NavHeaderLeftFullWidthBackground() {
   )
 }
 
-function NavLogo({ className }: { className: string }) {
+function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
 
   const { navLogo } = pageContext.globalContext.config.docpress
@@ -517,12 +567,18 @@ function NavLogo({ className }: { className: string }) {
 
   return (
     <a
-      className={cls(['nav-logo', className])}
+      className="nav-head-logo"
       style={{
         display: 'flex',
         alignItems: 'center',
         height: '100%',
         color: 'inherit',
+        ...(!isNavLeft
+          ? {
+              paddingLeft: 'var(--main-view-padding)',
+              paddingRight: 'var(--padding-side)',
+            }
+          : {}),
       }}
       href="/"
       onContextMenu={!navLogo ? undefined : onContextMenu}
@@ -542,7 +598,6 @@ function isProjectNameShort(name: string) {
   return name.length <= 4
 }
 
-let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
 type PropsDiv = React.HTMLProps<HTMLDivElement>
 function MenuToggleMain(props: PropsDiv) {
   return (
@@ -554,12 +609,12 @@ function MenuToggleMain(props: PropsDiv) {
         <MenuIcon /> Menu
       </span>
       <Style>{css`
-@media(max-width: ${containerQueryMobileNav}px) {
+@media(max-width: ${viewTablet}px) {
   .text-docs, .caret-icon {
     display: none !important;
   }
 }
-@media(min-width: ${containerQueryMobileNav + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   .text-menu {
     display: none;
   }
@@ -587,29 +642,23 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
         toggleMenuModal(menuId)
       }}
       onMouseEnter={() => {
-        if (onMouseIgnore) return
-        openMenuModal(menuId)
+        openMenuModalOnMouseEnter(menuId)
       }}
       onMouseLeave={() => {
-        if (onMouseIgnore) return
-        coseMenuModalOnMouseLeave(menuId)
-      }}
-      onTouchStart={() => {
-        onMouseIgnore = setTimeout(() => {
-          onMouseIgnore = undefined
-        }, 1000)
+        closeMenuModalOnMouseLeaveToggle(menuId)
       }}
+      onTouchStart={ignoreHoverOnTouchStart}
     >
       <Style>{getAnimation()}</Style>
       {props.children}
       <CaretIcon
         style={{
           width: 11,
-          marginLeft: 10,
+          marginLeft: 'calc(var(--icon-text-padding) - 1px)',
           flexShrink: 0,
           color: '#888',
           position: 'relative',
-          top: -1,
+          top: 1,
         }}
       />
     </div>
@@ -635,7 +684,7 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
     height: 100%;
     width: 100%;
     top: var(--nav-head-height);
-    background-color: var(--active-color);
+    background-color: var(--color-active);
     transition-property: top !important;
     transition: top 0.4s ease !important;
     z-index: -1;
@@ -687,7 +736,7 @@ function DocsIcon() {
     <img
       src={iconBooks}
       width={18}
-      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }}
+      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', position: 'relative', top: 2 }}
       className="decolorize-5"
     />
   )