"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
;/* empty css                                                                                                                                                                                           */
;/* empty css                                                                                                                                                                                            */
;/* empty css                                                                                                                                                                                                    */
;/* empty css                                                                                                                                                                                               */
;/* empty css                                                                                                                                                                                               */
const clsx = require("clsx");
const styles = require("../../../utils/styles.cjs");
const Box = require("../../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/core/Box/Box.cjs");
const DEFAULT_NAVBAR_Z_INDEX = 10;
const Navbar = ({ withBorder, zIndex, hidden = false, className, mod, sx, ...rest }) => {
  return /* @__PURE__ */ jsxRuntime.jsx(
    Box.Box,
    {
      className: "tiui-app-shell-navbar-wrapper",
      mod: [{ "navbar-hidden": hidden }],
      sx: {
        flexShrink: 0,
        height: "100%",
        position: "relative",
        zIndex: zIndex ?? DEFAULT_NAVBAR_Z_INDEX,
        width: `var(--app-shell-navbar-width)`,
        transitionProperty: "width",
        transitionDuration: "var(--app-shell-transition-duration, 200ms)",
        transitionTimingFunction: "var(--app-shell-transition-timing-function, ease)",
        "&:where([data-navbar-hidden])": {
          width: 0
        }
      },
      children: /* @__PURE__ */ jsxRuntime.jsx(
        Box.Box,
        {
          component: "nav",
          ...rest,
          className: clsx.clsx(className, "tiui-app-shell-navbar"),
          mod: [{ "with-border": withBorder }, mod],
          sx: styles.mergeSxList([
            (theme) => ({
              backgroundColor: theme.colors.carbon[2],
              display: "flex",
              flexDirection: "column",
              height: "100%",
              width: `var(--app-shell-navbar-width)`,
              transitionProperty: "transform",
              transitionDuration: "var(--app-shell-transition-duration, 200ms)",
              transitionTimingFunction: "var(--app-shell-transition-timing-function, ease)",
              transform: hidden ? "translateX(-100%)" : "none",
              "&:where([data-with-border])": {
                borderRight: `1px solid ${theme.colors.carbon[3]}`
              }
            }),
            sx
          ])
        }
      )
    }
  );
};
exports.Navbar = Navbar;
