Building the Admin Sidebar with Role-Based Visibility

The Challenge

Different user roles need different navigation options. Admins see system settings, clients see orders, developers see projects.

Data-Driven Approach

Instead of hardcoding visibility logic, we use configuration:

const sidebarConfig = {
  admin: [
    { label: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
    { label: 'Users', href: '/admin/users', icon: Users },
    { label: 'Settings', href: '/admin/settings', icon: Settings },
  ],
  manager: [
    { label: 'Dashboard', href: '/manager/dashboard', icon: LayoutDashboard },
    { label: 'Projects', href: '/manager/projects', icon: Folder },
    { label: 'Clients', href: '/manager/clients', icon: Users },
  ],
  // ...
};

Component Structure

function Sidebar({ user }: { user: User }) {
  const items = sidebarConfig[user.role] || [];

  return (
    <nav>
      {items.map(item => (
        <SidebarItem key={item.href} {...item} />
      ))}
    </nav>
  );
}

Database-Driven Extension

For even more flexibility, we store sidebar configuration in the database, allowing runtime customization without code changes.

Mobile Responsiveness

On mobile, the sidebar transforms into a drawer that slides in from the left, preserving the same navigation structure.