Add side menu for header.

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

@@ -1,51 +1,23 @@
-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';
+import {Component} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {CategoriesMenuComponent} from './categories-menu/categories-menu.component';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-side-menu',
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule],
   templateUrl: './side-menu.component.html',
   styleUrl: './side-menu.component.scss'
 })
 export class SideMenuComponent {
-  private sideMenuService = inject(SideMenuService);
+  isOpenned: boolean = false;
 
-  get categories$(): Observable<DisplayableCategory[]> {
-    return this.sideMenuService.categories$;
+  open(): void {
+    this.isOpenned = true;
   }
 
-  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`;
+  close(): void {
+    this.isOpenned = false;
   }
 }