Complete sidebar

projects/example-app/src/app/app.component.css

@@ -4,7 +4,7 @@
   grid-template-columns: 300px auto;
 }
 
-.sidebar {
+app-sidebar {
   grid-area: "sidebar";
 }
 

projects/example-app/src/app/app.component.html

@@ -1,6 +1,4 @@
-<div class="sidebar">
-  <a routerLink="/examples/default">Default</a>
-</div>
+<app-sidebar></app-sidebar>
 <div class="main">
   <router-outlet></router-outlet>
 </div>

projects/example-app/src/app/app.module.ts

@@ -3,9 +3,10 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
+import { SidebarComponent } from './sidebar/sidebar.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, SidebarComponent],
   imports: [
     BrowserModule,
     RouterModule.forRoot([

projects/example-app/src/app/sidebar/sidebar.component.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.links > a {
+  display: block;
+}

projects/example-app/src/app/sidebar/sidebar.component.html

@@ -0,0 +1,8 @@
+<h3>Examples</h3>
+<div class="links">
+  <a routerLink="/examples/default">Default</a>
+  <a routerLink="/examples/custom-default-loading">Custom default loading</a>
+  <a routerLink="/examples/ngrx">NgRx</a>
+  <a routerLink="/examples/custom-loading-template">Custom loading template</a>
+  <a routerLink="/examples/lightweight">Lightweight</a>
+</div>

projects/example-app/src/app/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SidebarComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/example-app/src/app/sidebar/sidebar.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.css'],
+})
+export class SidebarComponent {}