diff --git a/src/app/app.component.html b/src/app/app.component.html index 1eaaeec..7331aed 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -31,16 +31,23 @@ - - + - + + + {{ link.iconName }} + {{ link.displayName }} + + - + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8eccf92..23e55dd 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,4 +1,5 @@ @import '../theme'; +$primary-color: mat-color($light-primary, 300); #page-wrapper { display: flex; @@ -20,8 +21,15 @@ padding-top:0px } +.primary-color { + color: $primary-color !important; +} + mat-nav-list .nav-profile-list-item { height:200px; - background: mat-color($light-primary, 300);; - //color:white; + background: $primary-color; +} + +.nav-list-icon { + margin-right: 1em; } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ad004fb..a84bf6c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,7 +5,6 @@ import { Router } from '@angular/router'; import { ViewChild } from '@angular/core'; import { MatSidenav } from '@angular/material/sidenav'; import { NavService } from './components/menu-list-item/nav.service'; -import { NavItem } from './components/menu-list-item/nav-item'; import { tableLinks } from 'src/app/tableLinks'; @Component({ @@ -21,13 +20,7 @@ export class AppComponent { @ViewChild('sidenav') public sideNav:MatSidenav; @ViewChild('appDrawer') appDrawer: ElementRef; - navItems: NavItem[] = [ - { - displayName: 'Tabellen', - iconName: 'recent_actors', - route: 'tableOverview', - children: tableLinks - }]; + tableLinks = tableLinks constructor( diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5c273c0..fa0b764 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -44,7 +44,6 @@ import { ParticipantsComponent } from './pages/tables/participants/participants. import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component'; import { TableOverviewComponent } from './pages/table-overview/table-overview.component'; import { CellComponent } from './components/tableComponents/cell/cell.component'; -import { MenuListItemComponent } from './components/menu-list-item/menu-list-item.component'; import { SidenavProfileComponent } from './components/sidenav-profile/sidenav-profile.component'; import { NavService } from './components/menu-list-item/nav.service'; import { TokenInterceptor } from './helper/token.interceptor'; @@ -91,7 +90,6 @@ import { FilterRowComponent } from './components/tableComponents/filter-row/filt @NgModule({ declarations: [ AppComponent, - MenuListItemComponent, SidenavProfileComponent, LoginComponent, BikesComponent, diff --git a/src/app/components/menu-list-item/menu-list-item.component.html b/src/app/components/menu-list-item/menu-list-item.component.html deleted file mode 100644 index 34abf60..0000000 --- a/src/app/components/menu-list-item/menu-list-item.component.html +++ /dev/null @@ -1,15 +0,0 @@ - - - {{item.iconName}} - {{item.displayName}} - - - - - expand_more - - - -
- -
diff --git a/src/app/components/menu-list-item/menu-list-item.component.scss b/src/app/components/menu-list-item/menu-list-item.component.scss deleted file mode 100644 index 2629bc7..0000000 --- a/src/app/components/menu-list-item/menu-list-item.component.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../theme'; - -:host { - display: flex; - flex-direction: column; - outline: none; - width: 100%; - - .mat-list-item.active { - //background-color: mat-color($dark-primary, 50); - } - &:hover, - &:focus { - >.mat-list-item:not(.expanded) { - //background-color: mat-color($dark-primary, 100) !important; - } - } -} - -.mat-list-item { - padding: 8px 0; - display: flex; - width: auto; - - .routeIcon { - margin-right: 40px; - } -} - -span { - display: inline-flex; - vertical-align: middle; -} \ No newline at end of file diff --git a/src/app/components/menu-list-item/menu-list-item.component.ts b/src/app/components/menu-list-item/menu-list-item.component.ts deleted file mode 100644 index 8974e85..0000000 --- a/src/app/components/menu-list-item/menu-list-item.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -import {Component, HostBinding, Input, OnInit} from '@angular/core'; -import {NavItem} from './nav-item'; -import {Router} from '@angular/router'; -import {NavService} from './nav.service'; -import {animate, state, style, transition, trigger} from '@angular/animations'; - -@Component({ - selector: 'app-menu-list-item', - templateUrl: './menu-list-item.component.html', - styleUrls: ['./menu-list-item.component.scss'], - animations: [ - trigger('indicatorRotate', [ - state('collapsed', style({transform: 'rotate(0deg)'})), - state('expanded', style({transform: 'rotate(180deg)'})), - transition('expanded <=> collapsed', - animate('225ms cubic-bezier(0.4,0.0,0.2,1)') - ), - ]) - ] -}) -export class MenuListItemComponent implements OnInit { - expanded: boolean = false; - @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded; - @Input() item: NavItem; - @Input() depth: number; - - constructor(public navService: NavService, - public router: Router, - ) { - if (this.depth === undefined) { - this.depth = 0; - } - } - - ngOnInit() { - this.navService.currentUrl.subscribe((url: string) => { - if (this.item.route && url) { - // console.log(`Checking '/${this.item.route}' against '${url}'`); - this.expanded = url.indexOf(`/${this.item.route}`) === 0; - this.ariaExpanded = this.expanded; - // console.log(`${this.item.route} is expanded: ${this.expanded}`); - } - }); - } - - onItemSelected(item: NavItem) { - /*if (!item.children || !item.children.length) { - this.router.navigate([item.route]); - this.navService.closeNav(); - } - if (item.children && item.children.length) { - this.expanded = !this.expanded; - }*/ - - this.router.navigate([item.route]); - this.navService.closeNav(); - } - - expand(item: NavItem) { - this.expanded = !this.expanded; - } -} diff --git a/src/app/components/menu-list-item/nav-item.ts b/src/app/components/menu-list-item/nav-item.ts deleted file mode 100644 index c19ddfd..0000000 --- a/src/app/components/menu-list-item/nav-item.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface NavItem { - displayName: string; - disabled?: boolean; - iconName: string; - route?: string; - children?: NavItem[]; - } - \ No newline at end of file