sidebar done

iyilm4z · iyilm4z · commit 1c3ecc64f666 · 2020-04-14T18:59:37.000+03:00
diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html
@@ -1,7 +1,9 @@
 <div class="wrapper">
   <app-header></app-header>
+  <sidebar></sidebar>
   <div class="content-wrapper">
     <router-outlet></router-outlet>
   </div>
   <app-footer></app-footer>
+  <div id="sidebar-overlay" (click)="toggleSidebar()"></div>
 </div>
diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts
@@ -1,14 +1,19 @@
 import { Component, Injector, OnInit, Renderer2 } from '@angular/core';
 import { AppComponentBase } from '@shared/app-component-base';
 import { SignalRAspNetCoreHelper } from '@shared/helpers/SignalRAspNetCoreHelper';
+import { LayoutStoreService } from '@shared/layout/layout-store.service';
 
 @Component({
   templateUrl: './app.component.html'
 })
 export class AppComponent extends AppComponentBase implements OnInit {
   sidebarExpanded: boolean;
 
-  constructor(injector: Injector, private renderer: Renderer2) {
+  constructor(
+    injector: Injector,
+    private renderer: Renderer2,
+    private _layoutStore: LayoutStoreService
+  ) {
     super(injector);
   }
 
@@ -31,5 +36,13 @@ export class AppComponent extends AppComponentBase implements OnInit {
         }
       });
     });
+
+    this._layoutStore.sidebarExpanded.subscribe((value) => {
+      this.sidebarExpanded = value;
+    });
+  }
+
+  toggleSidebar(): void {
+    this._layoutStore.setSidebarExpanded(!this.sidebarExpanded);
   }
 }
diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
@@ -41,6 +41,9 @@ import { HeaderLeftNavbarComponent } from './layout/header-left-navbar.component
 import { HeaderLanguageMenuComponent } from './layout/header-language-menu.component';
 import { HeaderUserMenuComponent } from './layout/header-user-menu.component';
 import { FooterComponent } from './layout/footer.component';
