From ddd78686116e66deabe732416988a012811fe8e5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 17:06:02 +0100
Subject: [PATCH] Update navigation component

---
 .../standard-components/src/Navigation.svelte | 92 ++++++++++---------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index 8fafffc0cd..359e0c53a9 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -1,28 +1,11 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
-
-  export let className = ""
   export let onLoad
-  export let backgroundColor
-  export let color
-  export let borderWidth
-  export let borderColor
-  export let borderStyle
   export let logoUrl
-  export let title
   export let _bb
+  export let title
 
   let itemContainer
   let hasLoaded
-  let currentChildren
-
-  $: cssVariables = {
-    backgroundColor,
-    color,
-    borderWidth,
-    borderColor,
-    borderStyle,
-  }
 
   $: {
     if (itemContainer) {
@@ -35,40 +18,63 @@
   }
 </script>
 
-<nav use:cssVars={cssVariables}>
-  <a href="/">
-    <img class="logo" alt="logo" src={logoUrl} height="48" />
-    <span>{title}</span>
-  </a>
-  <div class="menu-items" bind:this={itemContainer} />
-</nav>
+<div class="nav">
+  <div class="nav__top">
+    <a href="/">
+      {#if logoUrl}
+        <img class="logo" alt="logo" src={logoUrl} height="48" />
+      {/if}
+      {#if title}
+        <span>{title}</span>
+      {/if}
+    </a>
+    <div class="nav__controls">
+      <div>Log out</div>
+    </div>
+  </div>
+  <div class="nav__menu" bind:this={itemContainer} />
+</div>
 
 <style>
-  nav {
-    color: var(--color);
-    background-color: var(--backgroundColor);
-    align-items: center;
+  .nav {
     display: flex;
-    font-weight: bold;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .nav__top {
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
-    padding: 20px 0px;
-  }
-
-  nav > a {
-    display: flex;
     align-items: center;
-    font-size: 1.5em;
-    color: var(--color);
-    text-decoration: none;
   }
-
-  nav a img {
+  .nav__top img {
     margin-right: 16px;
   }
-  .menu-items {
+
+  .nav__controls {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 16px;
   }
-  .menu-items > :global(*) {
-    margin: 0 10px;
+  .nav__controls > div:hover {
+    cursor: pointer;
+    color: #4285f4;
+  }
+
+  .nav__menu {
+    display: flex;
+    margin-top: 40px;
+    gap: 16px;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .nav__menu > a {
+    font-size: 1.5em;
+    text-decoration: none;
   }
 </style>