143 lines
5.0 KiB
TypeScript
143 lines
5.0 KiB
TypeScript
import { Link, useRouterState } from '@tanstack/react-router'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import {
|
|
AppWindowIcon,
|
|
FingerprintIcon,
|
|
HistoryIcon,
|
|
KeyRoundIcon,
|
|
LayoutGridIcon,
|
|
LogInIcon,
|
|
UsersIcon,
|
|
} from 'lucide-react'
|
|
import { AppSwitcher } from '@/components/app-switcher'
|
|
import { NavUser } from '@/components/nav-user'
|
|
import { meQueryOptions } from '@/queries/auth'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@authportal/ui/components/sidebar'
|
|
|
|
function isActive(pathname: string, to: string, exact: boolean) {
|
|
if (exact) return pathname === to
|
|
return pathname === to || pathname.startsWith(`${to}/`)
|
|
}
|
|
|
|
export function AppSidebar() {
|
|
const pathname = useRouterState({ select: (s) => s.location.pathname })
|
|
const { data: me } = useQuery(meQueryOptions)
|
|
|
|
return (
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<AppSwitcher />
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Портал</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="Приложения"
|
|
isActive={isActive(pathname, '/apps', true)}
|
|
render={<Link to="/apps" />}
|
|
>
|
|
<LayoutGridIcon className="size-4" />
|
|
<span>Приложения</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="Безопасность"
|
|
isActive={isActive(pathname, '/account', true)}
|
|
render={<Link to="/account" />}
|
|
>
|
|
<FingerprintIcon className="size-4" />
|
|
<span>Безопасность</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
|
|
{me?.is_admin ? (
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Админ</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="Пользователи"
|
|
isActive={
|
|
isActive(pathname, '/admin', false) &&
|
|
!pathname.startsWith('/admin/apps') &&
|
|
!pathname.startsWith('/admin/audit') &&
|
|
!pathname.startsWith('/admin/logins') &&
|
|
!pathname.startsWith('/admin/oidc')
|
|
}
|
|
render={<Link to="/admin" />}
|
|
>
|
|
<UsersIcon className="size-4" />
|
|
<span>Пользователи</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="Входы"
|
|
isActive={isActive(pathname, '/admin/logins', false)}
|
|
render={<Link to="/admin/logins" />}
|
|
>
|
|
<LogInIcon className="size-4" />
|
|
<span>Входы</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="Изменения"
|
|
isActive={isActive(pathname, '/admin/audit', false)}
|
|
render={<Link to="/admin/audit" />}
|
|
>
|
|
<HistoryIcon className="size-4" />
|
|
<span>Изменения</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="Приложения"
|
|
isActive={isActive(pathname, '/admin/apps', false)}
|
|
render={<Link to="/admin/apps" />}
|
|
>
|
|
<AppWindowIcon className="size-4" />
|
|
<span>Ссылки приложений</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="OIDC"
|
|
isActive={isActive(pathname, '/admin/oidc', false)}
|
|
render={<Link to="/admin/oidc" />}
|
|
>
|
|
<KeyRoundIcon className="size-4" />
|
|
<span>OIDC-клиенты</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
) : null}
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<NavUser />
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
)
|
|
}
|