mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
5bebd3de4d
- Add @isa/core/logging to services and components with actions - Add comprehensive JSDoc documentation with @example blocks - Fix typo: TabsCollabsedService → TabsCollapsedService - Add error handling with try/catch for async operations - Add tap operator for logging in NetworkStatusService
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
computed,
|
|
inject,
|
|
} from '@angular/core';
|
|
import { logger } from '@isa/core/logging';
|
|
import { isaActionClose, isaNavigationSidemenu } from '@isa/icons';
|
|
import { NavigationService } from '@isa/shell/common';
|
|
import {
|
|
IconButtonComponent,
|
|
IconButtonColor,
|
|
IconButtonSize,
|
|
} from '@isa/ui/buttons';
|
|
import { provideIcons } from '@ng-icons/core';
|
|
|
|
/**
|
|
* Navigation toggle button (hamburger menu) for tablet/mobile layouts.
|
|
*
|
|
* Toggles the sidebar navigation visibility. The icon changes between
|
|
* a hamburger menu icon (closed) and close icon (open) based on state.
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <shell-navigation-toggle />
|
|
* ```
|
|
*/
|
|
@Component({
|
|
selector: 'shell-navigation-toggle',
|
|
template: `<ui-icon-button
|
|
[name]="iconName()"
|
|
[color]="IconButtonColor.Primary"
|
|
[size]="IconButtonSize.Large"
|
|
(click)="toggle()"
|
|
data-what="button"
|
|
data-which="navigation-toggle"
|
|
[attr.aria-label]="ariaLabel()"
|
|
[attr.aria-expanded]="navigationService.get()"
|
|
/>`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [IconButtonComponent],
|
|
providers: [provideIcons({ isaNavigationSidemenu, isaActionClose })],
|
|
})
|
|
export class ShellNavigationToggleComponent {
|
|
#logger = logger({ component: 'ShellNavigationToggleComponent' });
|
|
|
|
/** Navigation service for controlling sidebar visibility. */
|
|
readonly navigationService = inject(NavigationService);
|
|
|
|
readonly IconButtonColor = IconButtonColor;
|
|
readonly IconButtonSize = IconButtonSize;
|
|
|
|
/** Computed icon name based on navigation state. */
|
|
iconName = computed(() => {
|
|
const open = this.navigationService.get();
|
|
return open ? 'isaActionClose' : 'isaNavigationSidemenu';
|
|
});
|
|
|
|
/** Computed ARIA label for accessibility. */
|
|
ariaLabel = computed(() =>
|
|
this.navigationService.get() ? 'Menü schließen' : 'Menü öffnen',
|
|
);
|
|
|
|
/** Toggles the navigation sidebar visibility. */
|
|
toggle(): void {
|
|
this.navigationService.toggle();
|
|
this.#logger.debug('Navigation toggled', () => ({
|
|
isOpen: this.navigationService.get(),
|
|
}));
|
|
}
|
|
}
|