Convert observables to signals.

frontend/src/app/components/side-menu/side-menu.component.html

@@ -1,4 +1,4 @@
-<div class="menu {{ isOpenned ? 'displayed' : '' }}">
+<div class="menu {{ isOpened ? 'displayed' : '' }}">
     <h1>
         <a [routerLink]="['/home']">
             <img src="assets/images/codiki.png" alt="logo"/>
@@ -16,4 +16,4 @@
     <h2 i18n>Categories</h2>
     <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
 </div>
-<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>
+<div class="overlay {{ isOpened ? 'displayed' : ''}}" (click)="close()"></div>

frontend/src/app/components/side-menu/side-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, signal} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
@@ -18,13 +18,13 @@ import { MatRippleModule } from '@angular/material/core';
     ]
 })
 export class SideMenuComponent {
-  isOpenned: boolean = false;
+  isOpened = signal(false);
 
   open(): void {
-    this.isOpenned = true;
+    this.isOpened.set(true);
   }
 
   close(): void {
-    this.isOpenned = false;
+    this.isOpened.set(false);
   }
 }

frontend/src/app/components/submit-button/submit-button.component.html

@@ -1,12 +1,12 @@
 <button type="submit"
-        class="cod-button {{color}}"
-        [disabled]="disabled || requestPending"
+        class="cod-button {{color()}}"
+        [disabled]="disabled() || requestPending()"
         (click)="click.emit()"
         matRipple>
-    @if (requestPending) {
-        <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
+    @if (requestPending()) {
+        <mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
     }
     <span>
         <ng-content/>
     </span>
-</button>
+</button>

frontend/src/app/components/submit-button/submit-button.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import {Component, EventEmitter, input, Input, output, Output, signal} from "@angular/core";
 import { MatRippleModule } from "@angular/material/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
@@ -13,10 +13,9 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 ]
 })
 export class SubmitButtonComponent {
-    @Input() requestPending: boolean = false;
-    @Input() label: string = '';
-    @Input() disabled: boolean = false;
-    @Input() color?: 'secondary';
-    @Output() click = new EventEmitter<void>();
+    requestPending = input.required<boolean>();
+    label = input<string>();
+    disabled = input.required<boolean>();
+    color = input<'secondary' | undefined>('secondary');
+    click = output<void>();
   }
-