From 9a1ac8b74795a8de6bb66c5c647df32f8f3f6b0b Mon Sep 17 00:00:00 2001
From: Timothy Dodd <tdodd@me.com>
Date: Wed, 27 Sep 2023 18:07:00 -0400
Subject: [PATCH] Added Github link

---
 src/app/app.component.html                   | 16 +++++++--
 src/app/app.component.scss                   | 38 +++++++++++++++++++-
 src/app/nav/side-bar/side-bar.component.html | 16 +++++----
 src/app/nav/side-bar/side-bar.component.scss | 17 ++++++---
 src/assets/github-mark.svg                   |  1 +
 src/styles.scss                              |  9 +++--
 6 files changed, 79 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/github-mark.svg

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9197351..90aceca 100644
--- a/src/app/app.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b77ef3a..d685186 100644
--- a/src/app/app.component.scss
+++ b/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;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/app/nav/side-bar/side-bar.component.html b/src/app/nav/side-bar/side-bar.component.html
index 27b903e..a047e43 100644
--- a/src/app/nav/side-bar/side-bar.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/nav/side-bar/side-bar.component.scss b/src/app/nav/side-bar/side-bar.component.scss
index d2918a9..0f83167 100644
--- a/src/app/nav/side-bar/side-bar.component.scss
+++ b/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 {
diff --git a/src/assets/github-mark.svg b/src/assets/github-mark.svg
new file mode 100644
index 0000000..8d31224
--- /dev/null
+++ b/src/assets/github-mark.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="white"/></svg>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 7ccedba..f81d6b2 100644
--- a/src/styles.scss
+++ b/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,