zudoku 0.4.2-dev.3 → 0.4.2-dev.5

package/lib/zudoku.components.js

@@ -1890,64 +1890,61 @@ const gs = () => {
   )) }) })
 ] }, e.label) : /* @__PURE__ */ a.jsx(Ge, { to: e.path ?? "", children: /* @__PURE__ */ a.jsx(Vn, { children: e.label }, e.label) }), Jn = Lt(function() {
   const t = ft(), [n, r] = Fr(), { isAuthenticated: o, profile: s, isAuthEnabled: i } = ft(), u = Ne(), { page: l, plugins: v } = u, p = v.filter((h) => Ha(h)).flatMap((h) => h.getProfileMenuItems(u)).map((h) => /* @__PURE__ */ a.jsx(Wn, { item: h }, h.label)), d = n ? ma : va;
-  return (
-    // margin-left is to prevent layout jumping when scrollbar appears/disappears
-    /* @__PURE__ */ a.jsx("header", { className: "fixed top-0 z-10 bg-background/80 backdrop-blur left-0 right-0 2xl:ml-[--scrollbar-width]", children: /* @__PURE__ */ a.jsxs("div", { className: "max-w-screen-2xl mx-auto", children: [
-      /* @__PURE__ */ a.jsxs("div", { className: "grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]", children: [
-        /* @__PURE__ */ a.jsx("div", { className: "flex", children: /* @__PURE__ */ a.jsx(Ge, { to: "/", children: /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3.5", children: [
-          (l == null ? void 0 : l.logo) && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-            /* @__PURE__ */ a.jsx(
-              "img",
-              {
-                src: l.logo.src.light,
-                alt: l.logo.alt ?? l.pageTitle,
-                style: { width: l.logo.width },
-                className: b("h-10", n && "hidden"),
-                loading: "lazy"
-              }
-            ),
-            /* @__PURE__ */ a.jsx(
-              "img",
-              {
-                src: l.logo.src.dark,
-                alt: l.logo.alt ?? l.pageTitle,
-                style: { width: l.logo.width },
-                className: b("h-10", !n && "hidden"),
-                loading: "lazy"
-              }
-            )
+  return /* @__PURE__ */ a.jsx("header", { className: "sticky top-0 z-10 bg-background/80 backdrop-blur w-full", children: /* @__PURE__ */ a.jsxs("div", { className: "max-w-screen-2xl mx-auto", children: [
+    /* @__PURE__ */ a.jsxs("div", { className: "grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]", children: [
+      /* @__PURE__ */ a.jsx("div", { className: "flex", children: /* @__PURE__ */ a.jsx(Ge, { to: "/", children: /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3.5", children: [
+        (l == null ? void 0 : l.logo) && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+          /* @__PURE__ */ a.jsx(
+            "img",
+            {
+              src: l.logo.src.light,
+              alt: l.logo.alt ?? l.pageTitle,
+              style: { width: l.logo.width },
+              className: b("h-10", n && "hidden"),
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            "img",
+            {
+              src: l.logo.src.dark,
+              alt: l.logo.alt ?? l.pageTitle,
+              style: { width: l.logo.width },
+              className: b("h-10", !n && "hidden"),
+              loading: "lazy"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a.jsx("span", { className: "font-bold text-2xl text-foreground/85 tracking-wide", children: l == null ? void 0 : l.pageTitle })
+      ] }) }) }),
+      /* @__PURE__ */ a.jsxs("div", { className: "grid grid-cols-[--sidecar-grid-cols] items-center gap-8", children: [
+        /* @__PURE__ */ a.jsx("div", { className: "w-full justify-center flex", children: /* @__PURE__ */ a.jsx(gs, {}) }),
+        /* @__PURE__ */ a.jsxs("div", { className: "items-center justify-self-end text-sm hidden lg:flex gap-2", children: [
+          /* @__PURE__ */ a.jsx(se, { name: "head-navigation-start" }),
+          i && !o ? /* @__PURE__ */ a.jsx($e, { variant: "ghost", onClick: () => t.login(), children: "Login" }) : p.length > 0 && /* @__PURE__ */ a.jsxs(ls, { modal: !1, children: [
+            /* @__PURE__ */ a.jsx(ds, { asChild: !0, children: /* @__PURE__ */ a.jsx($e, { variant: "ghost", children: s != null && s.email ? `${s.email}` : "My Account" }) }),
+            /* @__PURE__ */ a.jsxs(zn, { className: "w-56", children: [
+              /* @__PURE__ */ a.jsx(Yn, { children: "My Account" }),
+              /* @__PURE__ */ a.jsx(Xn, {}),
+              p
+            ] })
           ] }),
-          /* @__PURE__ */ a.jsx("span", { className: "font-bold text-2xl text-foreground/85 tracking-wide", children: l == null ? void 0 : l.pageTitle })
-        ] }) }) }),
-        /* @__PURE__ */ a.jsxs("div", { className: "grid grid-cols-[--sidecar-grid-cols] items-center gap-8", children: [
-          /* @__PURE__ */ a.jsx("div", { className: "w-full justify-center flex", children: /* @__PURE__ */ a.jsx(gs, {}) }),
-          /* @__PURE__ */ a.jsxs("div", { className: "items-center justify-self-end text-sm hidden lg:flex gap-2", children: [
-            /* @__PURE__ */ a.jsx(se, { name: "head-navigation-start" }),
-            i && !o ? /* @__PURE__ */ a.jsx($e, { variant: "ghost", onClick: () => t.login(), children: "Login" }) : p.length > 0 && /* @__PURE__ */ a.jsxs(ls, { modal: !1, children: [
-              /* @__PURE__ */ a.jsx(ds, { asChild: !0, children: /* @__PURE__ */ a.jsx($e, { variant: "ghost", children: s != null && s.email ? `${s.email}` : "My Account" }) }),
-              /* @__PURE__ */ a.jsxs(zn, { className: "w-56", children: [
-                /* @__PURE__ */ a.jsx(Yn, { children: "My Account" }),
-                /* @__PURE__ */ a.jsx(Xn, {}),
-                p
-              ] })
-            ] }),
-            /* @__PURE__ */ a.jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": n ? "Switch to light mode" : "Switch to dark mode",
-                className: "cursor-pointer hover:bg-secondary p-2.5 -m-2.5 rounded-full",
-                onClick: r,
-                children: /* @__PURE__ */ a.jsx(d, { size: 18 })
-              }
-            ),
-            /* @__PURE__ */ a.jsx(se, { name: "head-navigation-end" })
-          ] })
+          /* @__PURE__ */ a.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": n ? "Switch to light mode" : "Switch to dark mode",
+              className: "cursor-pointer hover:bg-secondary p-2.5 -m-2.5 rounded-full",
+              onClick: r,
+              children: /* @__PURE__ */ a.jsx(d, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ a.jsx(se, { name: "head-navigation-end" })
         ] })
-      ] }),
-      /* @__PURE__ */ a.jsx(vs, {})
-    ] }) })
-  );
+      ] })
+    ] }),
+    /* @__PURE__ */ a.jsx(vs, {})
+  ] }) });
 }), Zn = {
   Header: Jn
 }, xs = Ot(Zn), ys = xs.Provider, ws = (e) => {
@@ -2202,7 +2199,7 @@ const Ss = ({
     className: b(
       "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
       "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
-      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+      "w-[--side-nav-width] h-full scroll-pt-2 gap-2",
       t
     ),
     ref: r,
@@ -2239,18 +2236,19 @@ const Es = () => {
       (r == null ? void 0 : r.favicon) && /* @__PURE__ */ a.jsx("link", { rel: "icon", href: r.favicon })
     ] }),
     /* @__PURE__ */ a.jsx(Jn, {}),
-    /* @__PURE__ */ a.jsx("div", { className: "max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full", children: /* @__PURE__ */ a.jsxs(
+    /* @__PURE__ */ a.jsx("div", { className: "w-full max-w-screen-2xl mx-auto px-10 lg:px-12", children: /* @__PURE__ */ a.jsxs(
       Ft,
       {
-        fallback: /* @__PURE__ */ a.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ a.jsx(ha, {}) }),
+        fallback: /* @__PURE__ */ a.jsx("main", { className: "grid h-full place-items-center", children: /* @__PURE__ */ a.jsx(ha, {}) }),
         children: [
           /* @__PURE__ */ a.jsx(Es, {}),
           /* @__PURE__ */ a.jsxs(
             "main",
             {
               className: b(
-                "dark:border-white/10 translate-x-0 h-full",
+                "dark:border-white/10 translate-x-0",
                 "lg:overflow-visible",
+                // This works in tandem with the `SidebarWrapper` component
                 "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
                 "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12"
               ),