Add home view and routing so grids can be open in standalone view without tabs.

src/app/app.component.html

@@ -1,42 +1 @@
-<div class="demo-container">
-  <div class="tab-container ">
-    <div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
-    </div>
-  </div>
-  <div class="router-container">
-    <router-outlet></router-outlet>
-  </div>
-</div>
-
-<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
-  <div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
-    <div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
-      {{ tabInfo.get(tabName)?.title }}
-      <igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
-    </div>
-    <div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
-      <span>{{ tabInfo.get(tabName)?.content }}</span>
-    </div>
-    <div class="tab-actions">
-      <a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
-      <button igxRipple [igxIconButton]="'contained'" [disabled]="!enabled" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
-    </div>
-  </div>
-</ng-template>
-
-<div #tooltipRef="tooltip" igxTooltip>
-  Download app source.
-</div>
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -1,145 +1,6 @@
-@use "igniteui-angular/theming" as *;
-
-$custom-icon-button-theme: icon-button-theme(
-  $background: #212121,
-  $foreground: #ffffff,
-  $disabled-background: #9e9e9e,
-  $disabled-foreground: #ffffff
-);
-
 :host {
   display: block;
   width: 100%;
   height: 100%;
   margin: auto;
 }
-
-.demo-container {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-  igx-chip {
-    --igx-chip-hover-background: var(--ig-gray-300);
-    --igx-chip-focus-background: var(--ig-gray-300);
-  }
-}
-
-.router-container {
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  flex: 1;
-}
-
-.tab-container {
-  width: 100%;
-  min-height: 132px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.tab-item-container {
-  height: 100%;
-  display: inline-flex;
-}
-
-.tab-item {
-  height: 100%;
-  display: flex;
-  flex-grow: 1;
-  flex-basis: 0;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 12px;
-  cursor: pointer;
-  user-select: none;
-  border-bottom: 1px solid var(--ig-gray-300);
-
-  &--selected {
-    border-bottom: 3px solid var(--ig-primary-500);
-  }
-
-  &:hover {
-    background: hsl(from var(--ig-gray-100) h s l/0.5);
-  }
-}
-
-.tab-header {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  color: var(--ig-gray-900);
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0.15px;
-  --ig-size: var(--ig-size-medium);
-
-  &--disabled {
-    color: var(--ig-gray-700) !important;
-  }
-}
-
-.tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  color: var(--ig-gray-900);
-  font-size: 14px;
-  font-weight: 400;
-  font-family: "aktiv-grotesk", sans-serif;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-
-  &--disabled {
-    color: var(--ig-gray-700) !important;
-  }
-}
-
-.tab-actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  --ig-size: var(--ig-size-small);
-  --disabled-icon-color: #ffffff;
-
-  a {
-    padding-bottom: 2px;
-    background: linear-gradient(
-        0deg,
-        var(--ig-primary-500),
-        var(--ig-primary-500)
-      )
-      no-repeat right bottom / 0 var(--bg-h);
-    transition: background-size 350ms;
-    --bg-h: 2px;
-
-    &:where(:hover, :focus-visible) {
-      background-size: 100% var(--bg-h);
-      background-position-x: left;
-    }
-  }
-
-  .link--disabled {
-    color: var(--ig-primary-200);
-    background: none !important;
-    background-size: 0% var(--bg-h) !important;
-  }
-  @include css-vars($custom-icon-button-theme);
-}
-
-.learn-text {
-  text-decoration: none;
-  color: var(--ig-primary-500);
-  font-size: 14px;
-  font-weight: 700;
-  font-family: "aktiv-grotesk", sans-serif;
-  line-height: 20px;
-}

src/app/app.component.ts

@@ -1,79 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { RouterLinkActive, RouterModule } from '@angular/router';
-import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipDirective, IgxTooltipModule } from 'igniteui-angular';
+import { RouterModule } from '@angular/router';
 
