🎉 创世提交

src/components/Sidebar/index.tsx

@@ -0,0 +1,114 @@
+import { Component, For } from 'solid-js';
+import { A } from '@solidjs/router';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail
+} from '../ui/sidebar';
+import "./style.css"
+import { Compass, Heart, RefreshCw, Settings, Waves } from 'lucide-solid';
+import { useCategoriesStore } from '@/features/categories/store';
+import { getIconComponent } from '@/lib/icon';
+
+const menuItems = [
+  {
+    title: '探索发现',
+    url: '/',
+    icon: () => <Compass size={20} />
+  },
+  {
+    title: '我的收藏',
+    url: '/',
+    icon: () => <Heart size={20} />
+  },
+  {
+    title: '下载列表',
+    url: '/',
+    icon: () => <Waves size={20} />
+  }
+];
+
+const footerItems = [
+  {
+    title: '检查更新',
+    url: '/update',
+    icon: () => <RefreshCw size={20} />
+  },
+  {
+    title: '应用设置',
+    url: '/settings',
+    icon: () => <Settings size={20} />
+  }
+];
+
+const AppSidebar: Component = () => {
+  const { categories } = useCategoriesStore();
+
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Spark Store</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <For each={menuItems}>
+                {(item) => (
+                  <SidebarMenuItem>
+                    <SidebarMenuButton as={A} href={item.url}>
+                      {item.icon ? item.icon() : null}
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )}
+              </For>
+            </SidebarMenu>
+          </SidebarGroupContent>
+          <SidebarGroupLabel>应用分类</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <For each={categories()}>
+                {(category) => {
+                  return (
+                    <SidebarMenuItem>
+                      <SidebarMenuButton as={A} href={`/categories/${category.id}`}>
+                        {getIconComponent(category.icon)({
+                            size: 20,
+                            iconNode: []
+                        })}
+                        <span>{category.name_zh_cn}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                }}
+              </For>
+            </SidebarMenu>
+          </SidebarGroupContent>
+          <SidebarGroupLabel>高级选项</SidebarGroupLabel>
+          <SidebarGroupContent>
+          <SidebarMenu>
+          <For each={footerItems}>
+            {(item) => (
+              <SidebarMenuItem>
+                <SidebarMenuButton as={A} href={item.url}>
+                {item.icon ? item.icon() : null}
+                  <span>{item.title}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )}
+          </For>
+        </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  );
+};
+
+export default AppSidebar;