Add user/accounts menu, RS connect

app/components/app-header.gjs

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+import UserMenu from '#components/user-menu';
+
+export default class AppHeaderComponent extends Component {
+  @service storage;
+  @tracked isUserMenuOpen = false;
+
+  @action
+  toggleUserMenu() {
+    this.isUserMenuOpen = !this.isUserMenuOpen;
+  }
+
+  @action
+  closeUserMenu() {
+    this.isUserMenuOpen = false;
+  }
+
+  <template>
+    <header class="app-header">
+      <div class="header-left">
+        <button class="icon-btn" type="button" aria-label="Menu">
+          <Icon @name="menu" @size={{24}} @color="#333" />
+        </button>
+      </div>
+
+      <div class="header-right">
+        <div class="user-menu-container">
+          <button
+            class="user-btn"
+            type="button"
+            aria-label="User Menu"
+            {{on "click" this.toggleUserMenu}}
+          >
+            <div class="user-avatar-placeholder">
+              <Icon @name="user" @size={{20}} @color="white" />
+            </div>
+          </button>
+
+          {{#if this.isUserMenuOpen}}
+            <UserMenu
+              @storage={{this.storage}}
+              @onClose={{this.closeUserMenu}}
+            />
+            <div
+              class="menu-backdrop"
+              {{on "click" this.closeUserMenu}}
+              role="button"
+            ></div>
+          {{/if}}
+        </div>
+      </div>
+    </header>
+  </template>
+}