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

import { A, useLocation } from '@solidjs/router';
import { createSignal } from 'solid-js';

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

const links: LinkItem[] = [
  { href: '/admin', label: 'Dashboard', icon: 'dashboard.svg', group: 'Overview' },

  { href: '/admin/department', label: 'Department', icon: 'department.svg', group: 'Organization' },
  { href: '/admin/designation', label: 'Designation', icon: 'designation.svg', group: 'Organization' },
  { href: '/admin/employees', label: 'Employees', icon: 'users.svg', group: 'Organization' },

  { href: '/admin/roles', label: 'Internal Roles', icon: 'role.svg', group: 'Access & Roles' },
  { href: '/admin/runtime-roles', label: 'External Roles', icon: 'role.svg', group: 'Access & Roles' },
  { href: '/admin/onboarding-schemas', label: 'Onboarding Flows', icon: 'reviews.svg', group: 'Access & Roles' },

  { href: '/admin/internal-dashboard-management', label: 'Internal Dashboards', icon: 'dashboard.svg', group: 'Dashboards' },
  { href: '/admin/external-dashboard-management', label: 'External Dashboards', icon: 'dashboard.svg', aliasPrefix: '/admin/role-ui-configs', group: 'Dashboards' },

  { href: '/admin/users', label: 'Users', icon: 'users.svg', group: 'People' },
  { href: '/admin/company', label: 'Companies', icon: 'company.svg', group: 'People' },
  { href: '/admin/candidate', label: 'Candidates', icon: 'candidate.svg', group: 'People' },
  { href: '/admin/customer', label: 'Customers', icon: 'users.svg', group: 'People' },
  { href: '/admin/photographer', label: 'Photographers', icon: 'photographer.svg', group: 'People' },
  { href: '/admin/makeup-artist', label: 'Makeup Artists', icon: 'makeup-artist.svg', group: 'People' },
  { href: '/admin/tutors', label: 'Tutors', icon: 'tutor.svg', group: 'People' },
  { href: '/admin/developers', label: 'Developers', icon: 'developers.svg', group: 'People' },
  { href: '/admin/video-editors', label: 'Video Editors', icon: 'developers.svg', group: 'People' },
  { href: '/admin/fitness-trainers', label: 'Fitness Trainers', icon: 'tutor.svg', group: 'People' },
  { href: '/admin/catering-services', label: 'Catering Services', icon: 'company.svg', group: 'People' },
  { href: '/admin/graphic-designers', label: 'Graphic Designers', icon: 'developers.svg', group: 'People' },
  { href: '/admin/social-media-managers', label: 'Social Media Mgr.', icon: 'developers.svg', group: 'People' },

  { href: '/admin/jobs', label: 'Jobs', icon: 'jobs.svg', group: 'Content' },
  { href: '/admin/leads', label: 'Leads', icon: 'leads.svg', group: 'Content' },
  { href: '/admin/review', label: 'Reviews', icon: 'reviews.svg', group: 'Content' },
  { href: '/admin/kb', label: 'Knowledge Base', icon: 'reviews.svg', group: 'Content' },
  { href: '/admin/notifications', label: 'Notifications', icon: 'reviews.svg', group: 'Content' },

  { href: '/admin/pricing', label: 'Pricing', icon: 'pricing.svg', group: 'Finance' },
  { href: '/admin/credit', label: 'Credits', icon: 'credits.svg', group: 'Finance' },
  { href: '/admin/coupon', label: 'Coupons', icon: 'coupon.svg', group: 'Finance' },
  { href: '/admin/discount', label: 'Discounts', icon: 'discount.svg', group: 'Finance' },
  { href: '/admin/tax', label: 'Tax', icon: 'tax.svg', group: 'Finance' },
  { href: '/admin/order', label: 'Orders', icon: 'order.svg', group: 'Finance' },
  { href: '/admin/invoice', label: 'Invoices', icon: 'invoice.svg', group: 'Finance' },
  { href: '/admin/ledger', label: 'Ledger', icon: 'ledger.svg', group: 'Finance' },

  { href: '/admin/approval', label: 'Approvals', icon: 'approval.svg', group: 'Operations' },
  { href: '/admin/support', label: 'Support', icon: 'support.svg', group: 'Operations' },
  { href: '/admin/report', label: 'Reports', icon: 'report.svg', group: 'Operations' },
];

