added toggle for the dropdown menu to appear on the right
mellbacon committed
Apr 29, 2023 at 16:45 UTC
442226d8c8861f6939aa93a686bc63820143b773
2 files changed
+11
-4
src/lib/Header.svelte
+1
-1
@@ -68,7 +68,7 @@
68
<div class="tools">
69
70
<div class="settings">
71
- <Dropdown menu={{icon: Settings, children: [{name: "Settings", shortcut: "", action: () => {console.log("click")}}, {name: "Keymap", shortcut: "", action: () => {console.log("click")}}]}} />
71
+ <Dropdown right menu={{icon: Settings, children: [{name: "Settings", shortcut: "", action: () => {console.log("click")}}, {name: "Keymap", shortcut: "", action: () => {console.log("click")}}]}} />
72
</div>
73
</div>
74
<div id="window-controls">
src/lib/utility/Dropdown.svelte
+10
-3
@@ -2,16 +2,23 @@
2
import { afterUpdate } from 'svelte';
3
export let menu;
4
5
+ export let right = false;
6
+
7
let button = null;
8
let dropdownList = null;
9
let open = false;
10
11
afterUpdate(() => {
12
if (open && dropdownList) {
11
- const { height , left } = button.getBoundingClientRect();
13
+ const { height , left, width } = button.getBoundingClientRect();
14
dropdownList.style.top = `${height}px`;
13
- dropdownList.style.left = `${left}px`;
14
- // TODO: make toggle for showing dropdown on the right of the button
15
+ if (right) {
16
+ dropdownList.style.right = `calc(100% - ${left + width}px`;
17
+ dropdownList.style.left = `auto`;
18
+ }
19
+ else {
20
+ dropdownList.style.left = `${left}px`;
21
+ }
22
}
23
})
24
</script>