Leonid Pershin
85becacea5
- Updated the root layout to include a mobile menu toggle, improving navigation on smaller screens. - Refactored navigation links and language/theme selection for better organization and accessibility. - Added overflow handling for admin navigation and tables to ensure proper display on smaller screens. - Improved translations for menu toggle accessibility in both Russian and English.
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useRequireAdmin } from '@/features/auth/guards'
|
|
import { cn } from '@/shared/lib/cn'
|
|
|
|
export const Route = createFileRoute('/admin')({ component: AdminLayout })
|
|
|
|
const TABS = [
|
|
{ to: '/admin', key: 'overview' },
|
|
{ to: '/admin/activation', key: 'activation' },
|
|
{ to: '/admin/users', key: 'users' },
|
|
{ to: '/admin/roles', key: 'roles' },
|
|
{ to: '/admin/nodes', key: 'nodes' },
|
|
{ to: '/admin/apps', key: 'apps' },
|
|
{ to: '/admin/audit', key: 'audit' },
|
|
] as const
|
|
|
|
function AdminLayout() {
|
|
const { t } = useTranslation()
|
|
const { isReady } = useRequireAdmin()
|
|
|
|
if (!isReady) return null
|
|
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-10">
|
|
<h1 className="text-2xl font-semibold tracking-tight">{t('nav.admin')}</h1>
|
|
<nav className="flex gap-1 overflow-x-auto border-b border-border">
|
|
{TABS.map((tab) => (
|
|
<Link
|
|
key={tab.to}
|
|
to={tab.to}
|
|
activeOptions={{ exact: tab.to === '/admin' }}
|
|
className={cn('shrink-0 whitespace-nowrap px-3 py-2 text-sm text-muted-foreground hover:text-foreground')}
|
|
activeProps={{ className: 'border-b-2 border-primary text-foreground font-medium' }}
|
|
>
|
|
{t(`admin.tabs.${tab.key}`)}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<Outlet />
|
|
</div>
|
|
)
|
|
}
|