+import { SidebarComponent } from './layout/sidebar.component';
+import { SidebarLogoComponent } from './layout/sidebar-logo.component';
+import { SidebarUserPanelComponent } from './layout/sidebar-user-panel.component';
 
 @NgModule({
   declarations: [
@@ -70,6 +73,9 @@ import { FooterComponent } from './layout/footer.component';
     HeaderLanguageMenuComponent,
     HeaderUserMenuComponent,
     FooterComponent,
+    SidebarComponent,
+    SidebarLogoComponent,
+    SidebarUserPanelComponent
   ],
   imports: [
     CommonModule,
diff --git a/angular/src/app/layout/header-left-navbar.component.html b/angular/src/app/layout/header-left-navbar.component.html
@@ -1,6 +1,6 @@
 <ul class="navbar-nav">
   <li class="nav-item">
-    <a class="nav-link" href="javascript:;">
+    <a class="nav-link" href="javascript:;" (click)="toggleSidebar()">
       <i class="fas fa-bars"></i>
     </a>
   </li>
diff --git a/angular/src/app/layout/header-left-navbar.component.ts b/angular/src/app/layout/header-left-navbar.component.ts
@@ -1,8 +1,23 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { LayoutStoreService } from '@shared/layout/layout-store.service';
 
 @Component({
   selector: 'header-left-navbar',
   templateUrl: './header-left-navbar.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HeaderLeftNavbarComponent {}
+export class HeaderLeftNavbarComponent implements OnInit {
+  sidebarExpanded: boolean;
+
+  constructor(private _layoutStore: LayoutStoreService) {}
+
+  ngOnInit(): void {
+    this._layoutStore.sidebarExpanded.subscribe((value) => {
+      this.sidebarExpanded = value;
+    });
+  }
+
+  toggleSidebar(): void {
+    this._layoutStore.setSidebarExpanded(!this.sidebarExpanded);
+  }
+}
diff --git a/angular/src/app/layout/sidebar-logo.component.html b/angular/src/app/layout/sidebar-logo.component.html
@@ -0,0 +1,9 @@
+<a class="brand-link" [routerLink]="['home']">
+  <img
+    src="assets/img/logo.png"
+    alt="Logo"
+    class="brand-image img-circle elevation-3"
+    style="opacity: 0.8;"
+  />
+  <span class="brand-text font-weight-light">AbpProjectName</span>
+</a>
diff --git a/angular/src/app/layout/sidebar-logo.component.ts b/angular/src/app/layout/sidebar-logo.component.ts
@@ -0,0 +1,8 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'sidebar-logo',
+  templateUrl: './sidebar-logo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SidebarLogoComponent {}
diff --git a/angular/src/app/layout/sidebar-user-panel.component.html b/angular/src/app/layout/sidebar-user-panel.component.html
@@ -0,0 +1,12 @@
+<div class="user-panel mt-3 pb-3 mb-3 d-flex">
+  <div class="image">
+    <img
+      src="assets/img/user.png"
+      class="img-circle elevation-2"
+      alt="User Image"
+    />
+  </div>
+  <div class="info">
+    <a class="d-block" href="javascript:;">{{ shownLoginName }}</a>
+  </div>
+</div>
diff --git a/angular/src/app/layout/sidebar-user-panel.component.ts b/angular/src/app/layout/sidebar-user-panel.component.ts
@@ -0,0 +1,25 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Injector,
+  OnInit
+} from '@angular/core';
+import { AppComponentBase } from '@shared/app-component-base';
+
+@Component({
+  selector: 'sidebar-user-panel',
+  templateUrl: './sidebar-user-panel.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SidebarUserPanelComponent extends AppComponentBase
+  implements OnInit {
+  shownLoginName = '';
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  ngOnInit() {
+    this.shownLoginName = this.appSession.getShownLoginName();
+  }
+}
diff --git a/angular/src/app/layout/sidebar.component.html b/angular/src/app/layout/sidebar.component.html
@@ -0,0 +1,6 @@
+<aside class="main-sidebar sidebar-dark-primary elevation-4">
+  <sidebar-logo></sidebar-logo>
+  <div class="sidebar">
+    <sidebar-user-panel></sidebar-user-panel>
+  </div>
+</aside>
diff --git a/angular/src/app/layout/sidebar.component.ts b/angular/src/app/layout/sidebar.component.ts
@@ -0,0 +1,41 @@
+import { Component, ChangeDetectionStrategy, Renderer2 } from '@angular/core';
+import { LayoutStoreService } from '@shared/layout/layout-store.service';
+
+@Component({
+  selector: 'sidebar',
+  templateUrl: './sidebar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SidebarComponent {
+  sidebarExpanded: boolean;
+
+  constructor(
+    private renderer: Renderer2,
+    private _layoutStore: LayoutStoreService
+  ) {}
+
+  ngOnInit(): void {
+    this._layoutStore.sidebarExpanded.subscribe((value) => {
+      this.sidebarExpanded = value;
+      this.toggleSidebar();
+    });
+  }
+
+  toggleSidebar(): void {
+    if (this.sidebarExpanded) {
+      this.hideSidebar();
+    } else {
+      this.showSidebar();
+    }
+  }
+
+  showSidebar(): void {
+    this.renderer.removeClass(document.body, 'sidebar-collapse');
+    this.renderer.addClass(document.body, 'sidebar-open');
+  }
+
+  hideSidebar(): void {
+    this.renderer.removeClass(document.body, 'sidebar-open');
+    this.renderer.addClass(document.body, 'sidebar-collapse');
+  }
+}
diff --git a/angular/src/shared/layout/layout-config.ts b/angular/src/shared/layout/layout-config.ts
@@ -0,0 +1,3 @@
+export class LayoutConfig {
+  sidebarExpanded?: boolean;
+}
diff --git a/angular/src/shared/layout/layout-store.service.ts b/angular/src/shared/layout/layout-store.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { distinctUntilChanged, pluck } from 'rxjs/operators';
+import { LayoutConfig } from './layout-config';
+
+@Injectable()
+export class LayoutStoreService {
+  private configSource: BehaviorSubject<LayoutConfig>;
+  public readonly config$: Observable<LayoutConfig>;
+  private readonly initialLayoutConfig: LayoutConfig = {
+    sidebarExpanded: false
+  };
+
+  constructor() {
+    this.configSource = new BehaviorSubject(this.initialLayoutConfig);
+    this.config$ = this.configSource.asObservable();
+  }
+
+  get sidebarExpanded(): Observable<boolean> {
+    return this.config$.pipe(
+      pluck('sidebarExpanded'),
+      distinctUntilChanged()
+    ) as Observable<boolean>;
+  }
+
+  public setSidebarExpanded(value: boolean): void {
+    this.configSource.next(
+      Object.assign(this.configSource.value, { sidebarExpanded: value })
+    );
+  }
+}
diff --git a/angular/src/shared/shared.module.ts b/angular/src/shared/shared.module.ts
@@ -18,6 +18,7 @@ import { CdkTreeModule } from '@angular/cdk/tree';
 import { ApbValidationSummaryComponent } from './components/validation/abp-validation.summary.component';
 import { AbpModalHeaderComponent } from './components/modal/abp-modal-header.component';
 import { AbpModalFooterComponent } from './components/modal/abp-modal-footer.component';
+import { LayoutStoreService } from './layout/layout-store.service';
 
 import {
     MatAutocompleteModule,
@@ -59,6 +60,7 @@ import {
 import { BlockDirective } from './directives/block.directive';
 import { BusyDirective } from './directives/busy.directive';
 import { EqualValidator } from './directives/equal-validator.directive';
+
 @NgModule({
     imports: [
         CommonModule,
@@ -169,7 +171,8 @@ export class SharedModule {
                 AppSessionService,
                 AppUrlService,
                 AppAuthService,
-                AppRouteGuard
+                AppRouteGuard,
+                LayoutStoreService
             ]
         };
     }
