finished nav re-theme and fixed scrolling bug

src/app/app.component.html

@@ -1,10 +1,8 @@
-<div class="centre-content">
+<app-nav></app-nav>
-  <app-nav></app-nav>
+<div class="page-fixed">
-  <div class="page-fixed-width">
+  <div class="no-scroll-bar">
     <app-header></app-header>
-    <div class="content no-scroll-bar">
+    <router-outlet></router-outlet>
-      <router-outlet></router-outlet>
+    <app-footer></app-footer>
-    </div>
   </div>
 </div>
-<app-footer></app-footer>

src/app/app.component.scss

@@ -1,50 +1,33 @@
 @use 'src/app/shared/styles/_variables.color' as colors;
 
 :host {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    justify-content: center;
-    align-items: center;
-}
-
-.centre-content {
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 }
 
-.page-fixed-width {
+.page-fixed {
     width: 1000px;
+    height: 100%;
     display: flex;
+    align-items: center;
+    justify-content: center;
     flex-direction: column;
-    overflow-y: auto;
     background-color: colors.$inklets-color-grey;
 }
 
-.content {
-    flex-grow: 1;
-    overflow-y: auto;
-}
-
-app-nav {
-    margin-left: -125px;
-}
-
-app-footer {
-    bottom: 20px;
-}
-
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scroll-bar::-webkit-scrollbar {
     display: none;
+    overflow: auto;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .no-scroll-bar {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
+    overflow: auto;
 }

src/app/nav/nav.component.scss

@@ -8,16 +8,15 @@ ul {
 }
 
 li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin: 25px;
-  border-radius: 50px;
+  width: 120px;
-  width: 100px;
+  height: 120px;
-  height: 100px;
-  padding-right: 50px;
-  margin-right: -15px;
 }
 
 li a {
-  right: 0;
   border-radius: 50px;
   width: 100px;
   height: 100px;

src/app/nav/nav.component.ts

@@ -1,46 +1,84 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
 import { Pages } from '../shared/models/pages.model';
 
 @Component({
-  selector: 'app-nav',
+    selector: 'app-nav',
-  animations: [
+    animations: [
-      trigger('openClose', [
+        trigger('openClose', [
-          state(
+            state(
-              'bump',
+                'bump',
-              style({
+                style({
-                  'margin-left': 0
+                    width: '110px',
-              })
+                    height: '110px',
-          ),
+                    'line-height': '110px',
-          state(
+                    'border-radius': '55px'
-              'norm',
+                })
-              style({
+            ),
-                  'margin-left': '15px'
+            state(
-              })
+                'norm',
-          ),
+                style({
-          transition('norm => bump', [
+                    width: '100px',
-              animate(
+                    height: '100px',
-                  '0.1s'
+                    'line-height': '100px',
-              )
+                    'border-radius': '50px'
-          ]),
+                })
-          transition('bump => norm', [
+            ),
-              animate(
+            transition('norm => bump', [
-                  '0.1s'
+                animate(
-              )
+                    '0.2s', keyframes([
-          ])
+                        style({
-      ])
+                            width: '100px',
-  ],
+                            height: '100px',
-  templateUrl: './nav.component.html',
+                            'line-height': '100px',
-  styleUrls: ['./nav.component.scss']
+                            'border-radius': '50px'
+                        }),
+                        style({
+                            width: '120px',
+                            height: '120px',
+                            'line-height': '120px',
+                            'border-radius': '60px'
+                        }),
+                        style({
+                            width: '110px',
+                            height: '110px',
+                            'line-height': '110px',
+                            'border-radius': '55px'
+                        })
+                    ])
+                )
+            ]),
+            transition('bump => norm', [
+                animate(
+                    '0.1s', keyframes([
+                        style({
+                            width: '110px',
+                            height: '110px',
+                            'line-height': '110px',
+                            'border-radius': '55px'
+                        }),
+                        style({
+                            width: '100px',
+                            height: '100px',
+                            'line-height': '100px',
+                            'border-radius': '50px'
+                        })
+                    ])
+                )
+            ])
+        ])
+    ],
+    templateUrl: './nav.component.html',
+    styleUrls: ['./nav.component.scss']
 })
 export class NavComponent implements OnInit {
 
-  Pages = Pages;
+    Pages = Pages;
-  state: string[] = ['norm', 'norm', 'norm'];
+    state: string[] = ['norm', 'norm', 'norm'];
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit(): void {
+    ngOnInit(): void {
-  }
+    }
 
 }

src/app/projects/project/project.component.html

@@ -1,2 +1,3 @@
 <a routerLink="..">&lt; back</a>
 <span [innerHTML]="project.content"></span>
+<a routerLink="..">&lt; back</a>