"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
require("react");
const Icons = require("../components/Icons/Icons.js");
const useAppState = require("../lib/useAppState.js");
const emotionReactJsxRuntime_browser_esm = require("../node_modules/.pnpm/@emotion_react@11.10.4_q4mq7tnhdumujvomvw24zx33y4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");
const SideNav = ({
  children,
  name,
  icon,
  tag = true
}) => {
  const {
    Link,
    NavLink
  } = useAppState.useAppState();
  return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
    className: "relative w-full transition-all duration-300 ease-in-out transform-translate-x-full",
    children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
      className: "flex flex-col",
      children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
        className: "flex items-center justify-between",
        children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("h2", {
          className: "text-lg font-semibold tracking-widest text-gray-400 uppercase dark:text-coolGray-400",
          children: [icon && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("span", {
            className: `text-gray-400 mr-4`,
            children: typeof icon === "string" ? /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(Icons.Icons, {
              name: icon
            }) : icon
          }), name]
        }), tag && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
          className: "p-2 bg-gray-100",
          children: tag || children.length
        })]
      }), children && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
        className: "flex flex-col justify-between flex-1 mt-3 space-y-2",
        children: children == null ? void 0 : children.map((item, index) => item.name ? /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(Nav, {
          ...item,
          NavLink
        }, item.path) : /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("hr", {
          className: "border-gray-200 dark:border-gray-600"
        }, index))
      })]
    })
  });
};
const Nav = ({
  path,
  name,
  icon,
  label,
  className,
  NavLink,
  ...props
}) => {
  if (!NavLink)
    return null;
  return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(NavLink, {
    to: path || "/",
    className: ({
      isActive
    }) => `
                  ${isActive ? "bg-sky-50" : void 0}
                  ${className || ""} 
                  relative flex items-center px-4 py-2 text-gray-600 rounded-md dark:bg-gray-700 dark:text-gray-200
                `,
    children: ({
      isActive
    }) => /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs(emotionReactJsxRuntime_browser_esm.Fragment, {
      children: [icon && typeof icon === "string" ? /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(Icons.Icons, {
        name: icon,
        className: `${isActive ? "text-sky-600" : "text-gray-400"} inline-flex w-4 h-4`
      }) : /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("span", {
        className: `${isActive ? "text-sky-600" : ""} inline-flex w-4 h-4`,
        children: icon
      }), /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("span", {
        className: `${isActive ? "text-sky-600 font-bold" : void 0} ml-3`,
        children: name
      }), label && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("span", {
        className: "inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300",
        children: label
      })]
    })
  });
};
exports.SideNav = SideNav;
//# sourceMappingURL=SideNav.js.map
