@brillout/docpress 0.8.13 → 0.8.15

package/Layout.tsx

@@ -1,35 +1,38 @@
 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 { toggleMenuModal } from './MenuModal'
+import { NavSecondaryContent } from './NavSecondaryContent'
+import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { SearchLink } from './docsearch/SearchLink'
 import { navigate } from 'vike/client/router'
 import { css } from './utils/css'
 import { PassThrough } from './utils/PassTrough'
+import { Style } from './utils/Style'
+import { cls } from './utils/cls'
 
-const mainViewWidthMax = 800
-const mainViewPadding = 20
-const navWidthMax = 370
-const navWidthMin = 300
-const navWidth = {
-  minWidth: navWidthMin,
-  maxWidth: navWidthMax,
-  width: '100%',
-}
 const blockMargin = 3
+const mainViewPadding = 20
+const mainViewWidthMax = 800
+const navLeftWidthMax = 370
+const navLeftWidthMin = 300
+// 840 = 800 + 20 * 2
 const mainViewMax = mainViewWidthMax + mainViewPadding * 2
-const containerQuerySpacing = mainViewMax + navWidthMax + blockMargin
-const containerQueryMobile = mainViewMax + navWidthMin
+const containerQueryMobileMenu = 1000
+// 1143 = 840 + 300
+const containerQueryMobileLayout = mainViewMax + navLeftWidthMin
+// 1213 = 840 + 370 + 3
+const containerQueryExtraSpace = mainViewMax + navLeftWidthMax + blockMargin
 
 // Avoid whitespace at the bottom of pages with almost no content
 const whitespaceBuster1: React.CSSProperties = {
@@ -58,18 +61,20 @@ function Layout({ children }: { children: React.ReactNode }) {
         ['--bg-color']: '#f5f5f7',
         ['--block-margin']: `${blockMargin}px`,
         ['--icon-text-padding']: '8px',
+        ['--nav-head-height']: `${isLandingPage ? 70 : 60}px`,
       }}
     >
-      <MenuModal />
+      <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
-          containerType: 'inline-size',
+          container: 'container-viewport / inline-size',
           ...whitespaceBuster1,
         }}
       >
+        <NavHead />
         {content}
       </div>
     </div>
