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

Commit

Permalink
feat(app): #1638 created sidebar component in shared module
Browse files Browse the repository at this point in the history
  • Loading branch information
@webkhushboo
webkhushboo committed Jan 12, 2020
1 parent cdf1175 commit 1d28882
Show file tree
Hide file tree
Showing 7 changed files with 535 additions and 510 deletions.
178 changes: 1 addition & 177 deletions web/src/app/app.component.html
View file
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>
<dashboard-sidebar></dashboard-sidebar>
171 changes: 0 additions & 171 deletions web/src/app/app.component.scss
View file
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

0 comments on commit 1d28882

Please sign in to comment.