start making some css

3 files changed, 46 insertions, 4 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..b2dfb87 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,19 @@
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: black solid 1px;
+    padding: 0 10px;
+    background-color: #d9d9d9;
+
+    h1 {
+        padding: 0;
+        margin: 0;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index a490237..3058117 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,6 +1,17 @@
-
-<h1>jelly solutions</h1>
-<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button>
-<hr>
+<div id="header">
+    <span>
+        <a routerLink="/">
+            <h1>Jelly Solutions</h1>
+        </a>
+    </span>
+    <div>
+        <a routerLink="/dashboard">Dashboard</a>
+        <a routerLink="/cupboard">Cupboard</a>
+        <a routerLink="/basket">Basket</a>
+        <span>{{currentUser$ | async}}</span>
+        <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
+        <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+    </div>
+</div>
 
 <router-outlet />
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 90d4ee0..471f272 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1 +1,13 @@
 /* You can add global styles to this file, and also import other style files */
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+}
+
+body {
+    font-family: sans-serif;
+}