lti-web-client/src/components/Navbar.tsx

'use client';

import toast from 'react-hot-toast';
import { usePathname, useRouter } from 'next/navigation';

import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import Breadcrumb, { buildBreadcrumbs } from '@/components/Breadcrumb';
import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent';

import { useAuth } from '@/services/hooks/useAuth';
import { AuthApi } from '@/services/api/auth';
import { isResponseError } from '@/lib/api-helper';
import { useUiStore } from '@/stores/ui/ui.store';

interface NavbarProps {
  toggleSidebar?: () => void;
}

const Navbar = ({ toggleSidebar }: NavbarProps) => {
  const { setUser } = useAuth();
  const router = useRouter();
  const pathname = usePathname();
  const navbarActions = useUiStore((state) => state.navbarActions);

  const logoutClickHandler = async () => {
    const logoutRes = await AuthApi.logout();

    if (isResponseError(logoutRes)) {
      toast.error('Gagal logout! Coba lagi!');
      return;
    }

    setUser(undefined);
    router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
  };

  return (
    <div className='navbar p-3 bg-base-100 border-b border-base-content/10'>
      <div className='flex-1'>
        <div className='flex flex-row items-center gap-4'>
          {toggleSidebar && (
            <Button
              variant='ghost'
              color='none'
              onClick={toggleSidebar}
              className='block lg:hidden p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
            >
              <Icon icon='heroicons:bars-3' width={20} height={20} />
            </Button>
          )}

          <Breadcrumb items={buildBreadcrumbs(pathname)} />
        </div>
      </div>

      <div className='flex gap-2 items-center'>
        {/* Page-specific actions */}
        {navbarActions && <div className='mr-2'>{navbarActions}</div>}
        <PopoverButton
          tabIndex={0}
          variant='ghost'
          color='none'
          popoverTarget='accountNavbar'
          anchorName='--account-navbar'
          className='p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
        >
          <Icon icon='heroicons:user' width={20} height={20} />
        </PopoverButton>

        <PopoverContent
          id='accountNavbar'
          anchorName='--account-navbar'
          position='bottom-start'
          className='rounded-xl border border-base-content/5 shadow-sm'
        >
          <Button
            onClick={logoutClickHandler}
            variant='ghost'
            color='error'
            className='p-3 justify-start text-sm font-semibold w-full'
          >
            <Icon icon='heroicons-outline:logout' width={20} height={20} />
            Logout
          </Button>
        </PopoverContent>
      </div>
    </div>
  );
};

export default Navbar;