46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
// Path: Frontend/src/components/Dropdown.tsx
|
|
|
|
import { createSignal, createUniqueId, Show, type JSX, type ParentComponent } from "solid-js";
|
|
import { Portal } from "solid-js/web";
|
|
import styles from "./Dropdown.module.scss";
|
|
|
|
interface DropdownProps {
|
|
trigger: (props: { toggle: (e: MouseEvent) => void; isOpen: boolean }) => JSX.Element;
|
|
children: JSX.Element;
|
|
align?: "left" | "right";
|
|
}
|
|
|
|
const Dropdown: ParentComponent<DropdownProps> = (props) => {
|
|
const [isOpen, setIsOpen] = createSignal(false);
|
|
|
|
const anchorName = `--anchor-${createUniqueId()}`;
|
|
|
|
const toggle = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsOpen(!isOpen());
|
|
};
|
|
|
|
const close = () => setIsOpen(false);
|
|
|
|
return (
|
|
<>
|
|
<div class={styles.triggerWrapper} style={{ "--anchor-name": anchorName }}>
|
|
{props.trigger({ toggle, isOpen: isOpen() })}
|
|
</div>
|
|
|
|
<Show when={isOpen()}>
|
|
<Portal>
|
|
<div class={styles.backdrop} onClick={close} />
|
|
|
|
<div class={`${styles.menu} ${props.align === "left" ? styles.left : styles.right}`} style={{ "--anchor-target": anchorName }} onClick={close}>
|
|
{props.children}
|
|
</div>
|
|
</Portal>
|
|
</Show>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Dropdown;
|