Merge pull request #10 from timothydodd/ft/dodd/github

Added Github link

src/app/app.component.html

@@ -1,4 +1,14 @@
-<app-side-bar></app-side-bar>
-<div class="route-container">
-    <router-outlet></router-outlet>
+<div class="left-gutter">
+
+</div>
+<div class="middle-section">
+    <app-side-bar></app-side-bar>
+    <div class="route-container">
+        <div class="top-bar"><a href="https://github.com/timothydodd/utilplex"><img alt="GitHub"
+                     src="assets/github-mark.svg" /></a></div>
+        <router-outlet></router-outlet>
+    </div>
+</div>
+<div class="right-gutter">
+
 </div>

src/app/app.component.scss

@@ -1,17 +1,53 @@
 :host {
     display: flex;
     flex-direction: row;
+    min-height: 100%;
 
-    height: 100vh;
 
     app-side-bar {
         flex-shrink: 1;
     }
 
+    .left-gutter {
+        background-color: var(--background-dark);
+    }
+
+    .middle-section {
+        display: flex;
+        flex-direction: row;
+        min-height: 100%;
+        height: 100vh;
+        width: 1600px;
+    }
+
+    .left-gutter,
+    .right-gutter,
+    .middle-section {
+        flex-grow: 1;
+    }
+
     .route-container {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
         padding: 24px;
+        padding-left: 78px;
+        gap: 15px;
+
+        .top-bar {
+            display: flex;
+            flex-direction: row;
+            flex-shrink: 1;
+
+            a {
+                margin-left: auto;
+            }
+
+            img {
+
+                width: 32px;
+                height: 32px;
+            }
+        }
     }
 }

src/app/nav/side-bar/side-bar.component.html

@@ -1,9 +1,11 @@
-<div class="logo">Util</div>
-<div *ngFor="let c of categories" class="cats">
-    <h5>{{c.name}}</h5>
-    <div class="cat-items">
-        <a *ngFor="let r of c.routes" [routerLink]="[r.url]" routerLinkActive="router-link-active">{{
-            r.name
-            }}</a>
+<div class="wrap">
+    <div class="logo">Util</div>
+    <div *ngFor="let c of categories" class="cats">
+        <h5>{{c.name}}</h5>
+        <div class="cat-items">
+            <a *ngFor="let r of c.routes" [routerLink]="[r.url]" routerLinkActive="router-link-active">{{
+                r.name
+                }}</a>
+        </div>
     </div>
 </div>

src/app/nav/side-bar/side-bar.component.scss

@@ -1,10 +1,17 @@
  :host {
-     padding: 24px;
      display: flex;
-     flex-direction: column;
-     gap: 24px;
-     background-color: var(--background);
-     align-items: flex-end;
+     background-color: var(--background-dark);
+     border-right: 1px solid rgba($color: white, $alpha: 0.05);
+
+
+     .wrap {
+         display: flex;
+         flex-direction: column;
+         gap: 24px;
+         padding: 24px;
+         align-items: flex-end;
+         border-right: 1px solid black;
+     }
  }
 
  .logo {

src/styles.scss

@@ -20,7 +20,8 @@ $yellow: #e4b676;
 :root {
     --border-color: rgba(255, 255, 255, 0.1);
     --background: #282a36;
-    --background-dark: #{darken(#282a36, 5%)};
+    --background-dark: #{darken(#282a36, 2%)};
+    --background-dark2: #{darken(#282a36, 1%)};
     --headers: white;
     --primary: #{$blue};
     --primary-rgb: #{hexToRGBString($blue)};
@@ -32,9 +33,13 @@ $yellow: #e4b676;
 @import 'styles/buttons';
 
 body {
-    background-color: var(--background-dark);
+    background-color: var(--background-dark2);
     font-family: 'Montserrat', sans-serif;
     color: rgba(255, 255, 255, 0.8);
+    scroll-behavior: smooth;
+    height: 100%;
+    overscroll-behavior-y: none;
+
 }
 
 h1,