import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite/ThemeContext";
import { useNavbarContext } from "./NavbarContext";
import { createMemo, mergeProps, splitProps, } from "solid-js";
export const NavbarCollapse = (p) => {
    const defaultProps = { theme: {} };
    const [local, props] = splitProps(mergeProps(defaultProps, p), ["class", "children", "theme"]);
    const theme = createMemo(() => mergeDeep(useTheme().theme.navbar.collapse, local.theme));
    const { isOpen } = useNavbarContext();
    return (<div class={classNames(theme().base, theme().hidden[!isOpen ? "on" : "off"], local.class)} data-testid="flowbite-navbar-collapse" {...props}>
      <ul class={theme().list}>{local.children}</ul>
    </div>);
};