@@ -78,11 +83,10 @@ function Layout({ children }: { children: React.ReactNode }) {
 
 function LayoutDocsPage({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
-  const hideNavLeftAlways = pageContext.navItems.length <= 1
+  const hideNavLeftAlways = pageContext.navItemsDetached && pageContext.navItemsDetached.length <= 1
   return (
     <>
       <style>{getStyle()}</style>
-      <NavMobile />
       <div style={{ display: 'flex', ...whitespaceBuster2 }}>
         <NavLeft />
         <div className="low-prio-grow" style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }} />
@@ -92,12 +96,12 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
   )
   function getStyle() {
     let style = css`
-@container(min-width: ${containerQuerySpacing}px) {
+@container container-viewport (min-width: ${containerQueryExtraSpace}px) {
   .low-prio-grow {
     flex-grow: 1;
   }
   #navigation-container {
-    width: ${navWidthMax}px !important;
+    width: ${navLeftWidthMax}px !important;
   }
 }`
     let navLeftHide = css`
@@ -112,14 +116,17 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
 .page-content {
   margin: auto;
 }
+#menu-modal {
+  position: absolute !important;
+}
 `
     if (!hideNavLeftAlways) {
       navLeftHide = css`
-@container(max-width: ${containerQueryMobile - 1}px) {
+@container container-viewport (max-width: ${containerQueryMobileLayout - 1}px) {
   ${navLeftHide}
 }
-@container(min-width: ${containerQueryMobile}px) {
-  #nav-mobile {
+@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
+  .nav-head-top {
     display: none !important;
   }
 }
@@ -132,28 +139,11 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
 }
 
 function LayoutLandingPage({ children }: { children: React.ReactNode }) {
-  const mobile = 800
   return (
     <>
-      <style>{getStyle()}</style>
-      <NavTop />
-      <NavMobile />
       <PageContent>{children}</PageContent>
     </>
   )
-  function getStyle() {
-    return css`
-@container(min-width: ${mobile}px) {
-  #nav-mobile {
-    display: none !important;
-  }
-}
-@container(max-width: ${mobile - 1}px) {
-  #top-navigation {
-    display: none !important;
-  }
-`
-  }
 }
 
 function PageContent({ children }: { children: React.ReactNode }) {
@@ -195,50 +185,9 @@ function PageContent({ children }: { children: React.ReactNode }) {
   )
 }
 
-function NavMobile() {
-  return (
-    <div id="nav-mobile">
-      <NavigationHeader headerHeight={70} iconSize={40} paddingLeft={12} style={{ justifyContent: 'center' }} />
-    </div>
-  )
-}
-
-function NavTop() {
-  const pageContext2 = usePageContext2()
-  const paddingSize = 35
-  const padding = `0 ${paddingSize}px`
-  const TopNavigation = pageContext2.config.TopNavigation || PassThrough
-  return (
-    <div
-      id="top-navigation"
-      className="link-hover-animation"
-      style={{
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textDecoration: 'none',
-        marginBottom: 'var(--block-margin)',
-        backgroundColor: 'var(--bg-color)',
-        ['--padding-side']: `${paddingSize}px`,
-        fontSize: '1.06em',
-        color: '#666',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', height: 70 }}>
-        <TopNavigation />
-        <SearchLink style={{ padding }} />
-        <MenuLink style={{ padding }} />
-        <Links style={{ display: 'inline-flex', padding, marginLeft: -8 }} />
-      </div>
-    </div>
-  )
-}
-
 function NavLeft() {
   const pageContext = usePageContext()
-  const { navItems, navItemsAll, isDetachedPage } = pageContext
-  const headerHeight = 60
+  const { navItemsAll, navItemsDetached } = pageContext
   return (
     <>
       <div
@@ -247,6 +196,7 @@ function NavLeft() {
         style={{
           flexGrow: 1,
           borderRight: 'var(--block-margin) solid white',
+          zIndex: 1,
         }}
       >
         <div
@@ -255,7 +205,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          <NavigationHeader headerHeight={headerHeight} iconSize={39} paddingLeft={6} />
+          <NavHead isNavLeft={true} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -267,21 +217,20 @@ function NavLeft() {
               id="navigation-container"
               style={{
                 top: 0,
-                height: `calc(100vh - ${headerHeight}px - var(--block-margin))`,
+                height: `calc(100vh - var(--nav-head-height) - var(--block-margin))`,
                 overflowY: 'auto',
                 overscrollBehavior: 'contain',
                 paddingBottom: 40,
-                ...navWidth,
+                minWidth: navLeftWidthMin,
+                maxWidth: navLeftWidthMax,
+                width: '100%',
               }}
             >
-              {
-                // TODO/refactor: simplify?
-                isDetachedPage ? (
-                  <NavigationContent navItems={navItems} />
-                ) : (
-                  <NavigationContent navItems={navItemsAll} showOnlyRelevant={true} />
-                )
-              }
+              {navItemsDetached ? (
+                <NavigationContent navItems={navItemsDetached} />
+              ) : (
+                <NavigationContent navItems={navItemsAll} showOnlyRelevant={true} />
+              )}
             </div>
           </div>
         </div>
@@ -292,125 +241,284 @@ function NavLeft() {
   )
 }
 
-function NavigationHeader({
-  headerHeight,
-  iconSize,
-  style,
-  paddingLeft,
-}: { headerHeight: number; iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
+function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
-  //*
+  const pageContext2 = usePageContext2()
   const { projectName } = pageContext.meta
-  /*/
-  const projectName = 'Vike'
-  //*/
-  const isProjectNameShort = projectName.length <= 4
-  const childrenStyle: React.CSSProperties = {
+  const { isLandingPage } = pageContext
+
+  const linkStyle: React.CSSProperties = {
+    height: '100%',
+    padding: '0 var(--padding-side)',
     justifyContent: 'center',
-    fontSize: isProjectNameShort ? '4.8cqw' : '4.5cqw',
-    ['--icon-text-padding']: '1.8cqw',
   }
-  const marginLeft = -10
+
+  const TopNavigation = pageContext2.config.TopNavigation || PassThrough
+  const navSecondaryContent = (
+    <div
+      className={isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink'}
+      style={{
+        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
+            }),
+      }}
+    >
+      <TopNavigation />
+      <NavSecondaryContent
+        style={{
+          display: 'inline-flex',
+          fontSize: '1.06em',
+          padding: '0 var(--padding-side)',
+          marginLeft: -8,
+        }}
+      />
+    </div>
+  )
+
   return (
     <div
+      className={cls(['nav-head-full-width', !isNavLeft && 'nav-head-top', 'link-hover-animation'])}
       style={{
-        backgroundColor: 'var(--bg-color)',
         display: 'flex',
-        justifyContent: 'flex-end',
+        justifyContent: isNavLeft ? 'flex-end' : 'center',
+        backgroundColor: 'var(--bg-color)',
         borderBottom: 'var(--block-margin) solid white',
-        ...style,
+        position: 'relative',
       }}
     >
+      {isNavLeft && <NavHeaderLeftFullWidthBackground />}
       <div
         style={{
-          display: 'flex',
-          height: headerHeight,
-          containerType: 'inline-size',
-          ...navWidth,
+          container: 'container-nav-head / inline-size',
+          width: '100%',
+          minWidth: isNavLeft && navLeftWidthMin,
+          maxWidth: isNavLeft && navLeftWidthMax,
         }}
       >
-        <a
+        <div
+          className="nav-head-content"
           style={{
+            width: '100%',
+            height: 'var(--nav-head-height)',
+            fontSize: `min(16.96px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
+            color: '#666',
+            ['--icon-text-padding']: 'min(8px, 1.8cqw)',
             display: 'flex',
-            alignItems: 'center',
-            color: 'inherit',
-            textDecoration: 'none',
-            height: '100%',
-            paddingLeft: paddingLeft + marginLeft * -1,
-            marginLeft: marginLeft,
-            ...childrenStyle,
-            justifyContent: 'flex-start',
-            flexGrow: 0.5,
+            justifyContent: 'center',
           }}
-          href="/"
         >
-          <img
-            src={pageContext.meta.faviconUrl}
-            height={iconSize}
-            width={iconSize}
-            onContextMenu={(ev) => {
-              if (!pageContext.config.pressKit) return // no /press page
-              if (window.location.pathname === '/press') return
-              ev.preventDefault()
-              navigate('/press#logo')
-            }}
-          />
-          <span
-            style={{
-              marginLeft: `calc(var(--icon-text-padding) + 2px)`,
-              fontSize: isProjectNameShort ? '1.65em' : '1.3em',
-            }}
-          >
-            {projectName}
-          </span>
-        </a>
-        <SearchLink
-          style={{
-            //
-            ...childrenStyle,
-            flexGrow: 0.5,
-          }}
-        />
-        <MenuLink
-          style={{
-            //
-            ...childrenStyle,
-            flexGrow: 1,
-          }}
-        />
+          <NavLogo className="grow-half" />
+          <SearchLink className="grow-half" style={linkStyle} />
+          <MenuLink className="grow-full" style={linkStyle} />
+          {navSecondaryContent}
+        </div>
       </div>
+      {getStyle()}
     </div>
   )
