add styles and routing

src/app/about/about.component.html

@@ -0,0 +1 @@
+<p>about works!</p>

src/app/about/about.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/app-layout/app-layout.component.html

@@ -1,5 +1,5 @@
 <app-header></app-header>
-<p>app-layout works!</p>
+<router-outlet></router-outlet>
 <br>
 <br>
 <br>

src/app/app-routing.module.ts

@@ -1,13 +1,29 @@
 import { NgModule } from '@angular/core'
 import { Routes, RouterModule } from '@angular/router'
 import { AppLayoutComponent } from './app-layout/app-layout.component'
+import { AboutComponent } from './about/about.component'
+import { PortfolioComponent } from './portfolio/portfolio.component'
+import { ExhibitionsComponent } from './exhibitions/exhibitions.component'
+import { InstallationsComponent } from './installations/installations.component'
+import { EntertainmentComponent } from './entertainment/entertainment.component'
+import { PerformancesComponent } from './performances/performances.component'
+import { WorkshopsComponent } from './workshops/workshops.component'
 
 
 const routes: Routes = [
   {
     path: '',
     component: AppLayoutComponent,
-    children: []
+    children: [
+      { path: '', redirectTo: '/portfolio', pathMatch: 'full' },
+      { path: 'portfolio', component: PortfolioComponent },
+      { path: 'about', component: AboutComponent },
+      { path: 'exhibitions', component: ExhibitionsComponent },
+      { path: 'installations', component: InstallationsComponent },
+      { path: 'entertainment', component: EntertainmentComponent },
+      { path: 'performances', component: PerformancesComponent },
+      { path: 'workshops', component: WorkshopsComponent }
+    ]
   }
 ]
 

src/app/app.module.ts

@@ -5,12 +5,26 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { AppLayoutComponent } from './app-layout/app-layout.component';
+import { AboutComponent } from './about/about.component';
+import { PortfolioComponent } from './portfolio/portfolio.component';
+import { ExhibitionsComponent } from './exhibitions/exhibitions.component';
+import { InstallationsComponent } from './installations/installations.component';
+import { EntertainmentComponent } from './entertainment/entertainment.component';
+import { PerformancesComponent } from './performances/performances.component';
+import { WorkshopsComponent } from './workshops/workshops.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    AppLayoutComponent
+    AppLayoutComponent,
+    AboutComponent,
+    PortfolioComponent,
+    ExhibitionsComponent,
+    InstallationsComponent,
+    EntertainmentComponent,
+    PerformancesComponent,
+    WorkshopsComponent
   ],
   imports: [
     BrowserModule,

src/app/entertainment/entertainment.component.html

@@ -0,0 +1 @@
+<p>entertainment works!</p>

src/app/entertainment/entertainment.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntertainmentComponent } from './entertainment.component';
+
+describe('EntertainmentComponent', () => {
+  let component: EntertainmentComponent;
+  let fixture: ComponentFixture<EntertainmentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EntertainmentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EntertainmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/entertainment/entertainment.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-entertainment',
+  templateUrl: './entertainment.component.html',
+  styleUrls: ['./entertainment.component.scss']
+})
+export class EntertainmentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/exhibitions/exhibitions.component.html

@@ -0,0 +1 @@
+<p>exhibitions works!</p>

src/app/exhibitions/exhibitions.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExhibitionsComponent } from './exhibitions.component';
+
+describe('ExhibitionsComponent', () => {
+  let component: ExhibitionsComponent;
+  let fixture: ComponentFixture<ExhibitionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExhibitionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExhibitionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/exhibitions/exhibitions.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-exhibitions',
+  templateUrl: './exhibitions.component.html',
+  styleUrls: ['./exhibitions.component.scss']
+})
+export class ExhibitionsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/header/header.component.html

@@ -7,10 +7,13 @@
   <div class="menu" [ngClass]="{'open': isMenuOpen}">
     <nav class="nav">
       <ul class="items">
-        <li class="item">aaa</li>
-        <li class="item">bbb</li>
-        <li class="item">ccc</li>
-        <li class="item">ddd</li>
+        <li class="item" routerLink="/about" [routerLinkActive]="'active'">About</li>
+        <li class="item" routerLink="/portfolio" [routerLinkActive]="'active'">Portfolio</li>
+        <li class="item" routerLink="/exhibitions" [routerLinkActive]="'active'">Exhibitions</li>
+        <li class="item" routerLink="/installations" [routerLinkActive]="'active'">Installations</li>
+        <li class="item" routerLink="/entertainment" [routerLinkActive]="'active'">Entertainment</li>
+        <li class="item" routerLink="/performances" [routerLinkActive]="'active'">Performances</li>
+        <li class="item" routerLink="/workshops" [routerLinkActive]="'active'">Workshops</li>
       </ul>
     </nav>
   </div>

