legalgo-FE-reactrouter/app/layouts/admin/dashboard.tsx

import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
import type { PropsWithChildren } from 'react'

import { useAdminContext } from '~/contexts/admin'

import { FormUpload } from './form-upload'
import { Navbar } from './navbar'
import { Sidebar } from './sidebar'

export const AdminDashboardLayout = (properties: PropsWithChildren) => {
  const { children } = properties
  const { isUploadOpen, setIsUploadOpen } = useAdminContext()
  return (
    <div className="flex flex-col">
      <Navbar />
      <div className="flex">
        <Sidebar />
        <div className="min-h-[calc(100dvh-80px)] flex-1 p-8">{children}</div>
      </div>

      <Dialog
        open={!!isUploadOpen}
        onClose={() => {
          setIsUploadOpen(undefined)
        }}
        className="relative z-50"
        transition
      >
        <DialogBackdrop
          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-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"
          >
            <FormUpload />
          </DialogPanel>
        </div>
      </Dialog>
    </div>
  )
}