fix: replace HeadlessUI Dialog with native sidebar for mobile

HeadlessUI Dialog had SSR hydration issues with Remix that caused the
mobile sidebar to not render when clicking the "Open sidebar" button.
The FocusTrap warning indicated the Dialog was mounting but content
wasn't rendering properly.

Changes:
- Replace HeadlessUI Dialog/Transition with native div implementation
- Use pointer-events to control click behavior on overlay vs panel
- Update E2E test to use getByRole for better element targeting

Closes: rb-b8v.11

Author: zainfathoni

app/routes/dashboard.tsx

@@ -1,5 +1,4 @@
-import { Fragment, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { useState } from 'react'
 import {
   HomeIcon,
   CashIcon,
@@ -84,56 +83,32 @@ export default function Dashboard() {
         ```
       */}
       <div>
-        <Transition.Root show={sidebarOpen} as={Fragment}>
-          <Dialog
-            as="div"
-            className="fixed inset-0 flex z-40 lg:hidden"
-            onClose={setSidebarOpen}
+        {/* Mobile sidebar - native implementation to avoid HeadlessUI SSR issues */}
+        {sidebarOpen && (
+          <div
+            className="fixed inset-0 z-40 lg:hidden"
+            role="dialog"
+            aria-modal="true"
           >
-            <Transition.Child
-              as={Fragment}
-              enter="transition-opacity ease-linear duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="transition-opacity ease-linear duration-300"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Dialog.Overlay className="fixed inset-0 bg-gray-600 bg-opacity-75" />
-            </Transition.Child>
-            <Transition.Child
-              as={Fragment}
-              enter="transition ease-in-out duration-300 transform"
-              enterFrom="-translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition ease-in-out duration-300 transform"
-              leaveFrom="translate-x-0"
-              leaveTo="-translate-x-full"
-            >
-              <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-in-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in-out duration-300"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div className="absolute top-0 right-0 -mr-12 pt-2">
-                    <button
-                      type="button"
-                      className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                      onClick={() => setSidebarOpen(false)}
-                    >
-                      <span className="sr-only">Close sidebar</span>
-                      <XIcon
-                        className="h-6 w-6 text-white"
-                        aria-hidden="true"
-                      />
-                    </button>
-                  </div>
-                </Transition.Child>
+            {/* Overlay */}
+            <div
+              className="fixed inset-0 bg-gray-600 bg-opacity-75 z-0"
+              onClick={() => setSidebarOpen(false)}
+              aria-hidden="true"
+            />
+            {/* Sidebar panel */}
+            <div className="fixed inset-0 flex z-10 pointer-events-none">
+              <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white pointer-events-auto">
+                <div className="absolute top-0 right-0 -mr-12 pt-2">
+                  <button
+                    type="button"
+                    className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                    onClick={() => setSidebarOpen(false)}
+                  >
+                    <span className="sr-only">Close sidebar</span>
+                    <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                  </button>
+                </div>
                 <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                   <LogoWithText />
                   <nav className="mt-5 px-2 space-y-1">
@@ -207,12 +182,12 @@ export default function Dashboard() {
                   </Link>
                 </div>
               </div>
-            </Transition.Child>
-            <div className="shrink-0 w-14">
-              {/* Force sidebar to shrink to fit close icon */}
+              <div className="shrink-0 w-14" aria-hidden="true">
+                {/* Force sidebar to shrink to fit close icon */}
+              </div>
             </div>
-          </Dialog>
-        </Transition.Root>
+          </div>
+        )}
 
         {/* Static sidebar for desktop */}
         <div className="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">

e2e/logout.spec.ts

@@ -16,10 +16,11 @@ test('Logout', async ({ page, isMobile, queries: { getByRole } }) => {
     await openSidebar.click()
   }
 
-  // Click the last item with text=Keluar and wait for the redirect to the /profile page
+  // Click the Keluar button and wait for the redirect to the homepage
+  const keluarButton = await getByRole('button', { name: /keluar/i })
   await Promise.all([
     page.waitForNavigation(/*{ url: 'http://localhost:3000' }*/),
-    page.click('text=Keluar >> nth=-1'),
+    keluarButton.click(),
   ])
 
   // Expect text=Masuk to be visible and linking to the