-interface TabInfo {
-  title: string;
-  theme: string;
-  content: string;
-  moreLink: string;
-  downloadLink: string;
-}
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective,
-    IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive, IgxTooltipModule ],
+  imports: [CommonModule, RouterModule ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title = 'GridDemos';
-  public tabInfo = new Map<string, TabInfo>([
-    ['inventory', {
-      title: "ERP/ Inventory",
-      theme: "Material Light",
-      content: "Tracking and managing quantity, location and details of products in stock.",
-      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/erp-hgrid",
-      downloadLink: ""
-    }],
-    ['hr-portal', {
-      title: "Org Chart/HR Portal",
-      theme: "Fluent Light",
-      content: "Displaying company's hierarchical structure and showing employees data.",
-      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/hr-portal",
-      downloadLink: ""
-    }],
-    ['finance', {
-      title: "Financial Portfolio",
-      theme: "Bootstrap Light",
-      content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.",
-      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/finance-grid",
-      downloadLink: ""
-    }],
-    ['sales', {
-      title: "Sales Dashboard",
-      theme: "Indigo Light",
-      content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.",
-      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/sales-grid",
-      downloadLink: ""
-    }],
-    ['fleet', {
-      title: "Fleet Management",
-      theme: "Material Dark",
-      content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.",
-      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/fleet-management-grid",
-      downloadLink: ""
-    }],
-  ]);
-
-  public onLinkClick(event: MouseEvent) {
-    const targetHTML = event.currentTarget as HTMLAnchorElement;
-    if (!targetHTML.className.includes("--disabled")) {
-      window.open(targetHTML.href, '_blank')?.focus();
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  public onDownloadClick(event: MouseEvent, tabName: string) {
-    const targetHTML = event.currentTarget as HTMLAnchorElement;
-    if (!targetHTML.className.includes("--disabled")) {
-      console.log("Downloading app source!");
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  }
 }

src/app/app.routes.ts

@@ -4,12 +4,50 @@ import { HrPortalViewComponent } from './views/hr-portal/hr-portal-view.componen
 import { FinanceViewComponent } from './views/finance/finance-view.component';
 import { ErpHGridViewComponent } from './views/erp-hgrid/erp-hgrid-view.component';
 import { FleetManagementViewComponent } from './views/fleet-management/fleet-management-view.component';
+import { HomeComponent } from './views/home/home.component';
 
 export const routes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    redirectTo: 'inventory'
+    redirectTo: 'home'
+  },
+  {
+    path: 'home',
+    title: "home",
+    component: HomeComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'inventory'
+      },
+      {
+        path: 'inventory',
+        title: "Inventory",
+        component: ErpHGridViewComponent
+      },
+      {
+        path: 'hr-portal',
+        title: "HR Portal",
+        component: HrPortalViewComponent
+      },
+      {
+        path: 'finance',
+        title: "Finance",
+        component: FinanceViewComponent
+      },
+      {
+        path: 'sales',
+        title: "Sales",
+        component: SalesViewComponent
+      },
+      {
+        path: 'fleet',
+        title: "Fleet Management",
+        component: FleetManagementViewComponent
+      }
+    ]
   },
   {
     path: 'inventory',

src/app/views/home/home.component.html

@@ -0,0 +1,42 @@
+<div class="demo-container">
+  <div class="tab-container ">
+    <div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
+    </div>
+  </div>
+  <div class="router-container">
+    <router-outlet></router-outlet>
+  </div>
+</div>
+
+<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
+  <div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
+    <div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
+      {{ tabInfo.get(tabName)?.title }}
+      <igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
+    </div>
+    <div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
+      <span>{{ tabInfo.get(tabName)?.content }}</span>
+    </div>
+    <div class="tab-actions">
+      <a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
+      <button igxRipple [igxIconButton]="'contained'" [disabled]="!enabled" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
+    </div>
+  </div>
+</ng-template>
+
+<div #tooltipRef="tooltip" igxTooltip>
+  Download sample.
+</div>