react-code-view/docs/components/Sidebar.tsx at 78e6223f805159ecf8549b30628aa02e5cf48399 · simonguo/react-code-view · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React from 'react';
import { Link, useLocation } from 'react-router-dom';

export const Sidebar: React.FC = () => {
  const location = useLocation();

  const handleLinkClick = () => {
    window.scrollTo(0, 0);
  };

  const sections = [
    {
      title: 'Getting Started',
      items: [
        { path: '/', label: 'Overview' },
        { path: '/quick-start', label: 'Quick Start' },
      ]
    },
    {
      title: 'Components',
      items: [
        { path: '/components/code-view', label: 'CodeView' },
        { path: '/components/code-editor', label: 'CodeEditor' },
        { path: '/components/renderer', label: 'Renderer' },
        { path: '/components/markdown-renderer', label: 'MarkdownRenderer' },
        { path: '/components/use-code-execution', label: 'useCodeExecution (hook)' },
      ]
    },
    {
      title: 'Build Tools',
      items: [
        { path: '/build-tools/vite', label: 'Vite' },
        { path: '/build-tools/webpack', label: 'Webpack' },
        { path: '/build-tools/rollup', label: 'Rollup' },
        { path: '/build-tools/esbuild', label: 'esbuild' },
      ]
    },
    {
      title: 'Examples',
      items: [
        { path: '/examples/counter', label: 'Counter' },
        { path: '/examples/todo', label: 'Todo List' },
        { path: '/examples/typescript', label: 'TypeScript' },
        { path: '/examples/theme', label: 'Theme Switcher' },
        { path: '/examples/components', label: 'Custom Components' },
        { path: '/examples/markdown', label: 'Markdown with Code' },
        { path: '/examples/use-code-execution', label: 'useCodeExecution' },
      ]
    }
  ];

  return (
    <aside className="docs-sidebar">
      <div className="sidebar-content">
        {sections.map(section => (
          <div key={section.title} className="sidebar-section">
            <h3 className="sidebar-title">{section.title}</h3>
            <ul className="sidebar-list">
              {section.items.map(item => (
                <li key={item.path}>
                  <Link
                    to={item.path}
                    onClick={handleLinkClick}
                    className={`sidebar-link ${location.pathname === item.path ? 'active' : ''}`}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </aside>
  );
};