Skip to content
This repository has been archived by the owner on Apr 12, 2021. It is now read-only.

feat(app): #1638 created sidebar component in shared module #1657

Open
wants to merge 2 commits into
base: v0.11.9
Choose a base branch
from
Open

feat(app): #1638 created sidebar component in shared module #1657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d28882
feat(app): #1638 created sidebar component in shared module
webkhushboo Jan 12, 2020
f80f993
feat(app): #1638 added auth resolver in sidebar
webkhushboo Jan 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions web/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,32 @@ import { NgModule } from '@angular/core';

// Dashboard hub core modules
import { RouterModule, Routes } from '@angular/router';
import { AuthResolver } from '@core/resolvers/auth.resolver';
import { SidebarComponent } from './shared/components/sidebar/sidebar.component';

const routes: Routes = [
{
path: '',
loadChildren: './main/main.module#MainModule',
},
{
path: 'projects',
loadChildren: './projects/projects.module#ProjectsModule',
},
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule',
},
{
path: '**',
loadChildren: './error/error.module#ErrorModule',
component: SidebarComponent,
resolve: [AuthResolver],
children: [
{
path: '',
loadChildren: './main/main.module#MainModule',
},
{
path: 'projects',
loadChildren: './projects/projects.module#ProjectsModule',
},
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule',
},
{
path: '**',
loadChildren: './error/error.module#ErrorModule',
},
],
},
];

Expand Down
178 changes: 1 addition & 177 deletions web/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,177 +1 @@
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #sidenav [mode]="sideNavMode" class="sidenav" [ngClass]="{'sidenav__open': menuTriger}" fixedInViewport="false" role="navigation" [opened]="!isSmallScreen">
<div class="heading" (click)="openMenu($event)">
<img src="assets/icons/logo.svg" class="heading__logo" />
</div>
<mat-nav-list class="menu">
<ng-container *ngFor="let item of publicRoutes">
<a mat-list-item class="menu__item" [routerLink]="[item.route]" routerLinkActive="menu__item__active" (click)="closeMenu()">
<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<span>
<mat-icon class="menu__item__icon material-icons-outlined grey-color">{{ item.icon }}</mat-icon>
</span>
<span>{{ item.title }}</span>
</div>
</a>
</ng-container>
<ng-container *ngIf="isAuthenticated()">
<ng-container *ngFor="let item of privateRoutes">
<a mat-list-item class="menu__item" [routerLink]="[item.route]" routerLinkActive="menu__item__active" (click)="closeMenu()">
<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<span>
<mat-icon class="menu__item__icon material-icons-outlined">{{ item.icon }}</mat-icon>
</span>
<span>{{ item.title }}</span>
</div>
</a>
</ng-container>
</ng-container>
<ng-container *ngFor="let item of generalRoutes">
<a mat-list-item class="menu__item" [routerLink]="[item.route]" routerLinkActive="menu__item__active" (click)="closeMenu()">
<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<span>
<mat-icon class="menu__item__icon material-icons-outlined">{{ item.icon }}</mat-icon>
</span>
<span>{{ item.title }}</span>
</div>
</a>
</ng-container>
<a mat-list-item class="menu__item" (click)="login(); closeMenu()" routerLinkActive="menu__item__active" *ngIf="!isAuthenticated()" dashboardLogin>
<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<span>
<mat-icon class="menu__item__icon material-icons-outlined">vpn_key</mat-icon>
</span>
<span>Login</span>
</div>
</a>
<a mat-list-item class="menu__item" (click)="logout(); closeMenu()" routerLinkActive="menu__item__active" *ngIf="isAuthenticated()">
<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<span>
<mat-icon class="menu__item__icon material-icons-outlined">exit_to_app</mat-icon>
</span>
<span>Sign out</span>
</div>
</a>
<ng-container *ngIf="getProfile().isAdmin">
<ng-container *ngFor="let item of adminRoutes">
<a mat-list-item class="menu__item" [routerLink]="[item.route]" routerLinkActive="menu__item__active" (click)="closeMenu()">
<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<span>
<mat-icon class="menu__item__icon material-icons-outlined">{{ item.icon }}</mat-icon>
</span>
<span>{{ item.title }}</span>
</div>
</a>
</ng-container>
</ng-container>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content [ngClass]="{'move-up': menuTriger, 'move-down': !menuTriger}">
<mat-toolbar>
<div fxHide.xs class="app-toolbar" fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center">
<div (click)="openMenu($event)" fxLayout="row" fxLayoutAlign="start center">
<mat-icon *ngIf="menuTriger" class="app-toolbar__profile-block__menu-icon">
more_vert
</mat-icon>
<mat-icon *ngIf="!menuTriger" class="app-toolbar__profile-block__menu-icon">
format_list_bulleted
</mat-icon>
</div>
<div>
<ng-container *ngTemplateOutlet="headerBlock"></ng-container>
</div>
</div>
<div fxHide.gt-xs fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" class="app-toolbar">
<div>
<img src="assets/icons/logo.svg" class="app-toolbar__logo" />
</div>
<div fxLayout="row" fxLayoutAlign="end center">
<div>
<button mat-icon-button type="button" aria-label="Toggle sidenav" (click)="sidenav.toggle()">
<mat-icon aria-label="Side nav toggle icon" class="app-toolbar__icon">menu</mat-icon>
</button>
</div>
<div class="app-toolbar__menu">
<div [matMenuTriggerFor]="menu" fxLayout="row" fxLayoutAlign="space-between center">
<mat-icon class="app-toolbar__icon">more_vert</mat-icon>
</div>
<mat-menu #menu="matMenu" xPosition="before" class="header-menu">
<div mat-menu-item fxFlex="100">
<ng-container *ngTemplateOutlet="headerBlock"></ng-container>
</div>
</mat-menu>
</div>
</div>
</div>
</mat-toolbar>
<ng-template #headerBlock>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px" class="app-toolbar__profile-block">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="10px">
<div fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center" matTooltip="Login" class="app-toolbar__profile-block__button" (click)="login()" *ngIf="!isAuthenticated()" dashboardLogin>
Login
<mat-icon class="app-toolbar__profile-block__icon material-icons-outlined grey-color">vpn_key</mat-icon>
</div>
</div>
<div>
<a matTooltip="Github" href="http://github.com/DashboardHub/PipelineDashboard" target="_blank" fxLayout="row" fxLayoutAlign="space-between center">
<mat-icon class="app-toolbar__profile-block__icon" class="material-icons-outlined grey-color">security</mat-icon>
</a>
</div>
</div>
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center">
<div>{{ isAuthenticated() ? getProfile().username : 'Welcome Guest' }}</div>
<div>
<a [routerLink]="['/profile']" *ngIf="isAuthenticated(); else notAuth" fxLayoutAlign="center center">
<img class="app-toolbar__profile-block__avatar" src="{{ getProfile().avatarUrl }}" />
</a>

