82 lines
2.3 KiB
Plaintext
82 lines
2.3 KiB
Plaintext
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';
|
|
import SearchBox from '#components/search-box';
|
|
import CategoryChips from '#components/category-chips';
|
|
|
|
export default class AppHeaderComponent extends Component {
|
|
@service storage;
|
|
@tracked isUserMenuOpen = false;
|
|
@tracked hasQuery = false;
|
|
|
|
@action
|
|
toggleUserMenu() {
|
|
this.isUserMenuOpen = !this.isUserMenuOpen;
|
|
}
|
|
|
|
@action
|
|
closeUserMenu() {
|
|
this.isUserMenuOpen = false;
|
|
}
|
|
|
|
@action
|
|
handleQueryChange(query) {
|
|
this.hasQuery = !!query;
|
|
}
|
|
|
|
@action
|
|
handleChipSelect() {
|
|
// When a chip is selected, we might want to ensure the search box is cleared visually,
|
|
// although the route transition will happen.
|
|
// The SearchBox component manages its own state, so we rely on the route transition.
|
|
// However, if we want to clear the search box input from here, we'd need to control it.
|
|
// For now, let's just let the route change happen.
|
|
}
|
|
|
|
<template>
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<SearchBox
|
|
@onToggleMenu={{@onToggleMenu}}
|
|
@onQueryChange={{this.handleQueryChange}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="header-center {{if this.hasQuery 'searching'}}">
|
|
<CategoryChips @onSelect={{this.handleChipSelect}} />
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="user-menu-container">
|
|
<button
|
|
class="user-btn btn-press"
|
|
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>
|
|
}
|