Merge pull request #2 from keks-code/dev

README.md

@@ -27,7 +27,9 @@ The idea here is to provide ready to use Angular templates with typical [Materia
 
 ### Option 1: Copy layout code to an existing Angular app
 
-#### Step 1: Add MDC-Web
+#### Step 1: Add MDC-Web (optional)
+
+This step is optional. You only need to do it if target layout uses any MDC-Web component. See layout description for a list of used components.
 
 1. Run `yarn add material-components-web` or `npm install material-components-web`. The package includes all MDC components/APIs. Don't worry,
 only necessary parts will be bundled into your application.
@@ -46,11 +48,12 @@ only necessary parts will be bundled into your application.
 
 1. Clone the repo, or download the latest version from [Releases](https://github.com/kekscs/angular-material-layout-kit/releases).
 2. Copy the necessary layout component files to your app. Layouts can be found in [/src/app/layouts](https://github.com/kekscs/angular-material-layout-kit/tree/master/src/app/layouts) folder.
-3. Import layout into your _src/app/app-routing.module.ts_ file:
+3. Add layout component to target module declarations. Usually you need to import layout component into your `app.module.ts` and add it to `declarations` array.
+4. Use layout in you routing. Usually you need to import layout into your `src/app/app-routing.module.ts` file:
 ```ts
 import { Layout101Component } from './layouts/layout101/layout101.component'
 ```
-4. Configure layout for a route like this:
+5. Set the layout for a route like this:
 ```ts
   {
     path: 'home',
@@ -60,6 +63,7 @@ import { Layout101Component } from './layouts/layout101/layout101.component'
     ]
   }
 ```
+6. Don't forget to import modules of Angular Material components, used in the layout.
 
 
 ### Option 2: Use **angular-material-layout-kit** as a starter template

package.json

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

src/app/app-routing.module.ts

@@ -4,11 +4,13 @@ import { RouterModule, Routes } from '@angular/router';
 // Layouts
 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';
 
 // 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';
 
 
@@ -28,6 +30,13 @@ const routes: Routes = [
       { path: '', component: Layout101Page }
     ]
   },
+  {
+    path: 'layout202',
+    component: Layout202Component,
+    children: [
+      { path: '', component: Layout202Page }
+    ]
+  },
   {
     path: 'layout203',
     component: Layout203Component,

src/app/app.module.ts

@@ -15,6 +15,7 @@ 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';
 
 
 @NgModule({
@@ -24,6 +25,7 @@ import { Layout203Page } from './pages/layout203/layout203.page';
     DummyPageContentComponent,
     Layout101Page,
     Layout203Page,
+    Layout202Page,
   ],
   imports: [
     BrowserModule,

src/app/layouts/app-layout/app-layout.component.ts

@@ -12,7 +12,6 @@ const GITHUB_ICON = `
 
 
 @Component({
-  selector: 'app-layout',
   templateUrl: './app-layout.component.html',
   styleUrls: ['./app-layout.component.scss']
 })

src/app/layouts/layout101/layout101.component.ts

@@ -3,7 +3,6 @@ import { MDCTopAppBar } from '@material/top-app-bar';
 
 
 @Component({
-  selector: 'app-layout101',
   templateUrl: './layout101.component.html',
   styleUrls: ['./layout101.component.scss']
 })

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

@@ -0,0 +1,49 @@
+<mat-sidenav-container
+  class="layout-container"
+  [class.sidenav-container--modal-drawer]="mobileQuery.matches">
+  <mat-sidenav
+    #snav
+    [mode]="mobileQuery.matches ? 'over' : 'side'"
+    [fixedInViewport]="mobileQuery.matches"
+    [opened]="!mobileQuery.matches">
+    <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()"
+        class="mdx-d--none-desktop">
+        <mat-icon>menu</mat-icon>
+      </button>
+
+      <span>My Application</span>
+
+      <span class="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/layout202/layout202.component.scss

@@ -0,0 +1,42 @@
+.layout-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  //background: #eee;
+}
+
+.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/layout202/layout202.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+
+
+@Component({
+  templateUrl: './layout202.component.html',
+  styleUrls: ['./layout202.component.scss']
+})
+export class Layout202Component implements OnInit, OnDestroy {
+
+  mobileQuery: MediaQueryList;
+  private _mobileQueryListener: () => void;
+
+  fillerNav = Array.from({length: 3}, (_, i) => `Nav Item ${i + 1}`);
+
+  constructor(
+    changeDetectorRef: ChangeDetectorRef,
+    media: MediaMatcher
+  ) {
+    this.mobileQuery = media.matchMedia('(max-width: 840px)');
+    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this._mobileQueryListener);
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngOnDestroy() {
+    this.mobileQuery.removeListener(this._mobileQueryListener);
+  }
+}

src/app/layouts/layout203/layout203.component.scss

@@ -23,6 +23,7 @@
 .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 ;

src/app/layouts/layout203/layout203.component.ts

@@ -4,7 +4,6 @@ import { MediaMatcher } from '@angular/cdk/layout';
 import { MatSidenavContent } from '@angular/material/sidenav';
 
 @Component({
-  selector: 'app-layout203',
   templateUrl: './layout203.component.html',
   styleUrls: ['./layout203.component.scss']
 })

src/app/layouts/layouts.module.ts

@@ -7,18 +7,20 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 // *** Layouts ***
 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';
 
 
-
 @NgModule({
   declarations: [
     AppLayoutComponent,
     Layout101Component,
+    Layout202Component,
     Layout203Component
   ],
   imports: [
@@ -28,7 +30,8 @@ import { Layout203Component } from './layout203/layout203.component';
     MatIconModule,
     MatMenuModule,
     MatSidenavModule,
-    MatDividerModule
+    MatDividerModule,
+    MatToolbarModule
   ]
 })
 export class LayoutsModule { }

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

@@ -8,6 +8,14 @@
       </a>
     </div>
 
+    <div class="mdc-layout-grid__cell">
+      <a routerLink="/layout202" class="card-link">
+        <mat-card>
+          <mat-card-title>Layout #202</mat-card-title>
+        </mat-card>
+      </a>
+    </div>
+
     <div class="mdc-layout-grid__cell">
       <a routerLink="/layout203" class="card-link">
         <mat-card>

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

@@ -0,0 +1,43 @@
+<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 #202</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 #202 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> In desktop mode, drawer (or sidenav) is always visible. Top app bar gets scrolled together with content.<br>
+
+              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>
+              </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/layout202/layout202.page.ts

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

src/app/pages/layout203/layout203.page.html

@@ -8,7 +8,7 @@ <h3 class="mat-display-1 mdx-mb--3">Layout #203</h3>
           <ul>
             <li>
               <strong>Key Components:</strong>&nbsp; <a href="https://material.io/components/app-bars-top/web" target="_blank">@material/top-app-bar</a>,
-               <a href="https://material.io/components/app-bars-top" target="_blank">Sidenav</a>
+               <a href="https://material.angular.io/components/sidenav" target="_blank">Sidenav</a>
             </li>
             <li>
               <strong>Behavior:</strong> In desktop mode, top app bar and drawer are always visible. Only content scrolls.<br>
@@ -17,6 +17,7 @@ <h3 class="mat-display-1 mdx-mb--3">Layout #203</h3>
               Also top app bar is not fixed anymore. Scrolling upward hides the top app bar, scrolling downward reveals the top app bar,
               thus freeing even more space for content.
             </li>
+            <li><a href="http://life.keks-code.com/2021/05/19/realizacija-layout-203-angular/">Notes about implementation</a></li>
           </ul>
         </div>
       </mat-card-content>

src/styles/themes/default/material-angular/_theme.scss

@@ -69,8 +69,3 @@
   }
 
 }
-
-
-
-
-