54 lines
1.2 KiB
Plaintext
54 lines
1.2 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { action } from '@ember/object';
|
|
import { on } from '@ember/modifier';
|
|
import Icon from '#components/icon';
|
|
|
|
export default class DropdownMenu extends Component {
|
|
@tracked isOpen = false;
|
|
|
|
@action
|
|
toggleMenu(e) {
|
|
e?.stopPropagation();
|
|
this.isOpen = !this.isOpen;
|
|
}
|
|
|
|
@action
|
|
closeMenu(e) {
|
|
e?.stopPropagation();
|
|
this.isOpen = false;
|
|
}
|
|
|
|
get triggerIcon() {
|
|
return this.args.triggerIcon || 'more-vertical';
|
|
}
|
|
|
|
<template>
|
|
<div class="dropdown-menu-container">
|
|
<button
|
|
class="dropdown-trigger-btn btn-press"
|
|
type="button"
|
|
title={{@triggerTitle}}
|
|
{{on "click" this.toggleMenu}}
|
|
>
|
|
<Icon
|
|
@name={{this.triggerIcon}}
|
|
@size={{@iconSize}}
|
|
@color={{@iconColor}}
|
|
/>
|
|
</button>
|
|
|
|
{{#if this.isOpen}}
|
|
<div class="dropdown-popover {{@popoverClass}}">
|
|
{{yield this.closeMenu}}
|
|
</div>
|
|
<div
|
|
class="menu-backdrop"
|
|
{{on "click" this.closeMenu}}
|
|
role="button"
|
|
></div>
|
|
{{/if}}
|
|
</div>
|
|
</template>
|
|
}
|