feat: implement logout functionality in admin navbar and update sidebar links

app/layouts/admin/navbar.tsx

@@ -1,4 +1,5 @@
-import { Link } from 'react-router'
+import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Link, useFetcher } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
 import { NotificationIcon } from '~/components/icons/notification'
@@ -7,6 +8,7 @@ import { useAdminContext } from '~/contexts/admin'
 
 export const Navbar = () => {
   const { adminProfile } = useAdminContext()
+  const fetcher = useFetcher()
 
   return (
     <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
@@ -21,13 +23,33 @@ export const Navbar = () => {
         />
       </Link>
       <div className="flex items-center gap-x-8">
-        <div className="flex w-3xs items-center justify-between">
+        <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>
             </div>
             <ChevronIcon className="opacity-50" />
-        </div>
+          </PopoverButton>
+          <PopoverPanel
+            anchor={{ to: 'bottom', gap: '8px' }}
+            transition
+            className="flex w-3xs flex-col rounded-xl border border-[#ECECEC] bg-white p-3 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
+          >
+            <fetcher.Form
+              method="POST"
+              action="/actions/admin/logout"
+              className="grid"
+            >
+              <Button
+                type="submit"
+                className="cursor-pointer rounded p-1 hover:bg-[#707FDD]/10 hover:text-[#5363AB]"
+              >
+                Logout
+              </Button>
+            </fetcher.Form>
+          </PopoverPanel>
+        </Popover>
         <NotificationIcon
           className="text-[#B0C3CC]"
           showBadge={true}

app/layouts/admin/sidebar.tsx

@@ -1,4 +1,4 @@
-import { NavLink, useLocation } from 'react-router'
+import { Link, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { MENU } from './menu'
@@ -15,7 +15,7 @@ export const Sidebar = () => {
         >
           <div className="px-5 pb-4 text-[#4C5CA0]/50 uppercase">{group}</div>
           {items.map(({ title, url, icon: Icon }) => (
-            <NavLink
+            <Link
               to={url}
               key={`${group}-${title}`}
               className={twMerge(
@@ -37,7 +37,7 @@ export const Sidebar = () => {
               >
                 {title}
               </span>
-            </NavLink>
+            </Link>
           ))}
         </div>
       ))}

app/routes/actions.admin.logout.ts

@@ -0,0 +1,22 @@
+import { data } from 'react-router'
+
+import { setStaffLogoutHeaders } from '~/libs/logout-header.server'
+
+export const action = async () => {
+  try {
+    const responseHeaders = setStaffLogoutHeaders()
+
+    return data(
+      { success: true },
+      { headers: responseHeaders, status: 200, statusText: 'OK' },
+    )
+  } catch {
+    return data(
+      {
+        message: 'Something went wrong',
+        success: false,
+      },
+      { status: 500 },
+    )
+  }
+}