From c17b608188908c6f3a7ec09ef725a53ae3920914 Mon Sep 17 00:00:00 2001
From: RakVhalate <viktzajcev@mail.ru>
Date: Sun, 4 Dec 2022 13:01:27 +1000
Subject: [PATCH] Buttons and sidebar toggle

---
 src/app/app.component.css  |  7 +++++++
 src/app/app.component.html | 10 +++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 0a96972..b977353 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -14,6 +14,13 @@
   border: 1px solid rgba(25, 116, 211, 0.5);
 
 }
+
+.btn-sidebar-close{
+  float: right;
+  font-size: 45px;
+  font-weight: 600;
+}
+
 .navToggle-btn {
   height: 40px;
   color: #fff;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 89c85bc..ea4a902 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,13 +1,17 @@
 <div>
   <h1>Welcome, traveler.</h1>
-  <mat-drawer-container class="main-container" [autosize]="true">
-    <mat-drawer #drawer class="sidenav" mode="side" [mode]="'push'">
+  <mat-drawer-container class="main-container" [autosize]="true" [hasBackdrop]="false">
+    <mat-drawer #drawer class="sidenav" mode="side" [mode]="'push'" [opened]="true" >
+      <span class="btn-sidebar-close"  (click)="drawer.toggle()">
+        &times;
+      </span >
       <app-nav-bar></app-nav-bar>
     </mat-drawer>
     <div class="sidenav-content">
-      <button type="button" class = "navToggle-btn btn-14" (click)="drawer.toggle()">
+      <button *ngIf="!drawer.opened" type="button" class = "navToggle-btn btn-14" (click)="drawer.toggle()">
         Отобразить панель навигации
       </button>
+      <br>
       <router-outlet></router-outlet>
     </div>
   </mat-drawer-container>