@anoki/fse-marche-ui/dist/index.es163.js

FSE UI components library

import { j as e } from "./index.es137.js";
import { Button as m } from "./index.es25.js";
import { HeaderTopBanner as y } from "./index.es21.js";
import { useState as g, useRef as w, useCallback as C, useEffect as u } from "react";
import { clsx as r } from "./index.es139.js";
import { useFocusTrap as N } from "./index.es242.js";
import { Container as k } from "./index.es6.js";
import './components/navigations/HeaderMobile/HeaderMobile.css';/* empty css            */
import { Col as L } from "./index.es10.js";
import { Hamburguer as E } from "./index.es78.js";
import { Row as z } from "./index.es9.js";
import { Close as M } from "./index.es79.js";
const q = ({
  shortTitle: h,
  menuTitle: p = "Menù",
  region: f,
  asLink: l = "a",
  navigatonItems: x,
  labels: t,
  loginLink: v = "/"
}) => {
  const b = l, [n, d] = g(!1), s = "main-navigation", c = w(null);
  N(c, n);
  const i = C(() => {
    d(!n);
  }, [n]);
  u(() => (n ? document.body.classList.add("ui-body-overflow-hidden") : document.body.classList.remove("ui-body-overflow-hidden"), () => {
    document.body.classList.remove("ui-body-overflow-hidden");
  }), [n]), u(() => {
    const a = (o) => {
      o.key === "Escape" && n && i();
    };
    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
  }, [n, i]);
  const j = () => {
    d(!1);
  };
  return /* @__PURE__ */ e.jsxs("div", { className: "sticky-header shadow", children: [
    /* @__PURE__ */ e.jsx(
      y,
      {
        asLink: l,
        shortTitle: h,
        region: f
      }
    ),
    /* @__PURE__ */ e.jsxs(
      k,
      {
        className: "bg-slate-20 min-h-x64 base-row align-items-center justify-content-end",
        as: "header",
        py: "x8",
        children: [
          /* @__PURE__ */ e.jsxs(z, { gap: "x24", alignItems: "center", justifyContent: "end", children: [
            /* @__PURE__ */ e.jsxs(
              m,
              {
                size: "3",
                bg: "white",
                textColor: "primary",
                href: v,
                asLink: "a",
                children: [
                  t.login,
                  /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: " Accedi con Cohesion" })
                ]
              }
            ),
            /* @__PURE__ */ e.jsx(
              "button",
              {
                "aria-expanded": n,
                "aria-label": "Apri menu di navigazione",
                onClick: i,
                className: "ui-mobile-menu-toggle",
                "aria-controls": s,
                children: /* @__PURE__ */ e.jsx(E, { width: 40, height: 40, color: "white" })
              }
            )
          ] }),
          /* @__PURE__ */ e.jsxs(
            "nav",
            {
              id: s,
              "aria-label": "Menu di navigazione",
              className: r(n ? "ui-mobile-nav-panel" : "visually-hidden"),
              ref: c,
              children: [
                /* @__PURE__ */ e.jsxs(L, { className: "ui-mobile-nav-header", children: [
                  /* @__PURE__ */ e.jsxs(
                    m,
                    {
                      size: "4",
                      textColor: "primary",
                      bg: "transparent",
                      onClick: i,
                      "aria-label": "Chiudi menu di navigazione",
                      "aria-controls": s,
                      children: [
                        t.closeMenu,
                        /* @__PURE__ */ e.jsx(M, {})
                      ]
                    }
                  ),
                  /* @__PURE__ */ e.jsx("h2", { className: "fs-3 text-slate-20", children: p })
                ] }),
                /* @__PURE__ */ e.jsx("ul", { className: "list-style-none p-x16", role: "list", children: x.map((a, o) => /* @__PURE__ */ e.jsx(
                  "li",
                  {
                    className: r(
                      "ui-mobile-nav-item",
                      a.active && "active"
                    ),
                    children: /* @__PURE__ */ e.jsxs(
                      b,
                      {
                        href: a.href,
                        "aria-label": `Vai alla pagina ${a.label}`,
                        className: r(
                          "text-decoration-none text-primary fs-5",
                          a.active ? "fw-bold" : "fw-normal"
                        ),
                        onClick: j,
                        target: a.isNewTab ? "_blank" : void 0,
                        rel: a.isNewTab ? "noopener noreferrer" : void 0,
                        children: [
                          a.label,
                          a.active && /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Attivo" })
                        ]
                      }
                    )
                  },
                  o
                )) })
              ]
            }
          )
        ]
      }
    )
  ] });
};
export {
  q as HeaderMobile
};
//# sourceMappingURL=index.es163.js.map