fix import and always show navigation

patnir · patnir · commit ee7b5856c03f · 2025-11-17T09:25:14.000-08:00
diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
@@ -8,16 +8,14 @@ import { readFileSync } from 'fs';
 import { join } from 'path';
 import Head from 'next/head';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 interface DocsPageProps {
   content: string;
   headings: Array<{ id: string; text: string; level: number }>;
 }
 
 export default function DocsPage({ content, headings }: DocsPageProps) {
-  const [showToc, setShowToc] = useState(false);
-
   return (
     <>
       <Head>
@@ -62,22 +60,6 @@ export default function DocsPage({ content, headings }: DocsPageProps) {
             }}>
               ← Back
             </a>
-            <button
-              onClick={() => setShowToc(!showToc)}
-              style={{
-                padding: '0.5rem 1rem',
-                background: showToc ? '#0052FF' : 'white',
-                color: showToc ? 'white' : '#0052FF',
-                border: '1px solid #0052FF',
-                borderRadius: '8px',
-                cursor: 'pointer',
-                fontSize: '0.875rem',
-                fontWeight: '600',
-                transition: 'all 0.2s ease'
-              }}
-            >
-              {showToc ? 'Hide' : 'Show'} Navigation
-            </button>
           </div>
         </div>
 
@@ -89,8 +71,7 @@ export default function DocsPage({ content, headings }: DocsPageProps) {
           gap: '2rem'
         }}>
           {/* Table of Contents */}
-          {showToc && (
-            <aside style={{
+          <aside style={{
               width: '250px',
               flexShrink: 0,
               position: 'sticky',
@@ -142,7 +123,6 @@ export default function DocsPage({ content, headings }: DocsPageProps) {
                 ))}
               </nav>
             </aside>
-          )}
 
           {/* Main Content */}
           <main style={{
@@ -261,7 +241,7 @@ export default function DocsPage({ content, headings }: DocsPageProps) {
                   
                   return !isInline && match ? (
                     <SyntaxHighlighter
-                      style={oneDark}
+                      style={vscDarkPlus}
                       language={match[1]}
                       PreTag="div"
                       customStyle={{
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -946,6 +946,27 @@ export default function Home({ initialUsers, error }: Props) {
               {showDebugButtons ? 'Hide' : 'Show'} Debug Buttons
             </button>
             <span style={{ color: '#d1d5db', fontSize: '0.8rem' }}>•</span>
+            <button
+              onClick={() => router.push('/docs')}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: '#9ca3af',
+                fontSize: '0.75rem',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                padding: 0
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = '#1a1a1a';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = '#9ca3af';
+              }}
+            >
+              Base Verify Docs
+            </button>
+            <span style={{ color: '#d1d5db', fontSize: '0.8rem' }}>•</span>
             <button
               onClick={() => router.push('/coinbase')}
               style={{
