Update Angular files from source repository

src/app/pages/guest/document/document.component.html

@@ -1,6 +1,9 @@
-<div class="documents-wrapper">
+<div class="documents-wrapper" [class.documents-wrapper--open]="isMenuOpen"> 
     <div class="documents-container">
         <div class="documents-list">
+            <div class="burger-wrap" class="burger-wrap"  (click)="toggleMenu()">
+                <div class="burger" [class.burger--close]="isMenuOpen"></div>
+            </div> 
             <div class="documents-main">
                 <div class="documents-main-content">
                     <div class="documents-main-row">
@@ -143,7 +146,7 @@
                     </div>
                 </div>
             </div>
-            <div class="documents-sidebar">
+            <div class="documents-sidebar" [class.documents-sidebar--open]="isMenuOpen">
                 <div class="documents-sidebar-content">
                     <div class="documents-sidebar__img">
                         <img src="assets/default.png" alt="">
@@ -158,4 +161,5 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+

src/app/pages/guest/document/document.component.scss

@@ -1,139 +0,0 @@
-.documents{
-    &-wrapper{
-        overflow-y: scroll;
-        height: 100vh;
-        background: #282626;
-        color: #fff;
-    }
-    &-container{
-        max-width: 1260px;
-        width: 100%;
-        margin: 0 auto;
-        height: 100%;
-        padding: 0 15px;
-    }
-    &-list{
-        display: flex;
-        flex-flow: row wrap;
-    }
-    &-main{
-        flex: 1 0;
-        &-content{
-            padding: 15px;
-        }
-        &-row{
-            padding: 10px 20px;
-            background: #1c1b1b;
-            margin-bottom: 20px;
-            border-radius: 10px;
-        }
-    }
-    &-sidebar{
-        flex: 0 0 280px;
-        max-width: 280px;
-        background: #1c1b1b;
-        height: calc(100vh - 10px);
-        border-radius: 0 0 12px 12px;
-        position: sticky;
-        top: 0;
-        &-content{
-            padding: 15px;
-        }
-        &__img{
-            img{
-                width: 100px;
-                height: 100px;
-                object-fit: cover;
-                border-radius: 12px;
-            }
-        }
-        &__title{
-            font-weight: 600;
-            padding: 15px 0 5px 0;
-        }
-    }
-    &-tags{
-        display: flex;
-        flex-flow: row wrap;
-        padding-top: 10px;
-        &__wrap{
-            margin-right: 15px;
-            &:last-child{
-                margin-right: 0;
-            }
-        }
-        &__item{
-            background: #e0653f;
-            padding: 2px 5px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-        }
-    }
-    &-triggers{
-        display: flex;
-        flex-flow: row wrap;
-        &__wrap{
-            flex: 0 0 25%;
-            max-width: 25%;
-            padding: 0 10px;
-            display: flex;
-            margin-bottom: 20px;
-        }
-        &__item{
-            padding: 10px;
-            border-radius: 6px;
-            background: #000000;
-        }
-        &__img{
-            padding-bottom: 10px;
-            img{
-                width: 70px;
-                height: 70px;
-            }
-        }
-        &__title{
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-    }
-    &-wrap{
-        display: flex;
-        flex-flow: row wrap;
-        padding-top: 20px;
-    }
-    &-img{
-        flex: 0 0 300px;
-        img{
-            width: 100%;
-        }
-    }
-    &-text{
-        flex: 1 0;
-        padding-left: 40px;
-        &__title{
-            font-size: 20px;
-            font-weight: 600;
-        }
-    }
-    &__title{
-        font-size: 20px;
-        font-weight: 600;
-        padding-bottom: 10px;
-    }
-    &__btn{
-        max-width: 200px;
-        padding: 10px 0;
-        border-radius: 8px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: #e0653f;
-        color: #fff;
-        font-weight: 600;
-        transition: all .3s;
-        &:hover{
-            background-color: #ba593b;
-        }
-    }
-}

src/app/pages/guest/document/document.component.ts

@@ -5,4 +5,12 @@ import { Component } from '@angular/core';
 	styleUrls: ['./document.component.scss'],
 	standalone: false
 })
-export class DocumentComponent {}
+export class DocumentComponent {
+	isMenuOpen = false;
+
+	// Метод для переключення класів
+	toggleMenu(): void {
+	  this.isMenuOpen = !this.isMenuOpen;
+	  console.log('Menu Open: ', this.isMenuOpen);  // Перевірка значення
+	}
+}