From 8ad97ed485de332d107f838b5ddf360754af8acf Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 31 Jul 2017 16:59:09 +0300 Subject: [PATCH] Sidenav missing styles added, unnecessary sidenav component removed. --- src/app/app.module.ts | 4 +- .../layout/navbar/navbar.component.scss | 5 +++ .../nav-collapse/nav-collapse.component.scss | 10 +++++ .../components/sidenav/sidenav.component.html | 16 ------- .../components/sidenav/sidenav.component.scss | 28 ------------ .../components/sidenav/sidenav.component.ts | 45 ------------------- 6 files changed, 16 insertions(+), 92 deletions(-) delete mode 100644 src/app/core/components/sidenav/sidenav.component.html delete mode 100644 src/app/core/components/sidenav/sidenav.component.scss delete mode 100644 src/app/core/components/sidenav/sidenav.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1d2a67b0..3a545fcb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,7 +8,6 @@ import 'hammerjs'; import { ProjectModule } from './main/apps/dashboards/project/project.module'; import { FuseLayoutService } from './core/services/layout.service'; import { FuseNavigationService } from './core/components/navigation/navigation.service'; -import { SidenavComponent } from './core/components/sidenav/sidenav.component'; import { FuseMatchMedia } from './core/services/match-media.service'; import { FuseNavbarService } from './core/components/layout/navbar/navbar.service'; import { SharedModule } from './core/modules/shared.module'; @@ -51,8 +50,7 @@ const appRoutes: Routes = [ @NgModule({ declarations: [ - AppComponent, - SidenavComponent + AppComponent ], imports : [ BrowserModule, diff --git a/src/app/core/components/layout/navbar/navbar.component.scss b/src/app/core/components/layout/navbar/navbar.component.scss index 14d9cbf7..ceb70bda 100644 --- a/src/app/core/components/layout/navbar/navbar.component.scss +++ b/src/app/core/components/layout/navbar/navbar.component.scss @@ -32,6 +32,10 @@ fuse-navbar { width: 64px; min-width: 64px; max-width: 64px; + + .navbar-header { + padding: 0 16px 0 16px; + } } &.folded-open { @@ -62,6 +66,7 @@ fuse-navbar { height: 64px; min-height: 64px; justify-content: space-between; + transition: padding 200ms ease; .logo { display: flex; diff --git a/src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss index 51b19808..f3a17998 100644 --- a/src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss +++ b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss @@ -1,5 +1,15 @@ :host { + .folded:not(.folded-open) & { + .nav-link { + + > span { + opacity: 0; + transition: opacity 200ms ease; + } + } + } + .nav-link { .collapse-arrow { transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s; diff --git a/src/app/core/components/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html deleted file mode 100644 index f83979bf..00000000 --- a/src/app/core/components/sidenav/sidenav.component.html +++ /dev/null @@ -1,16 +0,0 @@ -

- sidenav works! -

- -
- sidenav works! -
- sidenav works! -
- sidenav works! -
- sidenav works! -
- sidenav works! - -
diff --git a/src/app/core/components/sidenav/sidenav.component.scss b/src/app/core/components/sidenav/sidenav.component.scss deleted file mode 100644 index 26a3f076..00000000 --- a/src/app/core/components/sidenav/sidenav.component.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "src/app/core/scss/fuse"; - -:host { - display: block; - position: absolute; - width: 320px; - height: 100%; - background: grey; - right: 0; - top: 0; - overflow-y: auto; - - @include media-breakpoint('sm') { - background: white; - } - - @include media-breakpoint('md') { - background: red; - } - - @include media-breakpoint('lg') { - background: green; - } - - @include media-breakpoint('gt-lg') { - background: white; - } -} diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts deleted file mode 100644 index 3695b4c6..00000000 --- a/src/app/core/components/sidenav/sidenav.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component, ElementRef, HostBinding, OnInit } from '@angular/core'; -import { style, animate, sequence, AnimationBuilder, AnimationPlayer } from '@angular/animations'; -import { AppComponent } from '../../../app.component'; - -@Component({ - selector : 'fuse-sidenav', - templateUrl: './sidenav.component.html', - styleUrls : ['./sidenav.component.scss'] -}) -export class SidenavComponent implements OnInit -{ - constructor(private elementRef: ElementRef, - private animationBuilder: AnimationBuilder, - private bodyEl: AppComponent) - { - - } - - closeBar() - { - this.animationBuilder - .build([ - style({transform: 'translate3d(0,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(100%,0,0)'})) - ]) - .create(this.elementRef.nativeElement) - .play(); - } - - openBar() - { - this.animationBuilder - .build([ - style({transform: 'translate3d(100%,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(0,0,0)'})) - ]) - .create(this.elementRef.nativeElement) - .play(); - } - - ngOnInit() - { - } - -}