diff --git a/examples-standalone/coffee-warehouse/src/app/app.component.html b/examples-standalone/coffee-warehouse/src/app/app.component.html
index d3601f5f..67771b5f 100644
--- a/examples-standalone/coffee-warehouse/src/app/app.component.html
+++ b/examples-standalone/coffee-warehouse/src/app/app.component.html
@@ -1,16 +1 @@
-
-
-
-
-
-
-
-
+
diff --git a/examples-standalone/coffee-warehouse/src/app/app.component.ts b/examples-standalone/coffee-warehouse/src/app/app.component.ts
index 9f667cf3..7d304acf 100644
--- a/examples-standalone/coffee-warehouse/src/app/app.component.ts
+++ b/examples-standalone/coffee-warehouse/src/app/app.component.ts
@@ -1,113 +1,17 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { NavigationStart, Router, RouterEvent } from "@angular/router";
+import { Component } from "@angular/core";
import { MessageService } from "@progress/kendo-angular-l10n";
-import {
- DrawerComponent,
- DrawerMode,
- DrawerSelectEvent,
-} from "@progress/kendo-angular-layout";
import { CustomMessagesService } from "./services/custom-messages.service";
-import { gridIcon, chartLineMarkersIcon, calendarIcon, userIcon, infoCircleIcon } from "@progress/kendo-svg-icons";
-
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent {
public selected = "Team";
public items: Array = [];
public customMsgService: CustomMessagesService;
- public mode: DrawerMode = "push";
public mini = true;
- constructor(private router: Router, public msgService: MessageService) {
+ constructor(public msgService: MessageService) {
this.customMsgService = this.msgService as CustomMessagesService;
}
-
- ngOnInit() {
- // Update Drawer selected state when change router path
- this.router.events.subscribe((route: any) => {
- if (route instanceof NavigationStart) {
- this.items = this.drawerItems().map((item) => {
- if (item.path && item.path === route.url) {
- item.selected = true;
- return item;
- } else {
- item.selected = false;
- return item;
- }
- });
- }
- });
-
- this.setDrawerConfig();
-
- this.customMsgService.localeChange.subscribe(() => {
- this.items = this.drawerItems();
- });
-
- window.addEventListener("resize", () => {
- this.setDrawerConfig();
- });
- }
-
- ngOnDestroy() {
- window.removeEventListener("resize", () => {});
- }
-
- public setDrawerConfig() {
- const pageWidth = window.innerWidth;
- if (pageWidth <= 840) {
- this.mode = "overlay";
- this.mini = false;
- } else {
- this.mode = "push";
- this.mini = true;
- }
- }
-
- public drawerItems() {
- return [
- {
- text: this.customMsgService.translate("team"),
- svgIcon: gridIcon,
- path: "/",
- selected: true,
- },
- {
- text: this.customMsgService.translate("dashboard"),
- svgIcon: chartLineMarkersIcon,
- path: "/dashboard",
- selected: false,
- },
- {
- text: this.customMsgService.translate("planning"),
- svgIcon: calendarIcon,
- path: "/planning",
- selected: false,
- },
- {
- text: this.customMsgService.translate("profile"),
- svgIcon: userIcon,
- path: "/profile",
- selected: false,
- },
- { separator: true },
- {
- text: this.customMsgService.translate("info"),
- svgIcon: infoCircleIcon,
- path: "/info",
- selected: false,
- },
- ];
- }
-
- public toggleDrawer(drawer: DrawerComponent): void {
- drawer.toggle();
- }
-
- public onSelect(ev: DrawerSelectEvent): void {
- this.router.navigate([ev.item.path]);
- this.selected = ev.item.text;
- }
}
diff --git a/examples-standalone/coffee-warehouse/src/app/app.module.ts b/examples-standalone/coffee-warehouse/src/app/app.module.ts
index cdf557bb..c578a203 100644
--- a/examples-standalone/coffee-warehouse/src/app/app.module.ts
+++ b/examples-standalone/coffee-warehouse/src/app/app.module.ts
@@ -1,5 +1,5 @@
import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
@@ -38,12 +38,13 @@ import { NavigationModule } from "@progress/kendo-angular-navigation";
import { MenuWindowComponent } from './components/menu-window/menu-window.component';
-const drawerRoutes = [
+const routes: Routes = [
{ path: '', component: TeamComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'planning', component: PlanningComponent },
{ path: 'profile', component: ProfileComponent },
- { path: 'info', component: InfoComponent }
+ { path: 'info', component: InfoComponent },
+ { path: '**', redirectTo: 'profile', pathMatch: 'full' }
];
import 'hammerjs';
@@ -92,7 +93,7 @@ import { SettingsService } from './components/settings-list/settings.service';
DateInputsModule,
InputsModule,
DropDownsModule,
- RouterModule.forRoot(drawerRoutes),
+ RouterModule.forRoot(routes),
NotificationModule,
IconsModule,
WindowModule,
diff --git a/examples-standalone/coffee-warehouse/src/app/header/header.commponent.html b/examples-standalone/coffee-warehouse/src/app/header/header.component.html
similarity index 83%
rename from examples-standalone/coffee-warehouse/src/app/header/header.commponent.html
rename to examples-standalone/coffee-warehouse/src/app/header/header.component.html
index 167336d1..78023e21 100644
--- a/examples-standalone/coffee-warehouse/src/app/header/header.commponent.html
+++ b/examples-standalone/coffee-warehouse/src/app/header/header.component.html
@@ -22,13 +22,15 @@
-
-
-
-
+
+
+
+
+
+
diff --git a/examples-standalone/coffee-warehouse/src/app/header/header.component.ts b/examples-standalone/coffee-warehouse/src/app/header/header.component.ts
index 984a5b78..61bb4f89 100644
--- a/examples-standalone/coffee-warehouse/src/app/header/header.component.ts
+++ b/examples-standalone/coffee-warehouse/src/app/header/header.component.ts
@@ -1,19 +1,24 @@
-import { Component, EventEmitter, Inject, Input, LOCALE_ID, Output } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, LOCALE_ID, Output, QueryList, ViewChildren } from '@angular/core';
import { CldrIntlService, IntlService } from '@progress/kendo-angular-intl';
import { MessageService } from '@progress/kendo-angular-l10n';
import { CustomMessagesService } from '../services/custom-messages.service';
import { SVGIcon, menuIcon, paletteIcon } from '@progress/kendo-svg-icons';
import { locales } from '../resources/locales';
+import { NavigationStart, Router } from '@angular/router';
+import { ButtonDirective } from '@progress/kendo-angular-buttons';
@Component({
selector: 'app-header-component',
- templateUrl: './header.commponent.html',
+ templateUrl: './header.component.html',
styleUrl: './header.component.css'
})
export class HeaderComponent {
@Output() public toggle = new EventEmitter();
@Input() public selectedPage?: string;
+ @ViewChildren(ButtonDirective)
+ public kendoHeaderButtons: QueryList;
+
public menuIcon: SVGIcon = menuIcon;
public paletteIcon: SVGIcon = paletteIcon;
public customMsgService: CustomMessagesService;
@@ -37,7 +42,7 @@ export class HeaderComponent {
];
public selectedTheme = this.themes[0];
- constructor(public messages: MessageService, @Inject(LOCALE_ID) public localeId: string, public intlService: IntlService) {
+ constructor(public messages: MessageService, @Inject(LOCALE_ID) public localeId: string, public intlService: IntlService, private router: Router) {
this.localeId = this.selectedLanguage.localeId;
this.setLocale(this.localeId);
@@ -45,6 +50,21 @@ export class HeaderComponent {
this.customMsgService.language = this.selectedLanguage.localeId;
}
+ ngAfterViewInit() {
+ // Update the selected state when the router path changes
+ this.router.events.subscribe((route: any) => {
+ if (route instanceof NavigationStart) {
+ if (route.url === '/') {
+ this.kendoHeaderButtons.get(0).selected = true;
+ } else if (route.url === '/profile') {
+ this.kendoHeaderButtons.get(1).selected = true;
+ } else if (route.url === '/info') {
+ this.kendoHeaderButtons.get(2).selected = true;
+ }
+ }
+ });
+ }
+
public changeTheme(theme: { href: string; text: string }) {
this.selectedTheme = theme;
const themeEl: any = document.getElementById('theme');