small refactor

brillout · Oct 30, 2024 · 8735857 · 8735857
1 parent 2e41d8b
commit 8735857
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 51 deletions.
diff --git a/src/MenuModal.tsx b/src/MenuModal.tsx
@@ -9,6 +9,7 @@ import { css } from './utils/css'
 import { containerQueryMobile } from './Layout'
 import { Links } from './Links'
 import { isBrowser } from './utils/isBrowser'
+import { getViewportWidth } from './utils/getViewportWidth'
 
 initCloseListeners()
 
@@ -129,10 +130,6 @@ function toggleMenuModal() {
     autoScroll()
   }
 }
-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
-}
 function autoScroll() {
   const nav = document.querySelector('#menu-modal .navigation-content')!
   const href = window.location.pathname

diff --git a/src/navigation/Navigation.tsx b/src/navigation/Navigation.tsx
@@ -4,13 +4,14 @@ export { NavigationContent }
 export type { NavItem }
 export type { NavItemAll }
 
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { assert, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { parseTitle } from '../parseTitle'
 import { usePageContext } from '../renderer/usePageContext'
 import '@docsearch/css'
 import '../global.d.ts'
+import { getViewportWidth } from '../utils/getViewportWidth'
 
 type NavItem = {
   level: number
@@ -38,52 +39,7 @@ function NavigationContent(props: {
       .map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
   } else {
     assert(!props.showOnlyRelevant)
-    const navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed)
-    const paddingBottom = 40
-    navContent = (
-      <>
-        {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
-          <div
-            key={i}
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
-            <div
-              className={`column-layout-${i}`}
-              style={{
-                flexGrow: 1,
-                columnGap: 20,
-                paddingBottom: isFullWidth ? paddingBottom : undefined,
-              }}
-            >
-              {navItemsColumnEntries.map((navItemColumnEntry, j) => (
-                <div
-                  key={j}
-                  className="column-layout-entry"
-                  style={{
-                    breakInside: 'avoid',
-                    paddingBottom: !isFullWidth ? paddingBottom : undefined,
-                    paddingTop: isFullWidth ? undefined : 0,
-                    width: '100%',
-                  }}
-                >
-                  <div>
-                    <NavItemComponent navItem={navItemColumnEntry} />
-                    {navItemColumnEntry.navItemChilds.map((navItem, k) => (
-                      <NavItemComponent navItem={navItem} key={k} />
-                    ))}
-                    <CategoryBorder navItemLevel1={isFullWidth ? undefined : navItemColumnEntry!} />
-                  </div>
-                </div>
-              ))}
-              <CategoryBorder navItemLevel1={!isFullWidth ? undefined : navItemsColumnEntries[0]!} />
-            </div>
-          </div>
-        ))}
-      </>
-    )
+    navContent = <NavigationColumnLayout navItemsWithComputed={navItemsWithComputed} />
   }
 
   return (
@@ -92,6 +48,57 @@ function NavigationContent(props: {
     </div>
   )
 }
+
+function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[] }) {
+  const navItemsColumnLayout = groupByColumnLayout(props.navItemsWithComputed)
+  const paddingBottom = 40
+
+  return (
+    <>
+      {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            className={`column-layout-${i}`}
+            style={{
+              flexGrow: 1,
+              columnGap: 20,
+              paddingBottom: isFullWidth ? paddingBottom : undefined,
+            }}
+          >
+            {navItemsColumnEntries.map((navItemColumnEntry, j) => (
+              <div
+                key={j}
+                className="column-layout-entry"
+                style={{
+                  breakInside: 'avoid',
+                  paddingBottom: !isFullWidth ? paddingBottom : undefined,
+                  paddingTop: isFullWidth ? undefined : 0,
+                  width: '100%',
+                }}
+              >
+                <div>
+                  <NavItemComponent navItem={navItemColumnEntry} />
+                  {navItemColumnEntry.navItemChilds.map((navItem, k) => (
+                    <NavItemComponent navItem={navItem} key={k} />
+                  ))}
+                  <CategoryBorder navItemLevel1={isFullWidth ? undefined : navItemColumnEntry!} />
+                </div>
+              </div>
+            ))}
+            <CategoryBorder navItemLevel1={!isFullWidth ? undefined : navItemsColumnEntries[0]!} />
+          </div>
+        </div>
+      ))}
+    </>
+  )
+}
+
 function CategoryBorder({ navItemLevel1 }: { navItemLevel1?: NavItemComputed }) {
   return !navItemLevel1 ? null : (
     <div

diff --git a/src/utils/getViewportWidth.ts b/src/utils/getViewportWidth.ts
@@ -0,0 +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
+}