+
+  function getStyle() {
+    let style = css`
+@container container-nav-head (max-width: 550px) {
+  .grow-full {
+    flex-grow: 1;
+  }
+  .grow-half {
+    flex-grow: 0.5;
+  }
+  .nav-head-content {
+    --padding-side: 0px;
+  }
+  .nav-logo {
+    padding-left: 15px;
+    margin-left: -10px;
+  }
+}
+@container container-nav-head (min-width: 501px) {
+  .nav-head-content {
+    --padding-side: 35px;
+  }
+  .nav-logo {
+    padding: 0 var(--padding-side);
+  }
+}
+@media(max-width: ${containerQueryMobileMenu}px) {
+  .hide-on-shrink {
+    display: none !important;
+  }
+}
+`
+    if (isLandingPage)
+      style += css`
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+  .nav-logo {
+    display: none !important;
+  }
+}
+`
+    if (isNavLeft) {
+      style += css`
+
+.show-on-nav-hover {
+  opacity: 0;
+  transition-property: opacity;
+  pointer-events: none;
+}
+html:not(.unexpand-nav) :has(.nav-head-full-width: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;
+}
+`
+    }
+    return <Style>{style}</Style>
+  }
+}
+function unexpandNav() {
+  document.documentElement.classList.add('unexpand-nav')
+  // Using setTimeout() because requestAnimationFrame() doesn't delay enough
+  setTimeout(() => {
+    document.documentElement.classList.remove('unexpand-nav')
+  }, 1000)
+}
+
+function NavHeaderLeftFullWidthBackground() {
+  return (
+    <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',
+      }}
+    />
+  )
 }
 
