Creation of side-menu.

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

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DisplayableCategory, SideMenuService } from './side-menu.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-side-menu',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './side-menu.component.html',
+  styleUrl: './side-menu.component.scss'
+})
+export class SideMenuComponent {
+  private sideMenuService = inject(SideMenuService);
+
+  get categories$(): Observable<DisplayableCategory[]> {
+    return this.sideMenuService.categories$;
+  }
+
+  setOpenned(category: DisplayableCategory): void {
+    if (category.isOpenned) {
+      const categoryDiv = document.getElementById(`category-${category.id}`);
+      if (categoryDiv) {
+        this.closeAccordion(categoryDiv);
+      }
+    } else {
+      const categoriesDivs = document.getElementsByClassName('category-header');
+      Array.from(categoriesDivs)
+        .map(category => category as HTMLElement)  
+        .forEach(categoryDiv => this.closeAccordion(categoryDiv));
+      
+        const categoryDiv = document.getElementById(`category-${category.id}`);
+      if (categoryDiv) {
+        this.openAccordion(categoryDiv);
+      }
+    }
+
+    this.sideMenuService.setOpenned(category);
+  }
+
+  private closeAccordion(categoryDiv: HTMLElement): void {
+    const divContent = categoryDiv?.nextElementSibling as HTMLElement;
+    divContent.style.maxHeight = '0';
+  }
+
+  private openAccordion(categoryDiv: HTMLElement): void {
+    const divContent = categoryDiv?.nextElementSibling as HTMLElement;
+    divContent.style.maxHeight = `${divContent.scrollHeight}px`;
+  }
+}