<ng-template #notAuth>
<mat-icon class="app-toolbar__profile-block__avatar__icon material-icons-outlined white-color">person</mat-icon>
</ng-template>
</div>
</div>
</div>
</ng-template>
<div class="content-container">
<mat-divider></mat-divider>
<mat-progress-bar *ngIf="progress > 0" mode="buffer" color="warn"></mat-progress-bar>
<router-outlet></router-outlet>
</div>
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" fxLayout.lt-lg="column-reverse"
fxLayoutAlign.lt-lg="space-between center" class="footer">
<mat-toolbar-row fxLayout="row" fxLayout.lt-lg="column-reverse" fxLayoutAlign="start center" fxLayoutAlign.lt-lg="center center">
<div class="footer__copyright">
<span>Copyright &copy; 2019 <a href="https://www.dashboardhub.io" target="_blank" rel="noopener">DashboardHub</a>. All rights reserved <i>({{ version }})</i></span>
</div>
</mat-toolbar-row>
<mat-toolbar-row fxLayout="row" fxLayout.lt-lg="column-reverse" fxLayoutAlign="end center" fxLayoutAlign.lt-lg="center center">
<div fxLayout="row">
<!--
<div>
<div [routerLink]="['/privacy']" class="footer__button">
<mat-icon svgIcon="private_toolbar_icon"></mat-icon>
Privacy
</div>
</div>
<div>
<div class="footer__button">
<mat-icon svgIcon="terms_toolbar_icon"></mat-icon>
Terms & Conditions
</div>
</div>
-->
<div>
<div (click)="showDoorbell()" class="footer__button">
<mat-icon class="material-icons-outlined orange-color">feedback</mat-icon>
Feedback
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<img src="assets/icons/logo-horizontal-std.svg" [style.width.px]="120" />
</div>
</mat-toolbar-row>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
<router-outlet></router-outlet>
171 changes: 0 additions & 171 deletions web/src/app/app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,171 +0,0 @@
@import "~@angular/material/theming";
@import "../assets/scss/variable";
@import "../assets/scss/mixin.scss";

.sidenav-container {
height: 100%;
background-color: #eaeaea;
}

.sidenav {
@include ellipsisText;
width: 60px;
background: $background-black-color;
transition-duration: 0.5s;

&__open {
transition-duration: 0.5s;
width: 235px;
}

.heading {
margin-top: 16px;
margin-left: -4px;
height: 60px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;

&__logo {
width: 240px;
overflow: hidden;
height: 32px;
}

&__icon {
position: absolute;
right: -5px;
top: 23px;

&__item {
color: $dark-grey-color;
transform: scale(1.5)
}
}
}

.menu {
overflow: hidden;

&__item {
font-size: 16px;
font-weight: lighter;
color: $dark-grey-color;

&__active {
color: #fff;
}

&__icon {
width: 25px;
height: 25px;
}
}
}
}

.sidenav .mat-toolbar {
background: inherit;
}

.app-toolbar {
position: relative;

background: none;

&__logo {
width: 140px;
padding-left: 24px;
}

&__icon {
color: $dark-grey-color;
}

&__menu {
cursor: pointer;
}

&__profile-block {
font-size: 16px;

&__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid $orange-2-color;
cursor: pointer;
margin-right: 5px !important;

&__icon {
width: 40px;
height: 40px;
font-size: 35px;
background: $orange-2-color;
border: 1px solid $orange-2-color;
border-radius: 50%;
margin-right: 5px !important;
}
}

&__icon {
cursor: pointer;
transform: scale(0.8);
margin-right: 5px !important;
}

&__menu-icon {
cursor: pointer;
color: $dark-grey-color;
transform: scale(1.2);
margin-right: 5px !important;
}

&__button {
font-size: 16px;
cursor: pointer;
}
}
}

.content-container {
min-height: calc(100% - 128px);
overflow-x: hidden;

@media ($mat-xsmall) {
min-height: calc(100% - 112px);
}
}

.move-up {
margin-left: 0px !important;

@media (min-width: $breakpoint-xs) {

margin-left: 235px !important;
transition-duration: 0.5s;

}
}

.move-down {
margin-left: 0px !important;

@media (min-width: $breakpoint-xs) {
margin-left: 60px !important;
transition-duration: 0.5s;


}
}

.footer {
&__copyright {
text-align: center;
white-space: pre-wrap;

@media (max-width: $breakpoint-sm) {
padding: 10px 0;
}
}
}
Loading