Add side menu for header.

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

@@ -1,52 +1,83 @@
 :host {
-    display: flex;
-    flex-direction: column;
-
-    .categories-container {
+    .menu {
         display: flex;
         flex-direction: column;
+        background-color: #3f51b5;
+        color: white;
 
-        .category {
-            border: 1px solid blue;
+        $categoriesMenuWidth: 20em;
+        position: fixed;
+        top: 0;
+        left: -$categoriesMenuWidth - 1em - 1;
+        bottom: 0;
+        transition: left .2s ease-in-out;
+        width: $categoriesMenuWidth;
+        z-index: 2;
+        padding: 1em 0;
 
-            &:hover {
-                cursor: pointer;
-            }
+        &.displayed {
+            left: 0;
+        }
 
-            .category-header {
+        h1 {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 1em;
+
+            span {
                 display: flex;
                 flex-direction: row;
-                justify-content: space-between;
+                justify-content: start;
                 align-items: center;
-                padding: .5em 1em;
+                gap: .5em;
 
-                mat-icon {
-                    transition: transform .2s ease-in-out;
+                img {
+                    $imageSize: 1.2em;
+                    width: $imageSize;
+                    height: $imageSize;
                 }
             }
 
-            &.openned {
-                .category-header {
-                    mat-icon {
-                        transform: rotate(90deg);
-                    }
-                }
+            button {
+                border-radius: 10em;
+                border: none;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 2.5em;
+                height: 2.5em;
+                color: white;
+                background-color: #3f51b5;
+                transition: background-color .2s ease-in-out;
 
-                .sub-category-container {
-                    max-height: none;
-                }
-            }
-
-            .sub-category-container {
-                border: 1px solid red;
-                overflow: hidden;
-                max-height: 0;
-                transition: max-height .2s ease-in-out;
-    
-                .sub-category {
-                    padding: .5em 1em .5em 2em;
+                &:hover {
+                    cursor: pointer;
+                    background-color: #5c6bc0;
                 }
             }
         }
+
+        h2 {
+            padding: 0 1em;
+        }
     }
-}
+
+    .overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+        opacity: .2;
+
+        &.displayed {
+            display: block;
+        }
+    }
+}