Navigation
Vivid uses React Router under the hood for navigation. While routing is dynamically generated, you still need to configure sidebar navigation manually.
info
Automatic generation for sidebar navigation is planned for the future.
Example:
src/config.tsx
import type { NavigationEntry } from './router';
import { House, User } from '@phosphor-icons/react';
// ...
export const navigation: NavigationEntry[] = [
{
name: 'Home',
path: '/',
icon: <House weight="fill" size={24} />,
acl: {
action: 'read',
subject: 'other',
},
},
{
heading: 'Data',
name: 'Users',
path: '/data/user',
icon: <User weight="fill" size={24} />,
acl: false,
},
];