filters and sidebar

front/js/svelte/common/Dropdown.svelte

@@ -1,23 +1,29 @@
 <script>
+    import {clickOutside} from "../../helpers.js";
+
+    let dropdownMenu;
+    export let orientation = "left";
+
+    export function open() {
+        dropdownMenu.classList.remove("hide")
+    }
+
+    function handleClickOutside() {
+        dropdownMenu.classList.add("hide")
+    }
 
-export let width = "300";
-let dropdownMenu;
-export function hide(){
-    dropdownMenu.classList.remove("show")
-}
 </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>
 
-<button
-
-        class="btn btn-sm btn-outline-primary dropdown-toggle d-flex align-items-center"
-        type="button"
-        data-bs-toggle="dropdown"
-        data-bs-auto-close="outside"
-        aria-expanded="false"
->
-    <slot name="button">Dropdown</slot>
-</button>
-<div bind:this={dropdownMenu} class="dropdown-menu" style="width:{width}px;">
-    <slot/>
-</div>
-
+</div>