@tapizlabs/ui 0.2.13 → 0.2.14

package/dist/index.js

@@ -2292,13 +2292,23 @@ function LandingNavbarShell({
   themeLabels
 }) {
   const [open, setOpen] = useState7(false);
+  const [renderDrawer, setRenderDrawer] = useState7(false);
   useEffect3(() => {
-    document.body.style.overflow = open ? "hidden" : "";
-    document.body.classList.toggle("tapiz-landing-navbar-open", open);
-    return () => {
+    if (open) {
+      setRenderDrawer(true);
+      document.body.style.overflow = "hidden";
+      document.body.classList.add("tapiz-landing-navbar-open");
+      return () => {
+        document.body.style.overflow = "";
+        document.body.classList.remove("tapiz-landing-navbar-open");
+      };
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRenderDrawer(false);
       document.body.style.overflow = "";
       document.body.classList.remove("tapiz-landing-navbar-open");
-    };
+    }, 220);
+    return () => window.clearTimeout(timeoutId);
   }, [open]);
   const drawerLabel = mobileDialogLabel ?? menuLabel;
   const resolvedCloseMenuLabel = closeMenuLabel ?? menuLabel;
@@ -2340,32 +2350,43 @@ function LandingNavbarShell({
         )
       ] })
     ] }) }),
-    open ? /* @__PURE__ */ jsx50(
+    renderDrawer ? /* @__PURE__ */ jsx50(
       "button",
       {
         type: "button",
         className: "tapiz-landing-navbar__scrim",
+        "data-state": open ? "open" : "closed",
         "aria-label": resolvedCloseMenuLabel,
         onClick: () => setOpen(false)
       }
     ) : null,
-    open ? /* @__PURE__ */ jsxs35("div", { className: "tapiz-landing-navbar__drawer", role: "dialog", "aria-modal": "true", "aria-label": drawerLabel, children: [
-      /* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__drawer-nav", "aria-label": resolvedMobileNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35(
-        "a",
-        {
-          href: item.href,
-          className: "tapiz-landing-navbar__drawer-link",
-          onClick: () => setOpen(false),
-          children: [
-            item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
-            /* @__PURE__ */ jsx50("span", { children: item.label })
-          ]
-        },
-        item.href
-      )) }),
-      mobileLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--mobile", children: mobileLanguageSwitcher }) : null,
-      mobileActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__drawer-actions", children: mobileActions }) : null
-    ] }) : null
+    renderDrawer ? /* @__PURE__ */ jsxs35(
+      "div",
+      {
+        className: "tapiz-landing-navbar__drawer",
+        "data-state": open ? "open" : "closed",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": drawerLabel,
+        children: [
+          /* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__drawer-nav", "aria-label": resolvedMobileNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35(
+            "a",
+            {
+              href: item.href,
+              className: "tapiz-landing-navbar__drawer-link",
+              onClick: () => setOpen(false),
+              children: [
+                item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
+                /* @__PURE__ */ jsx50("span", { children: item.label })
+              ]
+            },
+            item.href
+          )) }),
+          mobileLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--mobile", children: mobileLanguageSwitcher }) : null,
+          mobileActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__drawer-actions", children: mobileActions }) : null
+        ]
+      }
+    ) : null
   ] });
 }