# Frontend Vite Routing Sidebar

> Vite admin React Router setup, RequireAuth/RequireRole, sidebar navigation config with role gates, nested tab layouts. Use when adding routes, sidebar links, or navigation in admin dashboards.

- Skill: `xmuhameed/frontend-vite-routing-sidebar` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-vite-routing-sidebar`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-vite-routing-sidebar/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xmuhameed (https://skillmd.com/u/xmuhameed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xmuhameed/frontend-vite-routing-sidebar

---


# Routing & Sidebar

## Router Structure

```typescript
const router = createBrowserRouter([
  { path: '/login', element: <LoginPage />, errorElement: <ErrorBoundary /> },
  {
    path: '/',
    element: <RequireAuth><App /></RequireAuth>,
    errorElement: <ErrorBoundary />,
    children: [
      { index: true, element: <Navigate to="/dashboard" /> },
      ...categoryRoutes,
      ...productRoutes,
    ],
  },
  { path: '*', element: <NotFound /> },
]);
```

**New apps:** split routes per feature in `routes/features/*.routes.tsx`.
**Legacy:** monolithic `routes/router.tsx` — add imports + route objects.

## App Shell

```tsx
// App.tsx
<DashboardLayout>
  <Outlet />
  <Toaster />
</DashboardLayout>
```

## Sidebar Config

```typescript
// config/sidebar.ts
export const sidebarGroups: SidebarGroup[] = [
  {
    title: 'Catalog',
    icon: Package,
    roles: ['ADMIN', 'EDITOR'],
    links: [
      { title: 'Categories', href: '/dashboard/categories' },
      { title: 'Products', href: '/dashboard/products' },
    ],
  },
];
```

Layout filters by `user.role`. Optional `notificationKey` for badge dots.

## Nested Tab Layout (orders)

```tsx
// OrdersManagementLayout.tsx
<nav>{tabs.map(t => <NavLink key={t.path} to={t.path}>{t.label} {t.count}</NavLink>)}</nav>
<Outlet />
```

## Breadcrumbs

```tsx
<Breadcrumbs items={[
  { label: 'Homepages', href: '/dashboard/homepages' },
  { label: homepage.name, bold: true },
]} />
```

## Route Conventions

| Pattern | Example |
|---------|---------|
| List | `/dashboard/{resource}` |
| Create | `/dashboard/{resource}/create` |
| Edit | `/dashboard/{resource}/edit/:id` |
| Nested | `/dashboard/homepages/:id/sections/:sectionId/elements` |

## Role on Every Protected Route

```typescript
<RequireRole roles={['ADMIN', 'EDITOR']}><Page /></RequireRole>
```

Must match sidebar `roles` array.