114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
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, Download } 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: () => <Download 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; |