Mobile view redesign#403/zubkov

src/app/app.component.html

@@ -1,5 +1,12 @@
+
 <div class="app-wrapper">
-  <app-header></app-header>
-  <app-shell></app-shell>
-  <app-footer></app-footer>
+
+  <mat-drawer-container>
+    <app-sidenav></app-sidenav>
+    <app-header></app-header>
+    <app-shell></app-shell>
+    <app-footer></app-footer>
+  </mat-drawer-container>
+
 </div>
+

src/app/app.component.scss

@@ -1,3 +1,4 @@
+
 .app-wrapper {
   min-height: 100%;
   position: relative;
@@ -8,4 +9,6 @@
   app-footer {
     display: none;
   }
-}
+}
+
+

src/app/app.component.spec.ts

@@ -1,19 +1,22 @@
-import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MatSidenavModule } from '@angular/material/sidenav';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        MatSidenavModule
       ],
       declarations: [
         AppComponent,
         MockHeaderComponent,
         MockShellComponent,
-        MockFooterComponent
+        MockFooterComponent,
+        MockSidenavComponent
       ],
     }).compileComponents();
   });
@@ -23,7 +26,7 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-  
+
 });
 @Component({
   selector: 'app-header',
@@ -41,4 +44,10 @@ class MockShellComponent{}
   selector: 'app-footer',
   template: ''
 })
-class MockFooterComponent{} 
+class MockFooterComponent{}
+
+@Component({
+  selector: 'app-sidenav',
+  template: ''
+})
+class MockSidenavComponent{}

src/app/app.component.ts

@@ -1,10 +1,14 @@
-import { Component } from '@angular/core';
+import { Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
+
 export class AppComponent {
   title = 'out-of-school';
+  constructor () {}
 }
+
+

src/app/header/header.component.html

@@ -29,7 +29,7 @@
       <div *ngIf="((isAuthorized$ | async) && (user$ | async)) then isAuthorized; else isUnauthorized"></div>
     </div>
   </div>
-  <div *ngIf="isRouter('/') then isMainPage;" class="header_wrapper"></div>
+    <div *ngIf="isRouter('/') then isMainPage;" class="header_wrapper"></div>
 </div>
 
 <ng-template #isMainPage>
@@ -45,6 +45,9 @@ <h2 class="header_descr">
 </ng-template>
 
 <ng-template #isUnauthorized>
+  <button mat-flat-button class="header_menu-button-mobile" (click)="changeView()">
+    <mat-icon>menu</mat-icon>
+  </button>
   <button mat-stroked-button class="header_login" (click)="login()">
     УВІЙТИ/ЗАРЕЄСТРУВАТИСЯ
   </button>
@@ -80,7 +83,7 @@ <h2 class="header_descr">
       </button>
     </span>
 
-    <button mat-flat-button class="header_menu-button-mobile" [matMenuTriggerFor]="log">
+    <button mat-flat-button class="header_menu-button-mobile" (click)="changeView()">
       <mat-icon>menu</mat-icon>
     </button>
 
@@ -96,8 +99,9 @@ <h2 class="header_descr">
       </button>
       <a [routerLink]="'./personal-cabinet/config'"><button mat-menu-item>Особиста
           інформація</button></a>
+
       <a [routerLink]="'./personal-cabinet/' + user.role + '/info'"> <button mat-menu-item>Інформація про
-          {{roles[user.role]}}</button></a>
+        {{roles[user.role]}}</button></a>
       <a [routerLink]="'./personal-cabinet/workshops'"><button mat-menu-item>Мої гуртки</button></a>
       <a [routerLink]="'./personal-cabinet/applications'"><button mat-menu-item>Мої заяви</button></a>
       <a [routerLink]="'./personal-cabinet/messages'"><button mat-menu-item>Повідомлення</button></a>
@@ -112,3 +116,4 @@ <h2 class="header_descr">
   <mat-progress-bar mode="indeterminate">
   </mat-progress-bar>
 </div>
+

src/app/header/header.component.scss

@@ -93,11 +93,13 @@
   &_title {
     margin-top: 70px;
     color: white;
+    text-align: center;
   }
 
   &_descr {
     color: rgba(255, 255, 255, 0.7);
     margin-top: 1rem;
+    text-align: center;
   }
 
   &_username {
@@ -203,6 +205,9 @@
     &_search {
       width: 100%;
     }
+    &_title{
+      text-align: center;
+    }
   }
 }
 
