added Profile Page and Change password (also included breadcrumb

src/components/Header.tsx

@@ -1,15 +1,10 @@
-// import { HugeiconsIcon } from '@hugeicons/react'
-// import { Link } from '@tanstack/react-router'
-// import {
-//   ArrowDown01Icon,
-//   ArrowRight01Icon,
-//   Home07Icon,
-//   Menu01Icon,
-//   MultiplicationSignIcon,
-//   StickyNote03Icon,
-// } from '@hugeicons/core-free-icons'
-// import { useState } from 'react'
-import { HugeiconsIcon } from '@hugeicons/react'
+import { Separator } from '@base-ui/react/separator'
+import { BellIcon } from '@phosphor-icons/react'
+import { useTranslation } from 'react-i18next'
+import { useAuth } from './auth/auth-provider'
+import RouterBreadcrumb from './sidebar/RouterBreadcrumb'
+import { Badge } from './ui/badge'
+import { Button } from './ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,12 +15,6 @@ import {
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
 import { SidebarTrigger } from './ui/sidebar'
-import { Notification02Icon } from '@hugeicons/core-free-icons'
-import { Button } from './ui/button'
-import { Badge } from './ui/badge'
-import { Separator } from '@base-ui/react/separator'
-import { useTranslation } from 'react-i18next'
-import { useAuth } from './auth/auth-provider'
 
 export default function Header() {
   const { t } = useTranslation()
@@ -38,35 +27,32 @@ export default function Header() {
           <SidebarTrigger size="lg" />
           <Separator
             orientation="vertical"
-            className="mx-2 data-[orientation=vertical]:h-4"
+            className="mx-2 data-[orientation=vertical]:h-4 border"
           />
+          <RouterBreadcrumb />
         </div>
         <div className="flex mr-2">
           {session?.user && (
             <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <Button size="lg" variant="ghost" className="relative" />
-                }
-              >
-                <HugeiconsIcon icon={Notification02Icon} />
-                {false && (
-                  <Badge
-                    variant="destructive"
-                    className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
-                  >
-                    0
-                  </Badge>
-                )}
-                <span className="sr-only">Notifications</span>
+              <DropdownMenuTrigger asChild>
+                <Button size="lg" variant="ghost" className="relative">
+                  <BellIcon size={32} />
+                  {false && (
+                    <Badge
+                      variant="destructive"
+                      className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
+                    >
+                      0
+                    </Badge>
+                  )}
+                  <span className="sr-only">Notifications</span>
+                </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent className="w-sm min-w-56 rounded-lg">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel className="font-bold text-black">
-                    {t('ui.label_notifications')}
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                </DropdownMenuGroup>
+                <DropdownMenuLabel className="font-bold text-black">
+                  {t('ui.label_notifications')}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                   <DropdownMenuItem>
                     <div className="flex flex-col gap-1">
@@ -97,7 +83,6 @@ export default function Header() {
                 'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
             }}
           >
-            <HugeiconsIcon icon={StickyNote03Icon} size={20} />
             <span className="font-medium">Start - SSR Demos</span>
           </Link> */}
     </>