@brillout/docpress 0.15.13-commit-03246ec → 0.15.13-commit-f8fc961

package/Layout.tsx

@@ -26,7 +26,6 @@ import { Style } from './utils/Style'
 import { cls } from './utils/cls'
 import { iconBooks } from './icons'
 import { EditLink } from './EditLink'
-import type { PageContext } from 'vike/types'
 
 const blockMargin = 3
 const mainViewPadding = 20
@@ -89,12 +88,16 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
   return (
     <>
       <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(--bg-color)' }}
+            />
+          </>
+        )}
         <PageContent>{children}</PageContent>
       </div>
       <Style>{css`
@@ -181,7 +184,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          {!isNavLeftAlwaysHidden(pageContext) && <NavHead isNavLeft={true} />}
+          <NavHead isNavLeft={true} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -234,7 +237,8 @@ function NavigationContent(props: {
   )
 }
 
-function isNavLeftAlwaysHidden(pageContext: PageContext) {
+function isNavLeftAlwaysHidden() {
+  const pageContext = usePageContext()
   const { isLandingPage, navItemsDetached, pageDesign } = pageContext.resolved
   return isLandingPage || pageDesign?.hideMenuLeft || (navItemsDetached && navItemsDetached.length <= 1)
 }
@@ -276,8 +280,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>
@@ -317,7 +321,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} />
@@ -328,18 +332,12 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   )
 }
 function getStyleNav() {
-  const pageContext = usePageContext()
-
   let style = ''
 
   // Mobile
   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;
@@ -371,9 +369,6 @@ function getStyleNav() {
       --icon-text-padding: 8px;
       --padding-side: 20px;
     }
-    .nav-head-logo {
-      padding: 0 var(--padding-side);
-    }
   }
 }`
 
@@ -383,10 +378,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 {
@@ -402,7 +394,7 @@ function getStyleNav() {
 `
 
   // Desktop
-  if (!isNavLeftAlwaysHidden(pageContext)) {
+  if (!isNavLeftAlwaysHidden()) {
     style += css`
 @container container-viewport (min-width: ${viewDesktop}px) {
   .nav-head:not(.is-nav-left) {
@@ -421,10 +413,6 @@ function getStyleNav() {
         flex-grow: 1;
       }
     }
-    .nav-head-logo {
-      padding-left: 15px;
-      margin-left: -15px;
-    }
   }
   .show-on-nav-hover {
     opacity: 0;
@@ -448,22 +436,29 @@ function getStyleNav() {
   body {
     --main-view-padding: 10px !important;
   }
-  .page-wrapper {
-    flex-grow: 1;
-    align-items: center;
-  }
-  .page-content {
-    margin: auto;
-  }
-  #menu-modal-wrapper {
-    position: absolute !important;
-  }
+  ${getStyleNavLeftHidden()}
 }
 `
+  } else {
+    style += getStyleNavLeftHidden()
   }
 
   return style
 }
+function getStyleNavLeftHidden() {
+  return css`
+.page-wrapper {
+  flex-grow: 1;
+  align-items: center;
+}
+.page-content {
+  margin: auto;
+}
+#menu-modal-wrapper {
+  position: absolute !important;
+}
+`
+}
 
 function unexpandNav() {
   document.documentElement.classList.add('unexpand-nav')
@@ -503,7 +498,7 @@ function NavHeadLeftFullWidthBackground() {
   )
 }
 
-function NavHeadLogo({ className }: { className?: string }) {
+function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
 
   const { navLogo } = pageContext.globalContext.config.docpress
@@ -537,12 +532,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}

package/installSectionUrlHashs.ts

@@ -28,7 +28,9 @@ function installSectionUrlHashs() {
 }
 
 function assertNavLink(urlHash: string, heading: HTMLHeadingElement) {
-  const navigationEl = document.querySelector('#nav-left .navigation-content')!
+  const navigationContainerEl = document.querySelector('#nav-left')
+  if (!navigationContainerEl) return
+  const navigationEl = navigationContainerEl.querySelector('.navigation-content')!
   {
     const { pathname } = window.location
     const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${pathname}"]`))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-03246ec",
+  "version": "0.15.13-commit-f8fc961",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",