Merge pull request #3 from keks-code/dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-layout-kit",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app-routing.module.ts

@@ -6,12 +6,14 @@ import { AppLayoutComponent } from './layouts/app-layout/app-layout.component';
 import { Layout101Component } from './layouts/layout101/layout101.component';
 import { Layout202Component } from "./layouts/layout202/layout202.component";
 import { Layout203Component } from './layouts/layout203/layout203.component';
+import { Layout204Component } from './layouts/layout204/layout204.component';
 
 // Pages
 import { HomePage } from './pages/home/home.page';
 import { Layout101Page } from './pages/layout101/layout101.page';
 import { Layout202Page } from "./pages/layout202/layout202.page";
 import { Layout203Page } from './pages/layout203/layout203.page';
+import { Layout204Page } from './pages/layout204/layout204.page';
 
 
 const routes: Routes = [
@@ -43,6 +45,13 @@ const routes: Routes = [
     children: [
       { path: '', component: Layout203Page }
     ]
+  },
+  {
+    path: 'layout204',
+    component: Layout204Component,
+    children: [
+      { path: '', component: Layout204Page }
+    ]
   }
 ];
 

src/app/app.module.ts

@@ -14,8 +14,9 @@ import { AppComponent } from './app.component';
 import { HomePage } from './pages/home/home.page';
 import { DummyPageContentComponent } from './components/dummy-page-content/dummy-page-content.component';
 import { Layout101Page } from './pages/layout101/layout101.page';
-import { Layout203Page } from './pages/layout203/layout203.page';
 import { Layout202Page } from './pages/layout202/layout202.page';
