chore: adjust Navbar styling and add breadcrumb to navbar

src/components/Navbar.tsx

@@ -1,26 +1,26 @@
 'use client';
 
 import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
 import { Icon } from '@iconify/react';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Dropdown from '@/components/Dropdown';
+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';
 
 interface NavbarProps {
-  title: string;
   toggleSidebar?: () => void;
 }
 
-const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
+const Navbar = ({ toggleSidebar }: NavbarProps) => {
   const { setUser } = useAuth();
   const router = useRouter();
+  const pathname = usePathname();
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
@@ -35,42 +35,52 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
   };
 
   return (
-    <div className='navbar px-4 bg-base-100 shadow-sm'>
+    <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 onClick={toggleSidebar} className='block lg:hidden'>
-              <Icon
-                icon='material-symbols:menu-rounded'
-                width={24}
-                height={24}
-              />
+            <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>
           )}
 
-          <span className='font-bold text-xl text-primary'>{title}</span>
+          <Breadcrumb items={buildBreadcrumbs(pathname)} />
         </div>
       </div>
 
       <div className='flex gap-2'>
-        <Dropdown
-          align='end'
-          direction='bottom'
-          trigger={
-            <div className='btn btn-ghost btn-circle avatar'>
-              <div className='w-10 rounded-full border flex justify-center items-center'>
-                <Icon icon='uil:user' width={40} height={40} />
-              </div>
-            </div>
-          }
-          className={{
-            content: 'w-52 mt-3',
-          }}
+        <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'
         >
-          <Menu>
-            <MenuItem title='Logout' onClick={logoutClickHandler} />
-          </Menu>
-        </Dropdown>
+          <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>
   );