creates header #12

arches_lingo/src/arches_lingo/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, provide, ref } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
 import ProgressSpinner from "primevue/progressspinner";
 import Toast from "primevue/toast";
@@ -11,13 +11,16 @@ import UserFetcher from "@/arches_lingo/components/UserFetcher.vue";
 
 import type { User } from "@/arches_lingo/types";
 
+import PageHeader from "@/arches_lingo/components/header/PageHeader.vue";
+
 const user = ref<User | null>(null);
 const setUser = (userToSet: User | null) => {
     user.value = userToSet;
 };
 provide(userKey, { user, setUser });
 
 const router = useRouter();
+const route = useRoute();
 
 const isAuthenticated = computed(() => {
     return user.value && user.value.username !== "anonymous";
@@ -35,8 +38,11 @@ router.beforeEach(async (to) => {
 </script>
 
 <template>
-    <main style="font-family: sans-serif">
-        <RouterView />
+    <main style="font-family: sans-serif; height: 100vh;">
+        <PageHeader v-if="route.meta.shouldShowHeader" />
+        <div style="margin: 1rem;">
+            <RouterView />
+        </div>
     </main>
     <Suspense>
         <UserFetcher />

arches_lingo/src/arches_lingo/components/header/PageHeader.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from 'primevue/button';
+import Menubar from 'primevue/menubar';
+
+import { routeNames } from "@/arches_lingo/routes.ts";
+import UserInteraction  from "@/arches_lingo/components/user/UserInteraction.vue";
+
+const { $gettext } = useGettext();
+
+
+const items = ref([
+    {
+        label: $gettext('Search'),
+        icon: 'fa fa-search',
+        name: routeNames.search
+    },
+    {
+        label: $gettext('Advanced Search'),
+        icon: 'fa fa-file',
+        name: routeNames.advancedSearch
+    },
+]);
+
+</script>
+
+<template>
+    <Menubar :model="items" style="height: 3rem;">
+        <template #start>
+            <RouterLink 
+                class="router-link"
+                :to="{ name: routeNames.root }"
+                style="text-decoration: none; color: inherit"
+            >
+                <h2>{{ $gettext("Arches Lingo") }}</h2>
+            </RouterLink>
+        </template>
+        <template #item="{ item }">
+            <RouterLink 
+                class="router-link"
+                :to="{ name: item.name }"
+            >
+                <Button v-ripple>
+                    <i :class="item.icon"></i>
+                    <span>{{ item.label }}</span>
+                </Button>
+            </RouterLink>
+        </template>
+        <template #end>
+            <UserInteraction />
+        </template>
+    </Menubar>
+</template>
+
+<style scoped>
+</style>

arches_lingo/src/arches_lingo/components/user/UserInteraction.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useGettext } from "vue3-gettext";
+
+import { useToast } from "primevue/usetoast";
+import Button from "primevue/button";
+
+import { logout } from "@/arches_lingo/api.ts";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+    userKey,
+} from "@/arches_lingo/constants.ts";
+import { routeNames } from "@/arches_lingo/routes.ts";
+
+const { user, setUser } = inject(userKey, {
+    user: ref(null),
+    setUser: () => {},
+});
+
+const { $gettext } = useGettext();
+const toast = useToast();
+const router = useRouter();
+
+const issueLogout = async () => {
+    try {
+        await logout();
+        setUser(null);
+        router.push({ name: routeNames.login });
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Sign out failed."),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+    }
+};
+
+const bestName = computed(() => {
+    if (!user.value) {
+        return "";
+    }
+    // TODO: determine appropriate i18n for this.
+    if (user.value.first_name && user.value.last_name) {
+        return user.value.first_name + " " + user.value.last_name;
+    }
+    return user.value.username;
+});
+</script>
+
+<template>
+    <div style="display: flex; align-items: center;">
+        <span>{{ $gettext("Hello %{bestName}", { bestName }) }}</span>
+        <Button style="margin-left: 1rem;" @click="issueLogout">
+            {{ $gettext("Sign out") }}
+        </Button>
+    </div>
+</template>

arches_lingo/src/arches_lingo/pages/HomePage.vue

@@ -1,78 +1 @@
-<script setup lang="ts">
-import { computed, inject, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useGettext } from "vue3-gettext";
-
-import { useToast } from "primevue/usetoast";
-import Button from "primevue/button";
-
-import { logout } from "@/arches_lingo/api.ts";
-import {
-    DEFAULT_ERROR_TOAST_LIFE,
-    ERROR,
-    userKey,
-} from "@/arches_lingo/constants.ts";
-import { routeNames } from "@/arches_lingo/routes.ts";
-
-const { user, setUser } = inject(userKey, {
-    user: ref(null),
-    setUser: () => {},
-});
-
-const { $gettext } = useGettext();
-const toast = useToast();
-const router = useRouter();
-
-const issueLogout = async () => {
-    try {
-        await logout();
-        setUser(null);
-        router.push({ name: routeNames.login });
-    } catch (error) {
-        toast.add({
-            severity: ERROR,
-            life: DEFAULT_ERROR_TOAST_LIFE,
-            summary: $gettext("Sign out failed."),
-            detail: error instanceof Error ? error.message : undefined,
-        });
-    }
-};
-
-const bestName = computed(() => {
-    if (!user.value) {
-        return "";
-    }
-    // TODO: determine appropriate i18n for this.
-    if (user.value.first_name && user.value.last_name) {
-        return user.value.first_name + " " + user.value.last_name;
-    }
-    return user.value.username;
-});
-</script>
-
-<template>
-    <div style="display: flex; justify-content: space-between">
-        <h1>{{ $gettext("LINGO") }}</h1>
-        <span>{{ $gettext("Hello %{bestName}", { bestName }) }}</span>
-        <Button @click="issueLogout">
-            {{ $gettext("Sign out") }}
-        </Button>
-    </div>
-    <nav>
-        <RouterLink :to="{ name: routeNames.root }">
-            {{ $gettext("Go to Root") }}
-        </RouterLink>
-        <br />
-        <RouterLink :to="{ name: routeNames.schemes }">
-            {{ $gettext("Go to Schemes") }}
-        </RouterLink>
-        <br />
-        <RouterLink :to="{ name: routeNames.search }">
-            {{ $gettext("Go to Search") }}
-        </RouterLink>
-        <br />
-        <RouterLink :to="{ name: routeNames.advancedSearch }">
-            {{ $gettext("Go to Advanced Search") }}
-        </RouterLink>
-    </nav>
-</template>
+<template>HomePage placeholder</template>

arches_lingo/src/arches_lingo/routes.ts

@@ -3,26 +3,31 @@ export const routes = [
         path: "/",
         name: "root",
         component: () => import("@/arches_lingo/pages/HomePage.vue"),
+        meta: { shouldShowHeader: true },
     },
     {
         path: "/login/:next?",
         name: "login",
         component: () => import("@/arches_lingo/pages/LoginPage.vue"),
+        meta: { shouldShowHeader: false },
     },
     {
         path: "/search",
         name: "search",
         component: () => import("@/arches_lingo/pages/BasicSearch.vue"),
+        meta: { shouldShowHeader: true },
     },
     {
         path: "/advanced-search",
         name: "advanced-search",
         component: () => import("@/arches_lingo/pages/AdvancedSearch.vue"),
+        meta: { shouldShowHeader: true },
     },
     {
         path: "/schemes",
         name: "schemes",
         component: () => import("@/arches_lingo/pages/SchemeList.vue"),
+        meta: { shouldShowHeader: true },
     },
 ];