@anoki/fse-ui/dist/index.es318.js

FSE UI components library

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