@brillout/docpress 0.15.13-commit-9b3f898 → 0.15.13-commit-39924f0

package/Layout.tsx

@@ -15,7 +15,12 @@ import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemCom
 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'
@@ -280,8 +285,8 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
         style={{
           display: 'inline-flex',
           fontSize: '1.06em',
-          padding: '0 var(--padding-side)',
-          marginLeft: -8,
+          paddingRight: 'var(--main-view-padding)',
+          paddingLeft: 'var(--padding-side)',
         }}
       />
     </div>
@@ -321,7 +326,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             justifyContent: 'center',
           }}
         >
-          {!hideNavHeadLogo && <NavHeadLogo />}
+          {!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} />
@@ -338,10 +343,6 @@ function getStyleNav() {
   style += css`
 @container container-viewport (max-width: ${viewMobile}px) {
   .nav-head:not(.is-nav-left) {
-    .nav-head-logo {
-      always-shown: flex-start !important;
-      padding-left: var(--main-view-padding);
-    }
     .nav-head-menu-toggle {
       justify-content: flex-end !important;
       padding-right: var(--main-view-padding) !important;
@@ -373,9 +374,6 @@ function getStyleNav() {
       --icon-text-padding: 8px;
       --padding-side: 20px;
     }
-    .nav-head-logo {
-      padding: 0 var(--padding-side);
-    }
   }
 }`
 
@@ -385,10 +383,7 @@ function getStyleNav() {
   .nav-head:not(.is-nav-left) {
     .nav-head-content {
       --icon-text-padding: min(8px, 0.5cqw);
-      --padding-side: min(20px, 1.3cqw);
-    }
-    .nav-head-logo {
-      padding: 0 var(--padding-side);
+      --padding-side: min(20px, 1.2cqw);
     }
     &.has-max-width {
       .desktop-grow {
@@ -423,10 +418,6 @@ function getStyleNav() {
         flex-grow: 1;
       }
     }
-    .nav-head-logo {
-      padding-left: 15px;
-      margin-left: -15px;
-    }
   }
   .show-on-nav-hover {
     opacity: 0;
@@ -512,7 +503,7 @@ function NavHeadLeftFullWidthBackground() {
   )
 }
 
-function NavHeadLogo({ className }: { className?: string }) {
+function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
 
   const { navLogo } = pageContext.globalContext.config.docpress
@@ -546,12 +537,17 @@ function NavHeadLogo({ className }: { className?: string }) {
 
   return (
     <a
-      className={cls(['nav-head-logo', className])}
       style={{
         display: 'flex',
         alignItems: 'center',
         height: '100%',
         color: 'inherit',
+        ...(!isNavLeft
+          ? {
+              paddingLeft: 'var(--main-view-padding)',
+              paddingRight: 'var(--padding-side)',
+            }
+          : {}),
       }}
       href="/"
       onContextMenu={!navLogo ? undefined : onContextMenu}
@@ -571,7 +567,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 (
@@ -616,20 +611,12 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
         toggleMenuModal(menuId)
       }}
       onMouseEnter={() => {
-        if (onMouseIgnore) return
-        if (isMobileNav()) return
-        openMenuModal(menuId)
+        openMenuModalOnMouseEnter(menuId)
       }}
       onMouseLeave={() => {
-        if (onMouseIgnore) return
-        if (isMobileNav()) return
-        coseMenuModalOnMouseLeave(menuId)
-      }}
-      onTouchStart={() => {
-        onMouseIgnore = setTimeout(() => {
-          onMouseIgnore = undefined
-        }, 1000)
+        closeMenuModalOnMouseLeaveToggle(menuId)
       }}
+      onTouchStart={ignoreHoverOnTouchStart}
     >
       <Style>{getAnimation()}</Style>
       {props.children}
@@ -737,7 +724,3 @@ function MenuIcon() {
     </svg>
   )
 }
-
-function isMobileNav() {
-  return window.innerWidth <= viewTablet
-}

package/MenuModal/toggleMenuModal.ts

@@ -1,8 +1,11 @@
 export { toggleMenuModal }
-export { openMenuModal }
-export { keepMenuModalOpen }
 export { closeMenuModal }
-export { coseMenuModalOnMouseLeave }
+// Hover handling
+export { ignoreHoverOnTouchStart }
+export { openMenuModalOnMouseEnter }
+export { keepMenuModalOpenOnMouseOver }
+export { closeMenuModalOnMouseLeave }
+export { closeMenuModalOnMouseLeaveToggle }
 
 import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
@@ -11,9 +14,6 @@ import { isBrowser } from '../utils/isBrowser'
 
 initScrollListener()
 
-function keepMenuModalOpen() {
-  open()
-}
 function openMenuModal(menuNavigationId: number) {
   open(menuNavigationId)
 }
@@ -72,7 +72,8 @@ let toggleLock:
       timeoutAction: NodeJS.Timeout
     }
   | undefined
-function coseMenuModalOnMouseLeave(menuId: number) {
+function closeMenuModalOnMouseLeaveToggle(menuId: number) {
+  if (ignoreHover()) return
   clearTimeout(toggleLock?.timeoutAction)
   const timeoutAction = setTimeout(action, 100)
   toggleLock = {
@@ -111,7 +112,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < viewTablet) autoScroll()
+    if (isMobileNav()) autoScroll()
   }
 }
 
@@ -137,3 +138,29 @@ function findCollapsibleEl(navLink: HTMLElement | undefined) {
   }
   return null
 }
+
+function closeMenuModalOnMouseLeave() {
+  if (ignoreHover()) return
+  closeMenuModal()
+}
+function keepMenuModalOpenOnMouseOver() {
+  if (ignoreHover()) return
+  open()
+}
+
+let isTouchStart: ReturnType<typeof setTimeout> | undefined
+function ignoreHoverOnTouchStart() {
+  isTouchStart = setTimeout(() => {
+    isTouchStart = undefined
+  }, 1000)
+}
+function openMenuModalOnMouseEnter(menuId: number) {
+  if (ignoreHover()) return
+  openMenuModal(menuId)
+}
+function ignoreHover() {
+  return isTouchStart || isMobileNav()
+}
+function isMobileNav() {
+  return getViewportWidth() <= viewTablet
+}

package/MenuModal.tsx

@@ -7,7 +7,7 @@ import { viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
-import { closeMenuModal, keepMenuModalOpen } from './MenuModal/toggleMenuModal'
+import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
 import { EditLink } from './EditLink'
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
@@ -27,8 +27,8 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
         }}
-        onMouseOver={() => keepMenuModalOpen()}
-        onMouseLeave={closeMenuModal}
+        onMouseOver={keepMenuModalOpenOnMouseOver}
+        onMouseLeave={closeMenuModalOnMouseLeave}
       >
         <div
           id="menu-modal-scroll-container"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-9b3f898",
+  "version": "0.15.13-commit-39924f0",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/utils/getViewportWidth.ts

@@ -1,4 +1,4 @@
 export function getViewportWidth(): number {
-  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  return document.documentElement.clientWidth
+  // Width without scrollbar
+  return document.documentElement.scrollWidth
 }