From f4e83f7eac4eb951cf4379c7bb5877d73fa90dc1 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 4 Mar 2025 03:47:54 +0800
Subject: [PATCH] feat: improved padding on modal components and implement
 logout in mobile menu

---
 app/components/popup/modal.tsx          |  2 +-
 app/components/popup/success-modal.tsx  |  2 +-
 app/layouts/news/header-menu-mobile.tsx | 41 +++++++++++++++++++------
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx
index c34b9b9..4dfd452 100644
--- a/app/components/popup/modal.tsx
+++ b/app/components/popup/modal.tsx
@@ -34,7 +34,7 @@ export const PopupModal = ({
         className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
         transition
       />
-      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
         <DialogPanel
           transition
           className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx
index 2941a6b..e6bbb30 100644
--- a/app/components/popup/success-modal.tsx
+++ b/app/components/popup/success-modal.tsx
@@ -53,7 +53,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
         className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
         transition
       />
-      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
         <DialogPanel
           className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
           transition
diff --git a/app/layouts/news/header-menu-mobile.tsx b/app/layouts/news/header-menu-mobile.tsx
index 5260584..e4674e9 100644
--- a/app/layouts/news/header-menu-mobile.tsx
+++ b/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>