src/app/header/header.component.scss

@@ -101,10 +101,34 @@
     .nav {
       display: block;
       text-align: center;
-      padding-top: 150px;
-      height: 100vh;
-      overflow: auto;
-      border: 1px solid red;
+      padding-top: 180px;
+      height: calc(100vh - 180px);
+      overflow: hidden;
+      overflow-y: auto;
+
+      .items {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .item {
+          padding: 0;
+          margin: 10px 0;
+          font-weight: bold;
+          font-size: $font-30;
+          color: $black;
+          cursor: pointer;
+          transition: transform .4s;
+
+          &:hover {
+            transform: scale(1.4);
+          }
+
+          &.active {
+            text-decoration: underline;
+          }
+        }
+      }
     }
 
     &.open {

src/app/header/header.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, HostListener, Inject } from '@angular/core'
+import { Router, NavigationEnd } from '@angular/router'
 import { DOCUMENT } from '@angular/common'
 
 @Component({
@@ -11,7 +12,13 @@ export class HeaderComponent implements OnInit {
   public isSticky: boolean = false
   public isMenuOpen: boolean = false
 
-  constructor(@Inject(DOCUMENT) private document: Document) { }
+  constructor(@Inject(DOCUMENT) private document: Document, private router: Router) {
+    router.events.subscribe((val) => {
+      this.isMenuOpen = false
+      this.isSticky = true
+      this.document.body.classList.remove('no-scroll')
+    })
+  }
 
   ngOnInit(): void {
   }

src/app/installations/installations.component.html

@@ -0,0 +1 @@
+<p>installations works!</p>

src/app/installations/installations.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstallationsComponent } from './installations.component';
+
+describe('InstallationsComponent', () => {
+  let component: InstallationsComponent;
+  let fixture: ComponentFixture<InstallationsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InstallationsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstallationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/installations/installations.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-installations',
+  templateUrl: './installations.component.html',
+  styleUrls: ['./installations.component.scss']
+})
+export class InstallationsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/performances/performances.component.html

@@ -0,0 +1 @@
+<p>performances works!</p>

src/app/performances/performances.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformancesComponent } from './performances.component';
+
+describe('PerformancesComponent', () => {
+  let component: PerformancesComponent;
+  let fixture: ComponentFixture<PerformancesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformancesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformancesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/performances/performances.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-performances',
+  templateUrl: './performances.component.html',
+  styleUrls: ['./performances.component.scss']
+})
+export class PerformancesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/portfolio/portfolio.component.html

@@ -0,0 +1 @@
+<p>portfolio works!</p>

src/app/portfolio/portfolio.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PortfolioComponent } from './portfolio.component';
+
+describe('PortfolioComponent', () => {
+  let component: PortfolioComponent;
+  let fixture: ComponentFixture<PortfolioComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PortfolioComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PortfolioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portfolio/portfolio.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-portfolio',
+  templateUrl: './portfolio.component.html',
+  styleUrls: ['./portfolio.component.scss']
+})
+export class PortfolioComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/workshops/workshops.component.html

@@ -0,0 +1 @@
+<p>workshops works!</p>

src/app/workshops/workshops.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkshopsComponent } from './workshops.component';
+
+describe('WorkshopsComponent', () => {
+  let component: WorkshopsComponent;
+  let fixture: ComponentFixture<WorkshopsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkshopsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkshopsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/workshops/workshops.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-workshops',
+  templateUrl: './workshops.component.html',
+  styleUrls: ['./workshops.component.scss']
+})
+export class WorkshopsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/assets/scss/global.scss

@@ -5,6 +5,7 @@ body {
   height: 100%;
   font-family: $font-primary;
   font-size: $font-20;
+  color: $black;
 
   &.no-scroll {
     overflow: hidden;

src/assets/scss/variables.scss

@@ -22,10 +22,10 @@ $breadcrumb-height: 60px;
 
 // Colors
 $white:       #fff;
-$black:       #000;
-$gray:        #666;
-$light-gray:  #f5f5f5;
-$dark-gray:   #47464e;
+$black:       #111;
+$gray:        #ccc;
+$light-gray:  #eee;
+$dark-gray:   #666;
 
 $yellow:      #a2dc02;