@@ -254,7 +259,11 @@
   }
 
   .header {
-    &_login, .mat-button-base {
+    &_login {
+      display: none;
+    }
+
+    .mat-button-base {
       width: auto;
       font-size: xx-small;
     }
@@ -266,11 +275,14 @@
     &_menu-button-mobile {
       color: white;
       display: block;
+      background-color: inherit;
+
 
       mat-icon {
         font-size: 30px;
         width: 30px;
         height: 30px;
+        margin-right: 15px;
       }
     }
 
@@ -326,6 +338,8 @@
 
 @media (max-width: 750px) {
   .header {
+    width: 100%;
+    padding: 0;
     &_logo-wrapper {
       height: 20px;
       .logo{
@@ -338,22 +352,25 @@
       justify-content: space-between;
     }
     &_top {
+      display: flex;
       flex-direction: row;
       align-items: center;
       position: fixed;
+      z-index: 998;
       width: 100%;
       box-sizing: border-box;
-      top: 0;
-      left: 0;
-      padding: 15px;
-      z-index: 999;
+      padding: 40px 0 15px 15px;
       background-color: #3849F9;
     }
     &_btns {
       flex-direction: column-reverse;
       align-items: flex-end;
       gap: 0;
     }
+    &_title{
+      margin-top: 120px;
+      text-align: center;
+    }
   }
 
   ::ng-deep .mat-menu-panel.header_menu {
@@ -366,10 +383,12 @@
 }
 @media (max-width: 415px) {
   .header {
+    padding: 0;
     &_title{
       font-size: 1.5rem;
       line-height: 2rem;
       text-align: center;
+      margin-top: 120px;
     }
     &_descr{
       text-align: center;
@@ -388,15 +407,18 @@
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
   .header{
-    padding: 1rem 2rem;
+    padding: 0;
+    &_title{
+      margin-top: 120px;
+    }
   }
 }
 
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px){
 .header_login[_ngcontent-upc-c122] {
-  padding: 1rem 2rem !important;
+  padding: 0 !important;
     font-size: 9px;
 }
 }

src/app/header/header.component.ts

@@ -11,13 +11,9 @@ import { FilterState } from '../shared/store/filter.state';
 import { NavigationState } from '../shared/store/navigation.state';
 import { UserState } from '../shared/store/user.state';
 import { Navigation } from '../shared/models/navigation.model';
-import { Role } from '../shared/enum/role';
+import { Role, RoleLinks } from '../shared/enum/role';
 import { Languages } from '../shared/enum/languages';
-
-enum RoleLinks {
-  provider = 'організацію',
-  parent = 'дитину'
-}
+import { SidenavToggle } from '../shared/store/navigation.actions';
 
 @Component({
   selector: 'app-header',
@@ -53,7 +49,11 @@ export class HeaderComponent implements OnInit {
   constructor(
     public store: Store,
     private router: Router) {
-    }
+  }
+
+  changeView() {
+    this.store.dispatch(new SidenavToggle());
+  }
 
   /**
    * @param event global variable window

src/app/shared/components/sidenav/sidenav.component.html

@@ -0,0 +1,92 @@
+<mat-drawer class="mobile-sidenav" mode="side" [(opened)]="visibleSidenav"> 
+
+  <div class="mobile-sidenav-content" *ngIf="MobileView">
+
+    <div *ngIf="((isAuthorized$ | async) && (user$ | async)) then isAuthorized; else isUnauthorized"></div>
+
+    <ng-template #isUnauthorized>
+      <div class="mobile-sidenav-header">
+        <button mat-stroked-button class="header_login" (click)="login()">
+          УВІЙТИ/ЗАРЕЄСТРУВАТИСЯ
+        </button>
+        <button mat-button (click)="changeView()"><mat-icon>close</mat-icon></button>
+      </div>
+      <div class="mobile-sidenav-language">
+        <button mat-flat-button>
+          <mat-icon class="mobile-sidenav-icon">language</mat-icon>
+          <mat-select (selectionChange)="setLanguage()" [(value)] = "selectedLanguage" class="lang-option">
+            <mat-option value="uk"> {{Languages.uk}} </mat-option>
+          </mat-select>
+        </button>
+      </div>
+    </ng-template>
+
+    <ng-template #isAuthorized>
+      <div class="mobile-sidenav-header">
+        <div>
+          <button mat-icon-button class="mobile-sidenav-account">
+            <mat-icon>account_circle</mat-icon>
+          </button>
+          <ng-container>{{user.firstName}} {{user.lastName}}</ng-container>
+        </div>
+        <button mat-button (click)="changeView()"><mat-icon>close</mat-icon></button>
+      </div>
+
+      <div class="mobile-sidenav-shell">
+        <div class="mobile-sidenav-notification">
+          <div class="mobile-sidenav-notification-items">
+            <button mat-icon-button [matMenuTriggerFor]="menu" class="pointer">
+              <div class="mobile-sidenav-notification-item">
+                <mat-icon class="mobile-sidenav-icon">notifications_none</mat-icon>
+              </div>
+              <div class="mobile-sidenav-notification-item">
+                <span class="mobile-sidenav-notification-text">Сповіщення</span>
+              </div>
+              <div class="mobile-sidenav-notification-item">
+                <span class="mobile-sidenav-notification-badge">17</span>
+              </div>
+            </button>
+          </div>
+        </div>
+        <hr class="hr-grey">
+
+        <div class="mobile-sidenav-language">
+          <button mat-flat-button >
+            <mat-icon class="mobile-sidenav-icon">language</mat-icon>
+            <mat-select (selectionChange)="setLanguage()" [(value)] = "selectedLanguage" class="lang-option">
+              <mat-option value="uk"> {{Languages.uk}} </mat-option>
+            </mat-select>
+          </button>
+        </div>
+        <hr class="hr-grey">
+
+        <div class="mobile-sidenav-menu">
+          <a [routerLink]="'./personal-cabinet/config'" (click)="changeView()">Особиста Інформація</a>
+          <a [routerLink]="'./personal-cabinet/' + user.role + '/info'" (click)="changeView()">Інформація про
+            {{roles[user.role]}}</a>
+          <a [routerLink]="'./personal-cabinet/workshops'" (click)="changeView()">Мої гуртки</a>
+          <a [routerLink]="'./personal-cabinet/applications'" (click)="changeView()">Мої заяви</a>
+          <a [routerLink]="'./personal-cabinet/messages'" (click)="changeView()">Повідомлення</a>
+          <a *ngIf="user.role === Role.parent" [routerLink]="'./personal-cabinet/parent/favorite'"
+            (click)="changeView()">Улюблене</a>
+          <button (click)="logout()">Вийти</button>
+        </div>
+      </div>
+    </ng-template>
+    <hr class="hr-grey">
+
+    <div class="mobile-sidenav-info-about">
+      <a [routerLink]="'./about'" (click)="changeView()">Про Портал</a>
+    </div>
+    <hr class="hr-grey">
+
+    <div class="mobile-sidenav-info-support">
+      <a [routerLink]="'./support'" (click)="changeView()">
+          <mat-icon class="mobile-sidenav-icon">support</mat-icon>
+        Підтримка
+      </a>
+    </div>
+    <hr class="hr-grey">
+  </div>
+
+</mat-drawer>