70 nav layout (#80)

closes #70

---------

Co-authored-by: Claire Olmstead <[email protected]>

src/components/Nav.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { navigating } from '$app/stores';
+  import { onMount } from 'svelte';
+  import iconLogo from '$lib/assets/icon-logo.png';
+
+  let url = '';
+  onMount(() => (url = window.location.pathname));
+
+  $: navItems = [
+    { name: 'Home', href: '/', isActive: url === '/' },
+    { name: "FAQ's", href: '/faq', isActive: url === '/faq' },
+    { name: 'Logout', href: '', isActive: false },
+  ];
+
+  //TODO: logout in store once store created
+  const logout = () => {};
+</script>
+
+<div class="bg-bg-black w-[126px] min-w-[126px] h-screen flex flex-col justify-center items-center">
+  <img alt="iconLogo" src={iconLogo} class="w-[57px] absolute top-7 left-6" />
+  <div class="flex flex-col w-[100%]">
+    {#each navItems as navItem}
+      {#key navItems}
+        <a
+          on:click={() => {
+            const items = navItems.map((item) => {
+              return { ...item, isActive: item.name === navItem.name };
+            });
+            navItems = items;
+          }}
+          href={navItem.href}
+          class={` h-[100px] flex items-center justify-center font-bold text-sm ${
+            navItem.isActive && 'bg-bg-black-active shadow-blue-border'
+          }`}>{navItem.name}</a
+        >
+      {/key}
+    {/each}
+  </div>
+</div>

src/routes/+layout.svelte

@@ -1,11 +1,17 @@
 <script>
   import Header from '../components/Header.svelte';
+  import Nav from '../components/Nav.svelte';
   import wave from '$lib/assets/bg-wave.png';
 </script>
 
 <div>
   <img alt="The project logo" src={wave} class="fixed w-[100%] top-0 right-0 z-[-1]" />
-  <Header />
-  <slot class="z-10" />
+  <div class="flex">
+    <Nav />
+    <div class="m-6 w-[100%]">
+      <Header />
+      <slot class="z-10" />
+    </div>
+  </div>
 </div>
 ;

src/routes/+page.svelte

@@ -14,7 +14,6 @@
   import KeySelection from '$components/KeySelection.svelte';
   import ProviderActions from '$components/ProviderActions.svelte';
   import ChainStatus from '$components/ChainStatus.svelte';
-
   import type { ChainInfo, MsaInfo } from '$lib/storeTypes';
 
   let token = '';

src/routes/faq/+page.svelte

@@ -0,0 +1 @@
+<div>FAQ_PAGE</div>

src/style/app.css

@@ -49,7 +49,6 @@
   body {
     color: white;
     min-height: 100vh;
-    margin: 2em;
     background: linear-gradient(to top, #2c333d, #007da1);
   }
 

tailwind.config.js

@@ -32,6 +32,7 @@ export default {
       },
       boxShadow: {
         md: '0px 4px 7px rgba(0,0,0,.25)',
+        'blue-border': '8px 0 0 #69B9CD',
       },
       backgroundImage: {
         topRight: 'url(/assets/top-right-bars.png)',