RakVhalate/Angular_App
Archived
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Buttons and sidebar toggle
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
RakVhalate 2022-12-04 13:01:27 +10:00
parent 7b748f1ca2
commit c17b608188
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/app.component.css
View File

@ -14,6 +14,13 @@
border: 1px solid rgba(25, 116, 211, 0.5); border: 1px solid rgba(25, 116, 211, 0.5);
} }
.btn-sidebar-close{
float: right;
font-size: 45px;
font-weight: 600;
}
.navToggle-btn { .navToggle-btn {
height: 40px; height: 40px;
color: #fff; color: #fff;

10
src/app/app.component.html
View File

@ -1,13 +1,17 @@
<div> <div>
<h1>Welcome, traveler.</h1> <h1>Welcome, traveler.</h1>
<mat-drawer-container class="main-container" [autosize]="true"> <mat-drawer-container class="main-container" [autosize]="true" [hasBackdrop]="false">
<mat-drawer #drawer class="sidenav" mode="side" [mode]="'push'"> <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> <app-nav-bar></app-nav-bar>
</mat-drawer> </mat-drawer>
<div class="sidenav-content"> <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> </button>
<br>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</mat-drawer-container> </mat-drawer-container>