All kinds of styling

2 files changed, 13 insertions, 3 deletions

diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
index f54f3bf..28ae4ec 100644
--- a/hi-ui/src/routes/+layout.svelte
+++ b/hi-ui/src/routes/+layout.svelte
@@ -1,9 +1,21 @@
 <script>
+  import { AppBar } from '@skeletonlabs/skeleton';
   import "../app.css";
+
+  import { currentUser } from '../store';
+  import LogOut from '../lib/LogOut.svelte';
 </script>
 
 <div id="app">
-    <h1>hi</h1>
+    <AppBar>
+        <svelte:fragment slot="lead">🌳</svelte:fragment>
+        understory
+        <svelte:fragment slot="trail">
+            {#if $currentUser}
+                <LogOut />
+            {/if}
+        </svelte:fragment>
+    </AppBar>
 
     <slot />
 </div>
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index cae1aff..932582d 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -8,7 +8,6 @@
     import ChannelList from '../lib/ChannelList.svelte';
     import CreateChannelForm from '../lib/CreateChannelForm.svelte';
     import LogIn from '../lib/LogIn.svelte';
-    import LogOut from '../lib/LogOut.svelte';
     import MessageInput from '../lib/MessageInput.svelte';
 
     let user;
@@ -59,7 +58,6 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else if user != null}
-    <LogOut />
     <div id="interface">
         <div class="channel-list">
             <ChannelList />