Add basic header

client/src/App.vue

@@ -6,6 +6,7 @@ import Login from './components/Login.vue'
 import Clicker from './components/Clicker.vue'
 import ThemeToggle from './components/ThemeToggle.vue'
 import Chat from './components/Chat.vue'
+import Header from './components/Header.vue'
 
 const routes = {
   '/': Chat,
@@ -29,6 +30,7 @@ const currentView = computed(() => {
 
 
 <template>
+  <Header />
   <Suspense>
     <component :is="currentView" />
     <template #fallback>
@@ -36,6 +38,6 @@ const currentView = computed(() => {
     </template>
   </Suspense>
   <div class="position-fixed bottom-0 end-0 mb-3 me-3">
-    <ThemeToggle />
+    <!--<ThemeToggle />-->
   </div>
 </template>

client/src/components/Header.vue

@@ -0,0 +1,82 @@
+<script setup>
+import ThemeToggle from './ThemeToggle.vue'
+import { ref, onMounted } from 'vue';
+
+let user = ref('')
+let page = ref('')
+
+window.addEventListener('hashchange', () => {
+  page.value = window.location.hash
+})
+
+async function checkUser(ev) {
+  ev.preventDefault();
+  const api_url = '/api/user'
+  const fetch_options = {
+    headers: { 'content-type': 'application/json' }
+  }
+
+  let resp = await fetch(api_url, fetch_options)
+  if (resp.ok) {
+    user.value = await resp.json()
+  }
+}
+async function signout(ev) {
+  ev.preventDefault()
+
+  const api_url = '/api/auth'
+  const fetch_options = {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+  let resp = await fetch(api_url, fetch_options)
+  console.log(resp)
+  window.location.reload()
+}
+</script>
+
+
+<template>
+  <nav class="navbar bg-body-tertiary navbar-expand-lg shadow-sm position-relative" aria-label="Chat">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Chat</a>
+
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight"
+        aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight"
+        aria-labelledby="offcanvasNavbarLightLabel">
+
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Chat</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+
+        <div class="offcanvas-body px-2">
+          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+            <li v-if="page != '/login'" class="nav-item mx-2 mt-2">
+              <button @click="signout" class="btn btn-outline-success">Sign out</button>
+            </li>
+            <li class="nav-item mf-3 mt-1">
+              <div>
+                <ThemeToggle />
+              </div>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.fill-height {
+  height: 100vh;
+}
+</style>