first commit

src/app/_layout/public-layout/public-layout.component.html

@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+<div class="sidenav-overlay d-none" id="sidenav-overlay" (click)="rightbar($event)"></div>

src/app/_layout/public-layout/public-layout.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PublicLayoutComponent } from './public-layout.component';
+
+describe('PublicLayoutComponent', () => {
+  let component: PublicLayoutComponent;
+  let fixture: ComponentFixture<PublicLayoutComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PublicLayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PublicLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_layout/public-layout/public-layout.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit, Renderer2, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Router, NavigationStart, NavigationEnd, Event, NavigationError } from '@angular/router';
+@Component({
+  selector: 'app-public-layout',
+  templateUrl: './public-layout.component.html',
+  styleUrls: ['./public-layout.component.css']
+})
+export class PublicLayoutComponent implements OnInit {
+
+  constructor(private renderer: Renderer2,
+    private router: Router,
+    @Inject(DOCUMENT) private document: Document) {}
+  ngOnInit() {
+    this.setBodyClass();
+  }
+
+  rightbar(event) {
+    const toggle = document.getElementById('sidenav-overlay');
+    if (event.currentTarget.className === 'sidenav-overlay d-block') {
+      this.renderer.removeClass(toggle, 'd-block');
+      this.document.body.classList.remove('menu-open');
+      this.document.body.classList.add('menu-close');
+      this.renderer.addClass(toggle, 'd-none');
+    } else if (event.currentTarget.className === 'sidenav-overlay d-none') {
+      this.renderer.removeClass(toggle, 'd-none');
+      this.document.body.classList.remove('menu-close');
+      this.document.body.classList.add('menu-open');
+      this.renderer.addClass(toggle, 'd-block');
+    }
+  }
+
+  setBodyClass() {
+    const previosBodyClassList = [].slice.call(document.body.classList);
+    const self = this;
+    previosBodyClassList.forEach(function (c) {
+      self.renderer.removeClass(document.body, c);
+    });
+    const currentBodyClassList = ['vertical-layout', 'bg-full-screen-image', 'vertical-overlay-menu',
+      '2-columns', 'pace-done', 'menu-close', 'fixed-navbar'];
+    currentBodyClassList.forEach(function (c) {
+      self.renderer.addClass(document.body, c);
+    });
+    // if (this.router.url === '/login' || (this.router.url === '')) {
+    //   this.renderer.removeClass(document.body, 'fixed-navbar');
+    // } else {
+    //   this.renderer.addClass(document.body, 'fixed-navbar');
+    // }
+  }
+}