kreativortex/components/Layouts/DashboardMenu.tsx

"use client";

import { Link, usePathname } from '@/i18n/routing';
import { useTranslations, useLocale } from 'next-intl';
import { useFetch } from '@/hooks/useFetch';
import { isAdmin } from '@/lib/admin';
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent
} from '../ui/dropdown-menu';
import { Button } from '../ui/button';
import { BookUserIcon, HouseIcon, InfoIcon, MenuIcon, MessagesSquareIcon, UsersIcon, VideoIcon } from 'lucide-react';

interface MenuWithChildren {
  id: string;
  name: any; // Json type
  slug: string;
  children: MenuWithChildren[];
}

interface ClassData {
  id: string;
  name: string;
  code: string;
}

interface DashboardMenuProps {
  menus: MenuWithChildren[];
}

export default function DashboardMenu({ menus = [] }: DashboardMenuProps) {
  const t = useTranslations('Sidebar');
  const locale = useLocale();
  const pathname = usePathname();
  const { data: classes } = useFetch<ClassData[]>('/api/classes');
  const { data: userProfile } = useFetch<any>('/api/user/profile');

  const isActive = (path: string) => pathname === path;

  // Check if user is admin or educator
  const userIsAdmin = isAdmin(userProfile?.data);

  const getLocalizedName = (name: any) => {
    if (!name) return '';
    return name[locale] || name['id'] || name['en'] || '';
  };

  return (
    <div className="w-64 md:w-auto md:bg-transparent md:backdrop-blur-none md:border-0 backdrop-blur-sm border-r border-white/10 h-full">

      {/* Navigation */}
      <nav className="px-4 flex-1 overflow-y-auto">
        <ul className="flex flex-col md:flex-row space-y-2 space-x-2 justify-center items-center">
          <li className='mb-0'>
            <Link
              href="/dashboard"
            >
              <Button variant={isActive('/dashboard') ? "glass" : "ghost"}>
                <HouseIcon className="w-5 h-5" />
                {t('home')}
              </Button>
            </Link>
          </li>
          {userIsAdmin && (
            <li className='mb-0'>
              <Link
                href="/dashboard/videos"
              >
                <Button variant={isActive('/dashboard/videos') ? "glass" : "ghost"}>
                  <VideoIcon className="w-5 h-5" />
                  {t('videos')}
                </Button>
              </Link>
            </li>
          )}
          <li className='mb-0'>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button size="lg" variant="ghost">
                  <MenuIcon className="w-5 h-5" />
                  {t('menu')}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="start">
                <DropdownMenuGroup>
                  {menus.map((menu) => (
                    <div key={menu.id}>
                      {menu.children && menu.children.length > 0 ? (
                        <DropdownMenuSub>
                          <DropdownMenuSubTrigger>
                            {getLocalizedName(menu.name)}
                          </DropdownMenuSubTrigger>
                          <DropdownMenuPortal>
                            <DropdownMenuSubContent>
                              {menu.children.map((child) => (
                                <DropdownMenuItem key={child.id}>
                                  <Link href={`/dashboard/pages/${child.slug}`} className="w-full">
                                    {getLocalizedName(child.name)}
                                  </Link>
                                </DropdownMenuItem>
                              ))}
                            </DropdownMenuSubContent>
                          </DropdownMenuPortal>
                        </DropdownMenuSub>
                      ) : (
                        <DropdownMenuItem>
                          <Link href={`/dashboard/pages/${menu.slug}`} className="w-full">
                            {getLocalizedName(menu.name)}
                          </Link>
                        </DropdownMenuItem>
                      )}
                    </div>
                  ))}
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </li>
          <li className='mb-0'>
            <Link
              href="/dashboard/classes"
            >
              <Button variant={isActive('/dashboard/classes') ? "glass" : "ghost"}>
                <UsersIcon className="w-5 h-5" />
                {t('classes')}
              </Button>
            </Link>
          </li>
          <li className='mb-0'>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button size="lg" variant="ghost">
                  <MessagesSquareIcon className="w-5 h-5" />
                  {t('forum')}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="start">
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <Link href={`/dashboard/forum/umum`} className="w-full">
                      {t('general')}
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSub>
                    <DropdownMenuSubTrigger>
                      {t('group')}
                    </DropdownMenuSubTrigger>
                    <DropdownMenuPortal>
                      <DropdownMenuSubContent>
                        {classes?.map((classItem) => (
                          <DropdownMenuItem key={classItem.id}>
                            <Link href={`/dashboard/forum/${classItem.id}`} className="w-full">
                              {classItem.name}
                            </Link>
                          </DropdownMenuItem>
                        ))}
                        {(!classes || classes.length === 0) && (
                          <DropdownMenuItem disabled>
                            {t('noClasses')}
                          </DropdownMenuItem>
                        )}
                      </DropdownMenuSubContent>
                    </DropdownMenuPortal>
                  </DropdownMenuSub>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </li>
          <li className='mb-0'>
            <Link
              href="/dashboard/contact"
            >
              <Button variant={isActive('/dashboard/contact') ? "glass" : "ghost"}>
                <BookUserIcon className="w-5 h-5" />
                {t('contact')}
              </Button>
            </Link>
          </li>
          <li className='mb-0'>
            <Link
              href="/dashboard/faq"
            >
              <Button variant={isActive('/dashboard/faq') ? "glass" : "ghost"}>
                <InfoIcon className="w-5 h-5" />
                {t('faq')}
              </Button>
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}