Add dropdown component, photo actions menu

app/components/dropdown-menu.gjs

@@ -0,0 +1,53 @@
+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>
+}

app/components/photo-gallery.gjs

@@ -2,8 +2,9 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
-import Icon from './icon';
+import Icon from '#components/icon';
 import PhotoCarousel from './photo-carousel';
+import DropdownMenu from '#components/dropdown-menu';
 
 export default class PhotoGallery extends Component {
   @tracked currentPhoto = this.args.selectedPhoto || this.args.photos?.[0];
@@ -21,7 +22,8 @@ export default class PhotoGallery extends Component {
     if (
       e.target.closest('.thumbnail-strip-container') ||
       e.target.closest('.carousel-nav-btn') ||
-      e.target.closest('.close-btn')
+      e.target.closest('.close-btn') ||
+      e.target.closest('.actions-btn-container')
     ) {
       return;
     }
@@ -50,6 +52,21 @@ export default class PhotoGallery extends Component {
     >
       {{! template-lint-disable no-invalid-interactive }}
       <div class="photo-gallery-content">
+        <div class="actions-btn-container">
+          <DropdownMenu @iconSize={{24}} @triggerIcon="more-horizontal" @iconColor="white" as |closeMenu|>
+            <button
+              class="dropdown-item"
+              type="button"
+              {{on "click" closeMenu}}
+            >Copy Raw Event Data</button>
+            <button
+              class="dropdown-item"
+              type="button"
+              {{on "click" closeMenu}}
+            >Report Photo</button>
+          </DropdownMenu>
+        </div>
+
         <button
           type="button"
           class="close-btn btn-text"