feat: improved padding on modal components and implement logout in mobile menu

app/layouts/news/header-menu-mobile.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react'
-import { Link } from 'react-router'
+import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import type { TCategorySchema } from '~/apis/common/get-categories'
 import { CloseIcon } from '~/components/icons/close'
 import { MenuIcon } from '~/components/icons/menu'
+import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import { HeaderSearch } from '~/layouts/news/header-search'
+import type { loader } from '~/routes/_layout'
 
 type THeaderMenuMobile = {
   menu?: TCategorySchema['data']
@@ -15,6 +17,9 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
   const { menu } = properties
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
+  const fetcher = useFetcher()
 
   const handleToggleMenu = (): void => {
     setIsMenuOpen(!isMenuOpen)
@@ -59,15 +64,31 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                 </li>
               ))}
 
-              <button
-                className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
-                onClick={() => {
-                  setIsLoginOpen(true)
-                  setIsMenuOpen(false)
-                }}
-              >
-                Akun
-              </button>
+              {userData ? (
+                <fetcher.Form
+                  method="POST"
+                  action="/actions/logout"
+                >
+                  <Button
+                    variant="newsSecondary"
+                    className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                    type="submit"
+                  >
+                    Logout
+                  </Button>
+                </fetcher.Form>
+              ) : (
+                <Button
+                  variant="newsSecondary"
+                  className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                  onClick={() => {
+                    setIsMenuOpen(false)
+                    setIsLoginOpen(true)
+                  }}
+                >
+                  Masuk
+                </Button>
+              )}
             </ul>
           </div>