import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
import { n as h, k as useState, f as useEffect } from './dom-context-hooks.module-50442785.js';
import { i as isDemo, k as kn, H } from './index.module-b23fdad8.js';
import { c as cjs } from './cjs-bdfb4486.js';
import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2b66457a.js';

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

export { NavigationSidebar as sqm_navigation_sidebar };
