81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { useLayout } from '@/context/layout-provider'
|
|
import { canAccess } from '@/lib/permissions'
|
|
import { useAuthStore } from '@/stores/auth-store'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarRail,
|
|
} from '@/components/ui/sidebar'
|
|
// import { AppTitle } from './app-title'
|
|
import { sidebarData } from './data/sidebar-data'
|
|
import { NavGroup } from './nav-group'
|
|
import { NavUser } from './nav-user'
|
|
import { TeamSwitcher } from './team-switcher'
|
|
import { type NavGroup as NavGroupType, type NavItem } from './types'
|
|
|
|
function filterNavItem(
|
|
item: NavItem,
|
|
permissions: Record<string, string[]> | undefined
|
|
): NavItem | null {
|
|
if (!canAccess(permissions, item.permission)) {
|
|
return null
|
|
}
|
|
|
|
if (!item.items) {
|
|
return item
|
|
}
|
|
|
|
const items = item.items.filter((subItem) =>
|
|
canAccess(permissions, subItem.permission)
|
|
)
|
|
|
|
if (!items.length) {
|
|
return null
|
|
}
|
|
|
|
return { ...item, items }
|
|
}
|
|
|
|
function filterNavGroups(
|
|
groups: NavGroupType[],
|
|
permissions: Record<string, string[]> | undefined
|
|
) {
|
|
return groups
|
|
.map((group) => ({
|
|
...group,
|
|
items: group.items
|
|
.map((item) => filterNavItem(item, permissions))
|
|
.filter((item): item is NavItem => Boolean(item)),
|
|
}))
|
|
.filter((group) => group.items.length)
|
|
}
|
|
|
|
export function AppSidebar() {
|
|
const { collapsible, variant } = useLayout()
|
|
const permissions = useAuthStore((state) => state.auth.user?.permissions)
|
|
const navGroups = filterNavGroups(sidebarData.navGroups, permissions)
|
|
|
|
return (
|
|
<Sidebar collapsible={collapsible} variant={variant}>
|
|
<SidebarHeader>
|
|
<TeamSwitcher teams={sidebarData.teams} />
|
|
|
|
{/* Replace <TeamSwitch /> with the following <AppTitle />
|
|
/* if you want to use the normal app title instead of TeamSwitch dropdown */}
|
|
{/* <AppTitle /> */}
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
{navGroups.map((props) => (
|
|
<NavGroup key={props.title} {...props} />
|
|
))}
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<NavUser user={sidebarData.user} />
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
)
|
|
}
|