website: update docpress

docs/package.json

@@ -6,7 +6,7 @@
     "typecheck": "tsc --noEmit --watch"
   },
   "dependencies": {
-    "@brillout/docpress": "^0.9.8",
+    "@brillout/docpress": "^0.10.1",
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

docs/pages/+TopNavigation.tsx

@@ -1,29 +1,40 @@
 export { TopNavigation }
 
+import { iconGear, iconSeedling, MenuToggle } from '@brillout/docpress'
 import React from 'react'
 
 function TopNavigation() {
   return (
-    <a
-      className="colorize-on-hover"
-      href="/new"
-      style={{
-        color: 'inherit',
-        height: '100%',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        padding: '0 var(--padding-side)'
-      }}
-    >
-      <span
-        className="decolorize-7 desktop-fade"
-        style={{ height: 23, marginRight: 8, fontFamily: 'emoji', position: 'relative', top: -2 }}
+    <>
+      <MenuToggle menuId={1}>
+        <img
+          src={iconGear}
+          width={21}
+          style={{ marginRight: 'calc(var(--icon-text-padding))' }}
+          className="decolorize-8 desktop-fade"
+        />{' '}
+        API
+      </MenuToggle>
+      <a
+        className="colorize-on-hover"
+        href="/new"
+        style={{
+          color: 'inherit',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer',
+          padding: '0 var(--padding-side)'
+        }}
       >
-        🌱
-      </span>{' '}
-      Get Started
-    </a>
+        <img
+          src={iconSeedling}
+          width={21}
+          style={{ marginRight: 'calc(var(--icon-text-padding) - 1px)', position: 'relative', top: -1 }}
+          className="decolorize-8 desktop-fade"
+        />
+        Get Started
+      </a>
+    </>
   )
 }