legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-03-04 03:47:54 +08:00
parent a9b9b76ef2
commit f4e83f7eac
3 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/popup/modal.tsx
View File

@ -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"

2
app/components/popup/success-modal.tsx
View File

@ -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

41
app/layouts/news/header-menu-mobile.tsx
View File

@ -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>