+import { Layout203Page } from './pages/layout203/layout203.page';
+import { Layout204Page } from './pages/layout204/layout204.page';
 
 
 @NgModule({
@@ -24,8 +25,9 @@ import { Layout202Page } from './pages/layout202/layout202.page';
     HomePage,
     DummyPageContentComponent,
     Layout101Page,
-    Layout203Page,
     Layout202Page,
+    Layout203Page,
+    Layout204Page
   ],
   imports: [
     BrowserModule,

src/app/layouts/layout202/layout202.component.html

@@ -35,7 +35,7 @@
 
       <span>My Application</span>
 
-      <span class="toolbar-spacer"></span>
+      <span class="mat-toolbar-spacer"></span>
 
       <a mat-button
         routerLink="/">

src/app/layouts/layout202/layout202.component.scss

@@ -4,10 +4,9 @@
   bottom: 0;
   left: 0;
   right: 0;
-  //background: #eee;
 }
 
-.toolbar-spacer {
+.mat-toolbar-spacer {
   flex: 1 1 auto;
 }
 

src/app/layouts/layout204/layout204.component.html

@@ -0,0 +1,46 @@
+<mat-sidenav-container
+  class="layout-container sidenav-container--modal-drawer">
+  <mat-sidenav
+    #snav
+    mode="over"
+    fixedInViewport>
+    <div class="sidenav-content-container">
+      <div class="pseudo-title sidenav-item" style="width: 80%"></div>
+      <div class="pseudo-title sidenav-item" style="width: 70%"></div>
+      <div class="pseudo-title sidenav-item" style="width: 75%"></div>
+      <div class="pseudo-title sidenav-item" style="width: 55%"></div>
+      <div class="pseudo-title sidenav-item" style="width: 65%"></div>
+
+      <mat-divider></mat-divider>
+
+      <div *ngFor="let nav of fillerNav" class="pseudo-title sidenav-item" style="width: 85%"></div>
+
+      <mat-divider></mat-divider>
+
+      <div class="pseudo-title sidenav-item" style="width: 70%"></div>
+      <div class="pseudo-title sidenav-item" style="width: 40%"></div>
+      <div class="pseudo-title sidenav-item" style="width: 75%"></div>
+    </div>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <mat-toolbar color="primary">
+      <button
+        mat-icon-button
+        (click)="snav.toggle()">
+        <mat-icon>menu</mat-icon>
+      </button>
+
+      <span>My Application</span>
+
+      <span class="mat-toolbar-spacer"></span>
+
+      <a mat-button
+        routerLink="/">
+        <mat-icon class="mat-button__icon">home</mat-icon>
+        <span>Home</span>
+      </a>
+    </mat-toolbar>
+
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/layouts/layout204/layout204.component.scss

@@ -0,0 +1,41 @@
+.layout-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.mat-toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.sidenav-content-container {
+  width: 256px;     // Size is taken from Navigation drawer specs - https://material.io/components/navigation-drawer#specs
+  padding: 32px 16px;
+  box-sizing: border-box;   // Fix. https://stackoverflow.com/a/67907083/8468354
+
+  ::ng-deep .mat-divider-horizontal {
+    position: relative ;
+    left: -16px;
+    width: calc(100% + 32px);
+    margin-bottom: 24px;
+  }
+}
+
+.sidenav-container--modal-drawer {
+  z-index: unset;
+
+  ::ng-deep .mat-drawer-backdrop {
+    z-index: 5;
+  }
+
+  ::ng-deep .mat-sidenav-fixed {
+    z-index: 6;
+  }
+}
+
+.sidenav-item {
+  display: block;
+  margin-bottom: 24px;
+}

src/app/layouts/layout204/layout204.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  templateUrl: './layout204.component.html',
+  styleUrls: ['./layout204.component.scss']
+})
+export class Layout204Component implements OnInit {
+
+  fillerNav = Array.from({length: 3}, (_, i) => `Nav Item ${i + 1}`);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/layouts/layouts.module.ts

@@ -14,14 +14,16 @@ import { AppLayoutComponent } from './app-layout/app-layout.component';
 import { Layout101Component } from './layout101/layout101.component';
 import { Layout202Component } from './layout202/layout202.component';
 import { Layout203Component } from './layout203/layout203.component';
+import { Layout204Component } from './layout204/layout204.component';
 
 
 @NgModule({
   declarations: [
     AppLayoutComponent,
     Layout101Component,
     Layout202Component,
-    Layout203Component
+    Layout203Component,
+    Layout204Component,
   ],
   imports: [
     CommonModule,

src/app/pages/home/home.page.html

@@ -23,5 +23,13 @@
         </mat-card>
       </a>
     </div>
+
+    <div class="mdc-layout-grid__cell">
+      <a routerLink="/layout204" class="card-link">
+        <mat-card>
+          <mat-card-title>Layout #204</mat-card-title>
+        </mat-card>
+      </a>
+    </div>
   </div>
 </div>

src/app/pages/layout202/layout202.page.html

@@ -18,8 +18,7 @@ <h3 class="mat-display-1 mdx-mb--3">Layout #202</h3>
 
               In tablet/phone modes, drawer is hidden to maximize space available for content. It can be revealed by clicking the menu icon in top app bar.
               <ul>
-                <li>Properly handled scrolling of main content when modal drawer is opened. In tablet/phone modes, when modal drawer is opened,
-                  main content behind doesn't scroll.</li>
+                <li>Handled scrolling of main content when modal drawer is opened: main content behind shim doesn't scroll.</li>
               </ul>
             </li>
           </ul>

src/app/pages/layout204/layout204.page.html

@@ -0,0 +1,50 @@
+<div class="a-c--1280 mdx-p--default">
+
+  <div class="card-container">
+    <mat-card>
+      <mat-card-content>
+        <h3 class="mat-display-1 mdx-mb--3">Layout #204</h3>
+        <div class="rich-text mdx-mb--5 mat-typography">
+          <ul>
+            <li>
+              <strong>Key Components:</strong>&nbsp; <a href="https://material.angular.io/components/toolbar" target="_blank">Toolbar</a>,
+               <a href="https://material.angular.io/components/sidenav" target="_blank">Sidenav</a>. This version of layout #204 doesn't
+               use MDC Web's <a href="https://material.io/components/app-bars-top/web" target="_blank">@material/top-app-bar</a>.
+               Therefore scrolling downward <strong>doesn't</strong> reveal the top app bar. I plan to create another version of this layout
+               using <i>@material/top-app-bar</i>.
+            </li>
+            <li>
+              <strong>Behavior:</strong> Behavior is the same in all three modes (desktop/tablet/phone): drawer is hidden to maximize
+              space available for content. It can be revealed by clicking the menu icon in top app bar.
+
+              <ul>
+                <li>Handled scrolling of main content when modal drawer is opened: main content behind shim doesn't scroll.</li>
+              </ul>
+            </li>
+            <li>
+              <strong>Comparison</strong>
+              <ul>
+                <li>
+                  <strong>#202</strong>: unlike #202, this one doesn't have a separate behavior for desktop mode.
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </mat-card-content>
+      <mat-card-footer class="mdx-p--2 text-center color-secondary-text">
+        <div>
+          <span class="material-icons mdx-mr--1">desktop_windows</span>
+          <span class="material-icons mdx-mr--1">tablet_android</span>
+          <span class="material-icons mdx-mr--1">smartphone</span>
+        </div>
+        <div class="mat-caption">
+          Check it out on desktop, tablet and phone.
+        </div>
+      </mat-card-footer>
+    </mat-card>
+  </div>
+
+  <dummy-page-content></dummy-page-content>
+
+</div>

src/app/pages/layout204/layout204.page.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './layout204.page.html',
+  styleUrls: ['./layout204.page.scss']
+})
+export class Layout204Page implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}