znakovni.hr/packages/frontend/src/components/layout/Sidebar.tsx

import { Link, useLocation } from 'react-router-dom';
import { 
  Home, 
  BookOpen, 
  FileText, 
  Video, 
  Cloud, 
  HelpCircle, 
  Users, 
  MessageSquare, 
  Bug,
  Shield,
  LogOut
} from 'lucide-react';
import { useAuthStore } from '../../stores/authStore';
import { cn } from '../../lib/utils';

const navigation = [
  { name: 'Početna', href: '/', icon: Home },
  { name: 'Riječi', href: '/dictionary', icon: BookOpen },
  { name: 'Znakopis', href: '/znakopis', icon: FileText },
  { name: 'Video rečenica', href: '/video-sentence', icon: Video },
  { name: 'Oblak', href: '/cloud', icon: Cloud },
];

const supportNavigation = [
  { name: 'Korištenje aplikacije', href: '/help', icon: HelpCircle },
  { name: 'Zajednica', href: '/community', icon: Users },
  { name: 'Komentari', href: '/comments', icon: MessageSquare },
  { name: 'Prijavi grešku', href: '/bug-report', icon: Bug },
];

export function Sidebar() {
  const location = useLocation();
  const { user, logout } = useAuthStore();

  const handleLogout = async () => {
    try {
      await logout();
      window.location.href = '/login';
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  return (
    <div className="flex h-screen w-60 flex-col bg-white border-r border-border">
      {/* Logo */}
      <div className="flex h-16 items-center px-6 border-b border-border">
        <h1 className="text-xl font-bold">
          <span className="text-indigo-600">ZNAKOVNI</span>
          <span className="text-gray-400">.</span>
          <span className="text-orange-600">hr</span>
        </h1>
      </div>

      {/* Navigation */}
      <nav className="flex-1 space-y-1 px-3 py-4 overflow-y-auto">
        {/* Main Navigation */}
        <div className="space-y-1">
          {navigation.map((item) => {
            const isActive = location.pathname === item.href;
            return (
              <Link
                key={item.name}
                to={item.href}
                className={cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-primary text-primary-foreground'
                    : 'text-muted-foreground hover:bg-secondary hover:text-foreground'
                )}
              >
                <item.icon className="h-5 w-5" />
                {item.name}
              </Link>
            );
          })}
        </div>

        {/* Support Section */}
        <div className="pt-6">
          <h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
            Portal za podršku
          </h3>
          <div className="space-y-1">
            {supportNavigation.map((item) => {
              const isActive = location.pathname === item.href;
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-primary text-primary-foreground'
                      : 'text-muted-foreground hover:bg-secondary hover:text-foreground'
                  )}
                >
                  <item.icon className="h-5 w-5" />
                  {item.name}
                </Link>
              );
            })}
          </div>
        </div>

        {/* Admin Panel (only for admins) */}
        {user?.role === 'ADMIN' && (
          <div className="pt-6">
            <Link
              to="/admin"
              className={cn(
                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                location.pathname === '/admin'
                  ? 'bg-primary text-primary-foreground'
                  : 'text-muted-foreground hover:bg-secondary hover:text-foreground'
              )}
            >
              <Shield className="h-5 w-5" />
              Admin Panel
            </Link>
          </div>
        )}
      </nav>

      {/* User Section */}
      <div className="border-t border-border p-4">
        {user ? (
          <div className="space-y-2">
            <div className="px-3 py-2">
              <p className="text-sm font-medium text-foreground">{user.displayName || user.email}</p>
              <p className="text-xs text-muted-foreground">{user.email}</p>
            </div>
            <button
              onClick={handleLogout}
              className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
            >
              <LogOut className="h-5 w-5" />
              Sign out
            </button>
          </div>
        ) : (
          <Link
            to="/login"
            className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
          >
            Sign in
          </Link>
        )}
      </div>
    </div>
  );
}