'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
const index_module = require('./index.module-f8c8495f.js');
const cjs = require('./cjs-1066ec21.js');
const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-6616e3e0.js');

const NavigationSidebar = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ignored = true;
    /**
     * @uiName Text color
     * @uiWidget color
     * @format color
     * @uiGroup Style
     */
    this.mobileMenuColor = "var(--sqm-text, #444445)";
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const props = index_module.isDemo()
      ? useDemoNavigationSidebar(this)
      : useNavigationSidebar(this);
    return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, props), index.h("slot", null)));
  }
};
function useNavigationSidebar(props) {
  const location = index_module.kn();
  const programId = index_module.H();
  const [checked, setChecked] = domContextHooks_module.useState(false);
  // Close hamburger menu after navigation
  domContextHooks_module.useEffect(() => {
    setChecked(false);
  }, [location.pathname, programId]);
  function onClick(e) {
    setChecked(e.target.checked);
  }
  return {
    mobileMenuColor: props.mobileMenuColor,
    checked,
    onClick,
  };
}
function useDemoNavigationSidebar(props) {
  return cjs.cjs({
    mobileMenuColor: props.mobileMenuColor,
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}

exports.sqm_navigation_sidebar = NavigationSidebar;
