gbclient/src/mail/components/nav.tsx

import React from 'react';

interface NavProps {
  isCollapsed: boolean;
  links: {
    title: string;
    label?: string;
    icon: React.ReactNode;
    variant: 'default' | 'ghost';
  }[];
}

export function Nav({ links, isCollapsed }: NavProps) {
  return (
    <div className={`flex ${isCollapsed ? 'flex-col items-center' : 'flex-col'}`}>
      {links.map((link, index) => (
        <button
          key={index}
          className={`flex items-center p-2 rounded ${link.variant === 'default' ? 'bg-gray-100' : ''} ${isCollapsed ? 'justify-center' : 'justify-between'}`}
        >
          <div className="flex items-center">
            <span className="w-5 h-5 flex items-center justify-center">
              {link.icon}
            </span>
            {!isCollapsed && (
              <span className="ml-2">{link.title}</span>
            )}
          </div>
          {!isCollapsed && link.label && (
            <span className="text-xs text-gray-500">{link.label}</span>
          )}
        </button>
      ))}
    </div>
  );
}