funstack-static/packages/docs/src/components/Sidebar/Sidebar.tsx at 39454143675c1cdd02c19027a87dcd5c8b0dcc93 · uhyo/funstack-static · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import styles from "./Sidebar.module.css";

export interface NavItem {
  label: string;
  href: string;
}

export interface NavSection {
  title: string;
  items: NavItem[];
}

export const navigation: NavSection[] = [
  {
    title: "Getting Started",
    items: [
      { label: "Introduction", href: "/getting-started" },
      {
        label: "Migrating from Vite SPA",
        href: "/getting-started/migrating-from-vite-spa",
      },
    ],
  },
  {
    title: "Learn",
    items: [
      {
        label: "React Server Components",
        href: "/learn/rsc",
      },
      {
        label: "How It Works",
        href: "/learn/how-it-works",
      },
      {
        label: "Optimizing RSC Payloads",
        href: "/learn/optimizing-payloads",
      },
      {
        label: "Using lazy() in Server",
        href: "/learn/lazy-server-components",
      },
      {
        label: "Prefetching with Activity",
        href: "/learn/defer-and-activity",
      },
      {
        label: "File-System Routing",
        href: "/learn/file-system-routing",
      },
    ],
  },
  {
    title: "Advanced",
    items: [
      {
        label: "Multiple Entrypoints (SSG)",
        href: "/advanced/multiple-entrypoints",
      },
      {
        label: "Server-Side Rendering",
        href: "/advanced/ssr",
      },
    ],
  },
  {
    title: "API Reference",
    items: [
      {
        label: "funstackStatic()",
        href: "/api/funstack-static",
      },
      { label: "defer()", href: "/api/defer" },
      {
        label: "EntryDefinition",
        href: "/api/entry-definition",
      },
    ],
  },
  {
    title: "Help",
    items: [{ label: "FAQ", href: "/faq" }],
  },
];

export const Sidebar: React.FC = () => {
  return (
    <aside className={styles.sidebar}>
      {navigation.map((section) => (
        <div key={section.title} className={styles.section}>
          <h3 className={styles.sectionTitle}>{section.title}</h3>
          <nav className={styles.navList}>
            {section.items.map((item) => (
              <a key={item.href} href={item.href} className={styles.navItem}>
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      ))}
    </aside>
  );
};