feat: add project header (wip)

src/App.vue

@@ -15,6 +15,7 @@
       :panels="panels"
       :projectcolors="config.colors"
       :standalone="config.standalone"
+      :projectheader="config.projectheader"
     />
 
     <q-page-container class="root">

src/components/header.vue

 <template>
   <q-header :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'">
+    <ProjectHeader
+      v-if="config.projectheader.show"
+      :projectheader="projectheader"
+    />
     <div class="header__wrap">
       <q-toolbar v-if="config.headers.info">
         <Infobar
@@ -61,6 +65,7 @@ import Language from '@/components/language.vue';
 import Navbar from '@/components/navbar.vue';
 import Softwareinfo from '@/components/softwareinfo.vue';
 import TogglePanels from '@/components/togglebar/togglePanels.vue';
+import ProjectHeader from '@/components/projectheader.vue';
 
 export default {
   name: 'Header',
@@ -71,6 +76,7 @@ export default {
     Navbar,
     Softwareinfo,
     TogglePanels,
+    ProjectHeader,
   },
   props: {
     collectiontitle: {
@@ -106,6 +112,10 @@ export default {
       default: () => {},
     },
     standalone: Boolean,
+    projectheader: {
+      type: Object,
+      default: () => {},
+    },
   },
 };
 </script>

src/components/projectheader.vue

+<template>
+  <div
+    class="projectheader q-py-xs"
+    :class="$q.dark.isActive ? 'bg-white text-black' : 'bg-accent'"
+  >
+    <div class="content">
+      <q-breadcrumbs :class="$q.dark.isActive ? 'text-black' : 'text-white'">
+        <q-breadcrumbs-el
+          :class="$q.dark.isActive ? 'text-black' : 'text-white'"
+          :label="projectheader.title_back"
+          to="/"
+          :icon="fasHome"
+        />
+        <q-breadcrumbs-el
+          :class="$q.dark.isActive ? 'text-black' : 'text-white'"
+          :label="projectheader.title_view"
+          :icon="fasFileAlt"
+        />
+      </q-breadcrumbs>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  fasHome,
+  fasFileAlt,
+} from '@quasar/extras/fontawesome-v5';
+
+export default {
+  name: 'ProjectHeader',
+  props: {
+    projectheader: {
+      type: Object,
+      required: true,
+    },
+  },
+  created() {
+    this.fasHome = fasHome;
+    this.fasFileAlt = fasFileAlt;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 12px;
+}
+
+.projectheader {
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--q-color-white);
+    color: var(--q-color-dark);
+  }
+}
+
+.q-breadcrumbs__el-icon {
+  font-size: 100% !important;
+}
+
+</style>

src/index.template.html

@@ -107,7 +107,12 @@
       ],
       "rtl": false,
       "lang": "en-us",
-      "standalone": true
+      "standalone": true,
+      "projectheader": {
+        "show": true,
+        "title_back": "The Syriac, Arabic, and Karshuni Ahiqar Texts",
+        "title_view": "Edition Viewer"
+      }
     }
     </script>