feat: update admin navbar to display staff profile information and refactor loader data

app/layouts/admin/navbar.tsx

@@ -1,13 +1,14 @@
 import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
-import { Link, useFetcher } from 'react-router'
+import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
 import { NotificationIcon } from '~/components/icons/notification'
 import { APP } from '~/configs/meta'
-import { useAdminContext } from '~/contexts/admin'
+import type { loader } from '~/routes/_admin.lg-admin'
 
 export const Navbar = () => {
-  const { adminProfile } = useAdminContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const staffData = loaderData?.staffData
   const fetcher = useFetcher()
 
   return (
@@ -26,8 +27,12 @@ export const Navbar = () => {
         <Popover className="relative">
           <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
             <div className="flex items-center">
-              <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
-              <span className="text-xs">{adminProfile.name}</span>
+              <img
+                src={staffData?.profile_picture}
+                alt={staffData?.name}
+                className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+              />
+              <span className="text-xs">{staffData?.name}</span>
             </div>
             <ChevronIcon className="opacity-50" />
           </PopoverButton>