Finished implementing user settings -> security

src/app/chat/user-settings/user-settings.html

@@ -1,24 +1,38 @@
-<aside>
-  <header>
-    <tui-icon icon="@tui.cog"/>
-    <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>
+<div id="layout" [class.mobile]="breakpoint() != 'desktopLarge'">
+  @if (breakpoint() == "desktopLarge" || selectedOption == "") {
+    <aside>
+      <header>
+        <tui-icon icon="@tui.cog"/>
+        <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>
 
-    <button tuiButtonX></button>
-  </header>
+        @if (breakpoint() != "mobile") {
+          <button tuiButtonX (click)="close.emit()"></button>
+        }
+      </header>
 
-  <div id="options">
-    @for (option of options; track option) {
-      <button tuiButton [iconStart]="'@tui.'+option.icon" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" (click)="selectedOption = option.name">
-        {{"chat.userSettingsDialog.options."+option.name|translate}}
-      </button>
-    }
-  </div>
-</aside>
-
-<main>
-  @switch (selectedOption) {
-    @case ("security") {
-      <user-settings-security/>
-    }
+      <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>
   }
-</main>
+
+  @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>