feat: initialize React Spectrum template with layouts and showcases

1 files changed, 35 insertions, 0 deletions

diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
new file mode 100644
index 0000000..604c002
--- /dev/null
+++ b/src/components/sidebar-menu.tsx
@@ -0,0 +1,35 @@
+import iconStyles from './menu-icon.module.css'
+import { useMatches } from 'react-router'
+import { SideNav, SideNavItem, SideNavItemContent, SideNavItemLink, Text } from '@react-spectrum/s2/SideNav'
+import { defaultExpandedKeys, menuItems, type NavigationItem, type PageMetadata } from '../route-config'
+
+function renderItem(item: NavigationItem, level = 0) {
+  const Icon = item.Icon
+  const content = (
+    <>
+      {Icon && <Icon UNSAFE_className={level === 0 ? iconStyles.icon : undefined} />}
+      <Text>{item.title}</Text>
+    </>
+  )
+
+  return (
+    <SideNavItem key={item.id} id={item.id} href={item.path} textValue={item.title}>
+      <SideNavItemContent>
+        {item.path ? <SideNavItemLink>{content}</SideNavItemLink> : content}
+      </SideNavItemContent>
+      {item.children?.map((child) => renderItem(child, level + 1))}
+    </SideNavItem>
+  )
+}
+
+function SidebarMenu() {
+  const currentPage = useMatches().at(-1)?.handle as PageMetadata | undefined
+
+  return (
+    <SideNav aria-label="Pages" selectedRoute={currentPage?.path ?? null} defaultExpandedKeys={defaultExpandedKeys}>
+      {menuItems.map((item) => renderItem(item))}
+    </SideNav>
+  )
+}
+
+export default SidebarMenu