website/app/(admin)/_components/side-nav.tsx

"use client";

import React, { useState, useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  LayoutGrid,
  Calendar,
  Settings,
  LogOut,
  Menu,
  X,
  Heart,
} from "lucide-react";

const navItems = [
  { label: "Dashboard", icon: LayoutGrid, href: "/dashboard" },
  { label: "Book Appointment", icon: Calendar, href: "/booking" },
];

export default function SideNav() {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();
  const router = useRouter();

  const getActiveIndex = () => {
    return navItems.findIndex((item) => pathname?.includes(item.href)) ?? -1;
  };

  // Handle body scroll when mobile menu is open
  useEffect(() => {
    if (open) {
      document.body.classList.add("menu-open");
    } else {
      document.body.classList.remove("menu-open");
    }
    return () => {
      document.body.classList.remove("menu-open");
    };
  }, [open]);

  return (
    <>
      {/* Mobile Top Bar */}
      <div className="flex md:hidden items-center justify-between px-4 py-3 border-b border-gray-200 bg-white z-30 fixed top-0 left-0 right-0">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
            <Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
          </div>
          <span className="text-lg font-semibold text-gray-900">Attune Heart Therapy</span>
        </div>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setOpen((v) => !v)}
          aria-label="Open menu"
        >
          {open ? <X size={28} /> : <Menu size={28} />}
        </Button>
      </div>

      {/* Mobile Drawer Overlay */}
      <div
        className={`fixed inset-0 z-40 bg-black/30 transition-opacity duration-200 md:hidden ${
          open ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        onClick={() => setOpen(false)}
      />

      {/* Side Navigation */}
      <aside
        className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[200px] min-w-[160px] md:translate-x-0 md:w-[200px] md:min-w-[200px] md:max-w-[200px] ${
          open ? "translate-x-0" : "-translate-x-full"
        } md:translate-x-0`}
      >
        {/* Logo Section */}
        <div className="shrink-0 px-3 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
          <div className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
            <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
              <Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
            </div>
            <span className="text-sm font-semibold text-gray-900">Attune Heart</span>
          </div>
        </div>

        <hr className="shrink-0 -mt-10 mb-4 mx-3 border-gray-200 md:block hidden" />

        {/* Navigation Items */}
        <nav className="flex-1 overflow-y-auto flex flex-col gap-2 px-2 md:px-0">
          {navItems.map((item, idx) => {
            const Icon = item.icon;
            const isActive = idx === getActiveIndex();

            return (
              <div className="relative flex items-center w-full" key={item.label}>
                {isActive && (
                  <span
                    className="absolute left-0 top-0 h-[40px] w-[3px] bg-linear-to-r from-rose-500 to-pink-600"
                    style={{ left: 0 }}
                  />
                )}
                <Link
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className={`group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start ${
                    isActive
                      ? "bg-linear-to-r from-rose-500 to-pink-600 text-white border border-rose-500 rounded-[5px] shadow-sm"
                      : "bg-transparent text-gray-600 hover:bg-rose-50 hover:text-rose-600 rounded-lg"
                  }`}
                  style={isActive ? { height: 40 } : {}}
                >
                  <Icon
                    size={18}
                    strokeWidth={isActive ? 2.2 : 1.5}
                    className={
                      isActive
                        ? "text-white"
                        : "text-gray-700 group-hover:text-rose-600"
                    }
                  />
                  <span
                    className="font-light leading-none text-[12px] md:text-[12px]"
                    style={{ fontWeight: 300 }}
                  >
                    {item.label}
                  </span>
                </Link>
              </div>
            );
          })}

          {/* Bottom Actions */}
          <div className="mt-auto pt-4 pb-4 border-t border-gray-200">
            <Link
              href="/settings"
              onClick={() => setOpen(false)}
              className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
            >
              <Settings size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
              <span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
                Settings
              </span>
            </Link>
            <Button
              variant="ghost"
              onClick={() => {
                setOpen(false);
                router.push("/");
              }}
              className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
            >
              <LogOut size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
              <span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
                Logout
              </span>
            </Button>
          </div>
        </nav>
      </aside>
    </>
  );
}