qlockify-frontend-deployment/src/components/Sidebar.tsx

import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { 
  Users,
  LayoutDashboard, 
  X,
  PanelLeftClose, 
  PanelLeftOpen, 
  PanelRightClose, 
  PanelRightOpen,
  Briefcase,
  Clock3,
  Tags,
} from 'lucide-react';
import { useTranslation } from '../hooks/useTranslation';

type SidebarProps = {
  mobileOpen?: boolean;
  onMobileClose?: () => void;
};

export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  
  const { t, lang } = useTranslation();
  const isRtl = lang === 'fa';

  const ToggleIcon = isRtl
    ? (isCollapsed ? PanelRightOpen : PanelRightClose)
    : (isCollapsed ? PanelLeftOpen : PanelLeftClose);

  const navItems = [
    {
      path: '/timesheet',
      icon: Clock3,
      label: t.sidebar?.timesheet || 'Timesheet'
    },
    {
      path: '/tags',
      icon: Tags,
      label: t.sidebar?.tags || 'Tags'
    },
    { 
      path: '/workspaces', 
      icon: LayoutDashboard, 
      label: t.sidebar?.workspaces || 'Workspaces' 
    },
    { 
      path: '/clients', 
      icon: Users, 
      label: t.sidebar?.clients || 'Clients' 
    },
    { 
      path: '/projects', 
      icon: Briefcase, 
      label: t.sidebar?.projects || 'Projects' 
    },
  ];

  const renderNavItems = (mobile = false) =>
    navItems.map((item) => {
      const Icon = item.icon;
      return (
        <NavLink
          key={`${mobile ? 'mobile' : 'desktop'}-${item.path}`}
          to={item.path}
          title={!mobile && isCollapsed ? item.label : undefined}
          onClick={() => {
            if (mobile) onMobileClose?.();
          }}
          className={({ isActive }) =>
            `flex items-center rounded-lg text-sm font-medium transition-colors ${
              mobile
                ? 'gap-3 px-4 py-3'
                : isCollapsed
                  ? 'justify-center px-0 py-2.5'
                  : 'gap-3 px-3 py-2.5'
            } ${
              isActive
                ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
                : 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50'
            }`
          }
        >
          <Icon size={mobile ? 20 : isCollapsed ? 22 : 18} className="shrink-0" />
          {(mobile || !isCollapsed) && (
            <span className="truncate whitespace-nowrap">{item.label}</span>
          )}
        </NavLink>
      );
    });

  return (
    <>
      <aside 
        className={`border-e border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hidden md:flex flex-col h-screen sticky top-0 shrink-0 transition-all duration-300 ease-in-out ${
          isCollapsed ? 'w-20' : 'w-64'
        }`}
      >
        <div className={`h-18.25 flex items-center border-b border-slate-200 dark:border-slate-800 shrink-0 transition-all ${
          isCollapsed ? 'justify-center px-0' : 'justify-between px-6'
        }`}>
          {!isCollapsed && (
            <h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
              {t.title || "Qlockify"}
            </h2>
          )}
          <button
            onClick={() => setIsCollapsed(!isCollapsed)}
            className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
            title={isCollapsed ? (t.sidebar?.expand || 'Expand') : (t.sidebar?.collapse || 'Collapse')}
          >
            <ToggleIcon size={20} />
          </button>
        </div>
        
        <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
          {renderNavItems(false)}
        </nav>
      </aside>

      <div
        className={`fixed inset-0 z-[70] md:hidden transition-all duration-200 ${
          mobileOpen ? 'pointer-events-auto' : 'pointer-events-none'
        }`}
        aria-hidden={!mobileOpen}
      >
        <button
          type="button"
          className={`absolute inset-0 bg-slate-950/50 backdrop-blur-[1px] transition-opacity ${
            mobileOpen ? 'opacity-100' : 'opacity-0'
          }`}
          onClick={onMobileClose}
        />
        <aside
          className={`absolute inset-y-0 flex w-[18.5rem] max-w-[86vw] flex-col bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
            isRtl
              ? `right-0 border-s border-slate-200 dark:border-slate-800 ${
                  mobileOpen ? 'translate-x-0' : 'translate-x-full'
                }`
              : `left-0 border-e border-slate-200 dark:border-slate-800 ${
                  mobileOpen ? 'translate-x-0' : '-translate-x-full'
                }`
          }`}
        >
          <div className="flex items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
            <h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
              {t.title || "Qlockify"}
            </h2>
            <button
              type="button"
              onClick={onMobileClose}
              className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
              title="Close"
            >
              <X size={20} />
            </button>
          </div>
          <nav className="flex-1 space-y-1 overflow-y-auto p-4">
            {renderNavItems(true)}
          </nav>
        </aside>
      </div>
    </>
  );
};