nxtgauge-admin-solid/src/components/AdminSidebar.tsx

import { A, useLocation } from '@solidjs/router';

type LinkItem = { legacyHref: string; href: string; label: string; icon: string; aliasPrefix?: string };

const links: LinkItem[] = [
  { legacyHref: '/', href: '/admin', label: 'Dashboard', icon: 'dashboard.svg' },
  { legacyHref: '/department', href: '/admin/department', label: 'Department Management', icon: 'department.svg' },
  { legacyHref: '/designation', href: '/admin/designation', label: 'Designation Management', icon: 'designation.svg' },
  { legacyHref: '/employees', href: '/admin/employees', label: 'Internal User Management', icon: 'users.svg' },
  { legacyHref: '/roles?scope=internal', href: '/admin/roles?scope=internal', label: 'Internal Role Management', icon: 'role.svg' },
  { legacyHref: '/runtime-roles', href: '/admin/runtime-roles', label: 'External Role Management', icon: 'role.svg' },
  { legacyHref: '/onboarding-management', href: '/admin/onboarding-management', label: 'Onboarding Management', icon: 'reviews.svg', aliasPrefix: '/admin/onboarding-schemas' },
  { legacyHref: '/internal-dashboard-management', href: '/admin/internal-dashboard-management', label: 'Internal Dashboard Management', icon: 'dashboard.svg' },
  { legacyHref: '/external-dashboard-management', href: '/admin/external-dashboard-management', label: 'External Dashboard Management', icon: 'dashboard.svg', aliasPrefix: '/admin/role-ui-configs' },
  { legacyHref: '/approval', href: '/admin/approval', label: 'Approval Management', icon: 'approval.svg' },
  { legacyHref: '/users', href: '/admin/users', label: 'External User Management', icon: 'users.svg' },
  { legacyHref: '/customer', href: '/admin/customer', label: 'Customer Management', icon: 'users.svg' },
  { legacyHref: '/company', href: '/admin/company', label: 'Company Management', icon: 'company.svg' },
  { legacyHref: '/candidate', href: '/admin/candidate', label: 'Candidate Management', icon: 'candidate.svg' },
  { legacyHref: '/photographer', href: '/admin/photographer', label: 'Photographer Management', icon: 'photographer.svg' },
  { legacyHref: '/video-editors', href: '/admin/video-editors', label: 'Video Editor Management', icon: 'developers.svg' },
  { legacyHref: '/graphic-designers', href: '/admin/graphic-designers', label: 'Graphic Designer Management', icon: 'developers.svg' },
  { legacyHref: '/social-media-managers', href: '/admin/social-media-managers', label: 'Social Media Manager Management', icon: 'developers.svg' },
  { legacyHref: '/fitness-trainers', href: '/admin/fitness-trainers', label: 'Fitness Trainer Management', icon: 'tutor.svg' },
  { legacyHref: '/catering-services', href: '/admin/catering-services', label: 'Catering Services Management', icon: 'company.svg' },
  { legacyHref: '/makeup-artist', href: '/admin/makeup-artist', label: 'Makeup Artist Management', icon: 'makeup-artist.svg' },
  { legacyHref: '/tutors', href: '/admin/tutors', label: 'Tutor Management', icon: 'tutor.svg' },
  { legacyHref: '/developers', href: '/admin/developers', label: 'Developer Management', icon: 'developers.svg' },
  { legacyHref: '/jobs', href: '/admin/jobs', label: 'Jobs Management', icon: 'jobs.svg' },
  { legacyHref: '/leads', href: '/admin/leads', label: 'Leads Management', icon: 'leads.svg' },
  { legacyHref: '/pricing', href: '/admin/pricing', label: 'Pricing Management', icon: 'pricing.svg' },
  { legacyHref: '/credit', href: '/admin/credit', label: 'Credit Management', icon: 'credits.svg' },
  { legacyHref: '/coupon', href: '/admin/coupon', label: 'Coupon Management', icon: 'coupon.svg' },
  { legacyHref: '/discount', href: '/admin/discount', label: 'Discount Management', icon: 'discount.svg' },
  { legacyHref: '/tax', href: '/admin/tax', label: 'Tax Management', icon: 'tax.svg' },
  { legacyHref: '/order', href: '/admin/order', label: 'Order Management', icon: 'order.svg' },
  { legacyHref: '/invoice', href: '/admin/invoice', label: 'Invoice Management', icon: 'invoice.svg' },
  { legacyHref: '/review', href: '/admin/review', label: 'Review Management', icon: 'reviews.svg' },
  { legacyHref: '/kb', href: '/admin/kb', label: 'Knowledge Base Management', icon: 'reviews.svg' },
  { legacyHref: '/notifications', href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg' },
  { legacyHref: '/help', href: '/admin/support', label: 'Support Management', icon: 'support.svg' },
  { legacyHref: '/report', href: '/admin/report', label: 'Report Management', icon: 'report.svg' },
  { legacyHref: '/ledger', href: '/admin/ledger', label: 'Ledger Management', icon: 'ledger.svg' },
];

export default function AdminSidebar() {
  const location = useLocation();
  const isLinkActive = (href: string, aliasPrefix?: string) => {
    const pathOnly = href.split('?')[0] || href;
    if (pathOnly === '/admin') return location.pathname === '/admin';
    if (aliasPrefix && location.pathname.startsWith(aliasPrefix)) return true;
    return location.pathname === pathOnly || location.pathname.startsWith(`${pathOnly}/`);
  };

  return (
    <aside class="sidebar">
      <div class="sidebar-toggle-row">
        <button type="button" class="sidebar-toggle-btn" aria-label="Collapse sidebar">‹</button>
      </div>
      <nav class="sidebar-nav">
        {links.map((item) => (
          <A href={item.href} class={`nav-item ${isLinkActive(item.href, item.aliasPrefix) ? 'active' : ''}`} data-legacy-href={item.legacyHref}>
            <img class="nav-icon" src={`/sidebar-icons/${item.icon}`} alt="" />
            <span class="nav-title">{item.label}</span>
            {isLinkActive(item.href, item.aliasPrefix) ? <span class="active-badge">Active</span> : null}
          </A>
        ))}
      </nav>
    </aside>
  );
}