From fd0d0f0453f294b08f18495a772b36ad7617974d Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Thu, 17 Mar 2022 21:59:38 +0100
Subject: populate navbar

---
 web/pw-server/src/routes/__layout.svelte | 39 +++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

(limited to 'web/pw-server/src/routes')

diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index 53b6269..250cdef 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -3,7 +3,15 @@
 </script>
 
 <div class="outer-container">
-  <div class="top-bar" />
+  <div class="navbar">
+    <div class="navbar-main">
+      <a href="/">PlanetWars</a>
+    </div>
+    <div class="navbar-user">
+      <a class="navbar-href" href="login">Sign in</a>
+      <a class="navbar-href" href="register">Sign up</a>
+    </div>
+  </div>
   <slot />
 </div>
 
@@ -17,10 +25,35 @@
     flex-direction: column;
   }
 
-  .top-bar {
-    height: 40px;
+  .navbar {
+    height: 48px;
     background-color: $bg-color;
     border-bottom: 1px solid;
     flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+  }
+
+  .navbar-user a {
+    font-size: 18px;
+    color: #eee;
+    font-family: Helvetica, sans-serif;
+    padding: 4px 8px;
+    text-decoration: none;
+  }
+
+  .navbar-main {
+    margin: auto 0;
+  }
+
+  .navbar-main a {
+    font-size: 20px;
+    color: #eee;
+    text-decoration: none;
+  }
+
+  .navbar-user {
+    margin: auto 0;
   }
 </style>
-- 
cgit v1.2.3