// Build ordered group list preserving first appearance
const GROUP_ORDER: string[] = [];
for (const item of links) {
  if (item.group && !GROUP_ORDER.includes(item.group)) GROUP_ORDER.push(item.group);
}

export default function AdminSidebar() {
  const location = useLocation();
  const [collapsed, setCollapsed] = createSignal(false);

  const isActive = (href: string, aliasPrefix?: string) => {
    if (href === '/admin') return location.pathname === '/admin';
    if (aliasPrefix && location.pathname.startsWith(aliasPrefix)) return true;
    return location.pathname === href || location.pathname.startsWith(`${href}/`);
  };

  return (
    <aside
      class={`flex h-full flex-col border-r border-slate-100 bg-white pb-3 pt-3 transition-all duration-300 ${
        collapsed() ? 'w-[60px]' : 'w-[220px]'
      }`}
    >
      {/* Collapse toggle */}
      <div class={`mb-2 flex px-3 ${collapsed() ? 'justify-center' : 'justify-end'}`}>
        <button
          type="button"
          onClick={() => setCollapsed((v) => !v)}
          aria-label={collapsed() ? 'Expand sidebar' : 'Collapse sidebar'}
          class="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-600"
        >
          <svg
            class={`h-3.5 w-3.5 transition-transform ${collapsed() ? 'rotate-180' : ''}`}
            fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
      </div>

      {/* Nav items grouped */}
      <nav class="scrollbar min-h-0 flex-1 overflow-y-auto px-2">
        {GROUP_ORDER.map((group) => {
          const groupItems = links.filter((l) => l.group === group);
          return (
            <div class="mb-3">
              {/* Group label — hidden when collapsed */}
              {!collapsed() && (
                <p class="mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-slate-400">
                  {group}
                </p>
              )}
              <div class="space-y-0.5">
                {groupItems.map((item) => {
                  const active = isActive(item.href, item.aliasPrefix);
                  return (
                    <A
                      href={item.href}
                      activeClass=""
                      inactiveClass=""
                      title={collapsed() ? item.label : undefined}
                      class={`group relative flex items-center gap-2.5 rounded-lg px-2 py-2 text-[13px] font-medium leading-none transition-all ${
                        collapsed() ? 'justify-center' : ''
                      } ${
                        active
                          ? 'bg-gradient-to-r from-orange-500/[0.12] to-orange-500/[0.04] text-orange-600'
                          : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800'
                      }`}
                    >
                      {/* Active left accent */}
                      {active && !collapsed() && (
                        <span class="absolute bottom-1.5 left-0 top-1.5 w-[2.5px] rounded-r-full bg-orange-500" />
                      )}

                      {/* Icon */}
                      <img
                        src={`/sidebar-icons/${item.icon}`}
                        alt=""
                        class="h-[16px] w-[16px] shrink-0"
                        style={active
                          ? 'filter: invert(42%) sepia(78%) saturate(1200%) hue-rotate(360deg) brightness(95%) contrast(95%); opacity:1'
                          : 'opacity:0.4'
                        }
                      />

                      {/* Label */}
                      {!collapsed() && (
                        <span class="truncate">{item.label}</span>
                      )}

                      {/* Active dot (collapsed) */}
                      {collapsed() && active && (
                        <span class="absolute -right-0.5 top-1.5 h-1.5 w-1.5 rounded-full bg-orange-500" />
                      )}
                    </A>
                  );
                })}
              </div>
            </div>
          );
        })}
      </nav>
    </aside>
  );
}