feat: WIP custom header nav

components/NotionPage.tsx

@@ -31,6 +31,7 @@ import { PageHead } from './PageHead'
 import { PageActions } from './PageActions'
 import { Footer } from './Footer'
 import { PageSocial } from './PageSocial'
+import { NotionPageHeader } from './NotionPageHeader'
 import { GitHubShareButton } from './GitHubShareButton'
 
 import styles from './styles.module.css'
@@ -181,7 +182,8 @@ export const NotionPage: React.FC<types.PageProps> = ({
           Equation,
           Pdf,
           Modal,
-          Tweet
+          Tweet,
+          Header: NotionPageHeader
         }}
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}

components/NotionPageHeader.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+// import useDarkMode from '@fisch0920/use-dark-mode'
+
+import { Header, Breadcrumbs, Search } from 'react-notion-x'
+
+import * as types from 'lib/types'
+import { navigationStyle } from 'lib/config'
+
+// import styles from './styles.module.css'
+
+export const NotionPageHeader: React.FC<{
+  block: types.CollectionViewPageBlock | types.PageBlock
+}> = ({ block }) => {
+  if (navigationStyle === 'default') {
+    return <Header block={block} />
+  }
+
+  return (
+    <header className='notion-header'>
+      <div className='notion-nav-header'>
+        <Breadcrumbs block={block} rootOnly={true} />
+        <Search block={block} />
+      </div>
+    </header>
+  )
+}