39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<div id="layout" [class.mobile]="breakpoint() != 'desktopLarge'">
|
|
@if (breakpoint() == "desktopLarge" || selectedOption == "") {
|
|
<aside>
|
|
<header>
|
|
<tui-icon icon="@tui.cog"/>
|
|
<h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>
|
|
|
|
@if (breakpoint() != "mobile") {
|
|
<button tuiButtonX (click)="close.emit()"></button>
|
|
}
|
|
</header>
|
|
|
|
<div id="options">
|
|
@for (option of options; track option) {
|
|
<button [disabled]="!option.implemented" tuiButton [iconStart]="'@tui.'+option.icon" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" (click)="selectedOption = option.name">
|
|
{{"chat.userSettingsDialog.options."+option.name|translate}}
|
|
</button>
|
|
}
|
|
</div>
|
|
</aside>
|
|
}
|
|
|
|
@if (breakpoint() == "desktopLarge" || selectedOption != "") {
|
|
<main>
|
|
@if (breakpoint() != "desktopLarge") {
|
|
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
<button tuiButton appearance="flat" iconStart="@tui.arrow-left" (click)="selectedOption = ''"></button>
|
|
<h3>{{"chat.userSettingsDialog.options."+selectedOption|translate}}</h3>
|
|
</div>
|
|
}
|
|
@switch (selectedOption) {
|
|
@case ("security") {
|
|
<user-settings-security/>
|
|
}
|
|
}
|
|
</main>
|
|
}
|
|
</div>
|