done with mobile overlay

Author: jderochervlk

__tests__/NavbarPrimary_.test.res

@@ -58,24 +58,32 @@ test("phone has some things hidden and a mobile nav that can be toggled", async
     </BrowserRouter>,
   )
 
-  // await element(screen->getByText("Docs"))->toBeVisible
-  // await element(screen->getByText("Playground"))->notToBeVisible
-  // await element(screen->getByText("Blog"))->notToBeVisible
-  // await element(screen->getByText("Community"))->notToBeVisible
+  let leftContent = await screen->getByTestId("navbar-primary-left-content")
 
-  await element(screen->getByTestId("mobile-nav"))->notToBeVisible
+  await element(leftContent->getByText("Docs"))->toBeVisible
+  await element(leftContent->getByText("Playground"))->notToBeVisible
+  await element(leftContent->getByText("Blog"))->notToBeVisible
+  await element(leftContent->getByText("Community"))->notToBeVisible
+
+  let rightContent = await screen->getByTestId("navbar-primary-right-content")
 
-  // await element(screen->getByLabelText("Github"))->notToBeVisible
-  // await element(screen->getByLabelText("X (formerly Twitter)"))->notToBeVisible
-  // await element(screen->getByLabelText("Bluesky"))->notToBeVisible
-  // await element(screen->getByLabelText("Forum"))->notToBeVisible
+  await element(rightContent->getByLabelText("Github"))->notToBeVisible
+  await element(rightContent->getByLabelText("X (formerly Twitter)"))->notToBeVisible
+  await element(rightContent->getByLabelText("Bluesky"))->notToBeVisible
+  await element(rightContent->getByLabelText("Forum"))->notToBeVisible
+
+  await element(screen->getByTestId("mobile-nav"))->notToBeVisible
 
   let button = await screen->getByTestId("toggle-mobile-overlay")
 
   await element(button)->toBeVisible
 
   await button->click
 
+  let mobileNav = await screen->getByTestId("mobile-nav")
+
+  await element(mobileNav)->toBeVisible
+
   // await element(screen->getByLabelText("Github"))->toBeVisible
   // await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible
   // await element(screen->getByLabelText("Bluesky"))->toBeVisible

src/components/NavbarMobileOverlay.res

@@ -6,10 +6,7 @@ module MobileNav = {
   let make = (~route: Path.t) => {
     let base = "font-normal mx-4 py-5 text-gray-40 border-b border-gray-80"
     let extLink = "block hover:cursor-pointer hover:text-white text-gray-60"
-    <ul
-      dataTestId="mobile-nav"
-      className="border-gray-80 border-tn top-16 flex-col fixed h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"
-    >
+    <ul dataTestId="mobile-nav">
       <li className=base>
         <Link
           prefetch={#intent}
@@ -94,7 +91,11 @@ let make = () => {
     Some(closeMobileOverlay)
   }, [])
 
-  <dialog id="mobile-overlay" onClick={handleBackdropClick}>
+  <dialog
+    id="mobile-overlay"
+    onClick={handleBackdropClick}
+    className="top-16 flex-col h-full w-full z-50 bg-gray-100  overflow-scroll pb-8"
+  >
     <MobileNav route />
   </dialog>
 }

styles/main.css

@@ -395,6 +395,11 @@ body:has(dialog[open]) {
   overflow: hidden;
 }
 
+#mobile-overlay {
+  max-width: 100%;
+  margin: 0;
+}
+
 body {
   scrollbar-gutter: stable;
 }