import { jsxs as o, jsx as t } from "react/jsx-runtime";
import { Typography as x } from "@mui/material";
import n from "clsx";
import { styled as b } from "../../Theme/index.js";
import { NavLink as c } from "./external-link.js";
function d(e, i) {
  if (e.children?.length)
    return h(e, i);
  const { url: a, icon: r, title: p, showBadge: s, external: l, active: u } = e;
  return /* @__PURE__ */ t("li", { className: "layout-sidebar-item", children: /* @__PURE__ */ o(
    c,
    {
      external: l,
      to: a,
      className: ({ isActive: g }) => n("layout-sidebar-link", { "layout-sidebar-link--active": l ? u : g }),
      children: [
        r && /* @__PURE__ */ t("span", { className: `layout-sidebar-icon ${s ? "layout-sidebar-badge" : ""}`, children: r }),
        /* @__PURE__ */ t(x, { component: "span", className: "layout-sidebar-link-text", children: p })
      ]
    }
  ) }, `${a}-${i}`);
}
function h(e, i) {
  return /* @__PURE__ */ o("li", { className: "layout-sidebar-group", children: [
    /* @__PURE__ */ t("span", { className: "layout-sidebar-group-title", children: e.title }),
    /* @__PURE__ */ t("ul", { children: e.children.map(d) })
  ] }, `group-${e.title}-${i}`);
}
function N({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
  return /* @__PURE__ */ o(y, { ...r, className: n({ "layout-sidebar-dense": a }), children: [
    /* @__PURE__ */ t("ul", { children: e.map(d) }),
    /* @__PURE__ */ t("div", { style: { flex: 1 } }),
    i
  ] });
}
const m = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", y = b("div")`
  display: flex;
  flex-direction: column;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .layout-sidebar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 24px;
    color: ${(e) => e.theme.palette.text.secondary};
    text-decoration: none;

    &:hover,
    &.layout-sidebar-link--active {
      color: ${(e) => e.theme.palette.primary.main};
      background: ${m};
      border-left-color: ${(e) => e.theme.palette.primary.main};
    }
  }
  .layout-sidebar-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    > img,
    > svg {
      width: 32px;
      height: 32px;
    }
  }
  .layout-sidebar-badge {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: #fe4e44;
      right: -2px;
      top: 0;
      box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.3),
        0px 0px 20px rgba(0, 0, 0, 0.1);
    }
  }
  .layout-sidebar-link-text {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: normal;
  }
  /* dense=false 时隐藏 group title */
  .layout-sidebar-group-title {
    display: none;
  }
  &.layout-sidebar-dense {
    box-sizing: border-box;
    padding: 20px 0;
    font-weight: bold;
    .layout-sidebar-item {
      padding: 0 16px;
    }
    .layout-sidebar-item + .layout-sidebar-item {
      margin-top: 1px;
    }
    .layout-sidebar-link {
      box-sizing: border-box;
      flex-direction: row;
      align-items: center;
      width: 100%;
      padding: 8px;
      &:hover,
      &.layout-sidebar-link--active {
        color: ${(e) => e.theme.palette.grey[900]};
        background: ${(e) => e.theme.palette.grey[100]};
        border: 0;
        border-radius: 4px;
      }
    }
    .layout-sidebar-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      > img,
      > svg {
        width: 20px;
        height: 20px;
      }
    }
    .layout-sidebar-badge {
      &:after {
        width: 6px;
        height: 6px;
        border-radius: 6px;
        right: -2px;
        top: 0;
      }
    }
    .layout-sidebar-link-text {
      margin-top: 0;
      font-size: 14px;
      line-height: 1;
    }
    .layout-sidebar-group {
      color: ${(e) => e.theme.palette.text.hint};
      .layout-sidebar-group-title {
        display: inline-block;
        padding: 8px 0 8px 24px;
        font-size: 13px;
        text-transform: uppercase;
      }
    }
    .layout-sidebar-group + .layout-sidebar-group,
    .layout-sidebar-group + .layout-sidebar-item,
    .layout-sidebar-item + .layout-sidebar-group {
      margin-top: 16px;
    }
  }
`;
export {
  N as default
};
