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

FSE UI components library

import { j as e } from "./index.es237.js";
import { Button as m } from "./index.es32.js";
import { HeaderTopBanner as y } from "./index.es12.js";
import { useState as g, useRef as w, useCallback as C, useEffect as u } from "react";
import { clsx as r } from "./index.es239.js";
import { useFocusTrap as N } from "./index.es471.js";
import { Container as k } from "./index.es65.js";
import './components/navigations/HeaderMobile/HeaderMobile.css';/* empty css            */
import { Col as L } from "./index.es61.js";
import { Hamburguer as E } from "./index.es206.js";
import { Row as z } from "./index.es116.js";
import { Close as M } from "./index.es179.js";
const G = ({
  shortTitle: h,
  menuTitle: p = "Menù",
  region: f,
  asLink: t = "a",
  navigatonItems: x,
  labels: l,
  loginLink: v = "/"
}) => {
  const b = t, [i, d] = g(!1), o = "main-navigation", c = w(null);
  N(c, i);
  const s = C(() => {
    d(!i);
  }, [i]);
  u(() => (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]), u(() => {
    const n = (a) => {
      a.key === "Escape" && i && s();
    };
    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
  }, [i, s]);
  const j = () => {
    d(!1);
  };
  return /* @__PURE__ */ e.jsxs("div", { className: "sticky-header shadow", children: [
    /* @__PURE__ */ e.jsx(
      y,
      {
        asLink: t,
        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",
                className: "ui-login-button-header-mobile",
                children: [
                  l.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: s,
                className: "ui-mobile-menu-toggle",
                "aria-controls": o,
                children: /* @__PURE__ */ e.jsx(E, { width: 40, height: 40, color: "white" })
              }
            )
          ] }),
          /* @__PURE__ */ e.jsxs(
            "nav",
            {
              id: o,
              "aria-label": "Menu di navigazione",
              className: r(i ? "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: s,
                      "aria-label": "Chiudi menu di navigazione",
                      "aria-controls": o,
                      children: [
                        l.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((n, a) => /* @__PURE__ */ e.jsx(
                  "li",
                  {
                    className: r(
                      "ui-mobile-nav-item",
                      n.active && "active"
                    ),
                    children: /* @__PURE__ */ e.jsxs(
                      b,
                      {
                        href: n.href,
                        className: r(
                          "text-decoration-none text-primary fs-5",
                          n.active ? "fw-bold" : "fw-normal"
                        ),
                        onClick: j,
                        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" })
                        ]
                      }
                    )
                  },
                  a
                )) })
              ]
            }
          )
        ]
      }
    )
  ] });
};
export {
  G as HeaderMobile
};
//# sourceMappingURL=index.es278.js.map