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>

app/routes/_admin.lg-admin.tsx

@@ -12,7 +12,7 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   const { staffToken } = await handleCookie(request)
   const { pathname } = new URL(request.url)
   const isAuthPage = AUTH_PAGES.includes(pathname)
-  let adminData
+  let staffData
 
   if (!isAuthPage && !staffToken) {
     throw redirect('/lg-admin/login')
@@ -26,11 +26,11 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     const { data } = await getStaff({
       accessToken: staffToken,
     })
-    adminData = data
+    staffData = data
   }
 
   return {
-    adminData,
+    staffData,
   }
 }