-type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
-function MenuLink(props: PropsAnchor) {
+function NavLogo({ className }: { className: string }) {
+  const pageContext = usePageContext()
+  const iconSize = 39
+  const { projectName } = pageContext.meta
   return (
     <a
+      className={cls(['nav-logo', className])}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        color: 'inherit',
+        height: '100%',
+        justifyContent: 'flex-start',
+      }}
+      href="/"
+    >
+      <img
+        src={pageContext.meta.faviconUrl}
+        height={iconSize}
+        width={iconSize}
+        onContextMenu={(ev) => {
+          if (!pageContext.config.pressKit) return // no /press page
+          if (window.location.pathname === '/press') return
+          ev.preventDefault()
+          navigate('/press#logo')
+        }}
+      />
+      <span
+        style={{
+          marginLeft: `calc(var(--icon-text-padding) + 2px)`,
+          fontSize: isProjectNameShort(projectName) ? '1.65em' : '1.3em',
+        }}
+      >
+        {projectName}
+      </span>
+    </a>
+  )
+}
+function isProjectNameShort(projectName: string) {
+  return projectName.length <= 4
+}
+
+let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
+type PropsDiv = React.HTMLProps<HTMLDivElement>
+function MenuLink(props: PropsDiv) {
+  return (
+    <div
       {...props}
       style={{
         height: '100%',
         display: 'flex',
         alignItems: 'center',
-        cursor: 'pointer',
+        cursor: 'default',
+        userSelect: 'none',
         ...props.style,
       }}
-      className="colorize-on-hover"
+      className={['colorize-on-hover menu-toggle', props.className].filter(Boolean).join(' ')}
       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>
+      <span className="text-docs">
+        <DocsIcon /> Docs
+      </span>
+      <span className="text-menu">
+        <MenuIcon /> Menu
+      </span>
+      <Style>{css`
+@media(max-width: ${containerQueryMobileMenu}px) {
+  .text-docs {
+    display: none;
+  }
+}
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+  .text-menu {
+    display: none;
+  }
+}
+`}</Style>
+    </div>
+  )
+}
+function DocsIcon() {
+  return (
+    <span style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }} className="decolorize-6">
+      📚
+    </span>
   )
 }
 function MenuIcon() {
   return (
     <svg
-      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
+      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', width: '1.3em' }}
       className="decolorize-6"
       viewBox="0 0 448 512"
     >