full-stack-school/src/components/Menu.tsx

import Image from "next/image";
import Link from "next/link";

const menuItems = [
  {
    title: "MENU",
    items: [
      {
        icon: "/home.png",
        label: "Home",
        href: "/",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/teacher.png",
        label: "Teachers",
        href: "/list/teachers",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/student.png",
        label: "Students",
        href: "/list/students",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/parent.png",
        label: "Parents",
        href: "/list/parents",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/subject.png",
        label: "Subjects",
        href: "/list/subjects",
        visible: ["admin"],
      },
      {
        icon: "/class.png",
        label: "Classes",
        href: "/list/classes",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/lesson.png",
        label: "Lessons",
        href: "/list/lessons",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/exam.png",
        label: "Exams",
        href: "/list/exams",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/assignment.png",
        label: "Assignments",
        href: "/list/assignments",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/result.png",
        label: "Results",
        href: "/list/results",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/attendance.png",
        label: "Attendance",
        href: "/list/attendance",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/calendar.png",
        label: "Events",
        href: "/list/events",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/message.png",
        label: "Messages",
        href: "/list/messages",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/announcement.png",
        label: "Announcements",
        href: "/list/announcements",
        visible: ["admin", "teacher", "student", "parent"],
      },
    ],
  },
  {
    title: "TEACHER CONFIG",
    items: [
      {
        icon: "/home.png",
        label: "My Schools",
        href: "/list/my-schools",
        visible: ["teacher"],
      },
    ],
  },
  {
    title: "SCHOOL CONFIG",
    items: [
      {
        icon: "/calendar.png",
        label: "Terms",
        href: "/list/terms",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/calendar.png",
        label: "Holidays",
        href: "/list/holidays",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/calendar.png",
        label: "School Timetables",
        href: "/list/school-timetables",
        visible: ["admin", "teacher"],
      },
      {
        icon: "/lesson.png",
        label: "Timetable Slots",
        href: "/list/timeslots",
        visible: ["admin", "teacher"],
      },
    ],
  },
  {
    title: "TEACHER TIMETABLE CONFIG",
    items: [
      {
        icon: "/calendar.png",
        label: "Timetable Templates",
        href: "/list/templates",
        visible: ["admin", "teacher"],
      },
    ],
  },
  {
    title: "OTHER",
    items: [
      {
        icon: "/profile.png",
        label: "Profile",
        href: "/profile",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/setting.png",
        label: "Settings",
        href: "/settings",
        visible: ["admin", "teacher", "student", "parent"],
      },
      {
        icon: "/logout.png",
        label: "Logout",
        href: "/logout",
        visible: ["admin", "teacher", "student", "parent"],
      },
    ],
  },
];

const Menu = ({
  role,
  isCollapsed,
  canManageSchool,
}: {
  role: string;
  isCollapsed: boolean;
  canManageSchool: boolean;
}) => {
  return (
    <div className="mt-4 text-sm w-full">
      {menuItems.map((section) => {
        const filteredItems = section.items.filter((item) => {
          if (!item.visible.includes(role)) return false;
          if (
            section.title === "SCHOOL CONFIG" &&
            role === "teacher" &&
            !canManageSchool
          ) {
            return false;
          }
          return true;
        });

        if (filteredItems.length === 0) {
          return null;
        }

        return (
          <div className="flex flex-col gap-2 relative w-full" key={section.title}>
            <span
              className={`hidden lg:block text-gray-400 font-light my-4 transition-all duration-300 ease-in-out whitespace-nowrap overflow-hidden ${
                isCollapsed
                  ? "opacity-0 h-0 my-0 mt-4 text-[0px]"
                  : "opacity-100 h-4 my-4 text-xs"
              }`}
            >
              {section.title}
            </span>
            <div
              className={`block lg:hidden w-full h-4 ${
                isCollapsed ? "" : "my-4"
              }`}
            />
            {filteredItems.map((item) => (
              <Link
                href={item.href}
                key={item.label}
                className={`flex items-center text-gray-500 py-2 rounded-md hover:bg-lamaSkyLight transition-all relative group
                    ${isCollapsed ? "justify-center px-0 w-10 h-10 mx-auto" : "justify-center lg:justify-start md:px-2"}
                  `}
              >
                <Image
                  src={item.icon}
                  alt=""
                  width={20}
                  height={20}
                  className="min-w-[20px]"
                />
                <span
                  className={`hidden lg:block whitespace-nowrap overflow-hidden transition-all duration-300 ease-in-out origin-left
                      ${isCollapsed ? "opacity-0 w-0 max-w-0" : "opacity-100 w-auto ml-4 max-w-[200px]"}
                    `}
                >
                  {item.label}
                </span>

                {/* Tooltip on hover when collapsed */}
                {isCollapsed && (
                  <div className="absolute left-14 bg-gray-800 text-white text-xs py-1 px-2 rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 pointer-events-none">
                    {item.label}
                  </div>
                )}
              </Link>
            ))}
          </div>
        );
      })}
    </div>
  );
};

export default Menu;