<script>
    import {clickOutside} from "../../helpers.js";

    let dropdownMenu;
    export let orientation = "left";

    export function open() {
        dropdownMenu.classList.remove("hide")
    }

    export function close() {
        dropdownMenu.classList.add("hide")
    }

    function handleClickOutside() {
        dropdownMenu.classList.add("hide")
    }

</script>
<div class="dropdown">
    <button
            class="button dropdown-button"
            type="button"
            on:click={open}
            aria-expanded="false"
    >
        <slot name="button">Dropdown</slot>
    </button>
    <div bind:this={dropdownMenu} class="dropdown-menu hide orientation-{orientation}" use:clickOutside on:click_outside={handleClickOutside}>
        <slot/>
    </div>

</div>