refactor: renaming and addressing the review comments

README.md

@@ -284,7 +284,7 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
       "rtl": false,
       "lang": "en-us",
       "standalone": true,
-      "projectheader": {
+      "breadcrumbNavigation": {
         "search": "https://subugoe.pages.gwdg.de/ahiqar/website/search.html",
         "show": true,
         "title_homePage_key": "title_homePage",
@@ -422,7 +422,7 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
 
   Defaults to `true`
 
-- **projectheader**
+- **breadcrumbNavigation**
 
   - **search**
 

src/App.vue

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

src/components/projectheader.vue → src/components/breadcrumbnavigation.vue

 <template>
   <div
-    class="projectheader q-py-xs"
-    :class="$q.dark.isActive ? 'bg-white text-black' : 'bg-accent'"
+    class="q-py-xs"
   >
     <div class="content">
       <q-breadcrumbs
@@ -19,11 +18,11 @@
           :icon="fasHome"
         >
           <a
-            :href="`${projectheader.website}`"
+            :href="`${config.breadcrumbNavigation.website}`"
             :class="$q.dark.isActive ? 'text-black' : 'text-white'"
             class="header-links"
           >
-            {{ $t(`${projectheader.title_homePage_key}`) }}
+            {{ $t(`${config.breadcrumbNavigation.title_homePage_key}`) }}
           </a>
         </q-breadcrumbs-el>
 
@@ -32,7 +31,7 @@
           :icon="fasSearch"
         >
           <a
-            :href="`${projectheader.search}`"
+            :href="`${config.breadcrumbNavigation.search}`"
             :class="$q.dark.isActive ? 'text-black' : 'text-white'"
             class="header-links"
           >
@@ -42,7 +41,7 @@
 
         <q-breadcrumbs-el
           :class="$q.dark.isActive ? 'text-black' : 'text-white'"
-          :label="$t(`${projectheader.title_viewer_key}`)"
+          :label="$t(`${config.breadcrumbNavigation.title_viewer_key}`)"
           :icon="fasFileAlt"
         />
       </q-breadcrumbs>
@@ -59,9 +58,9 @@ import {
 } from '@quasar/extras/fontawesome-v5';
 
 export default {
-  name: 'ProjectHeader',
+  name: 'BreadcrumbNavigation',
   props: {
-    projectheader: {
+    config: {
       type: Object,
       required: true,
     },
@@ -87,13 +86,6 @@ export default {
   text-decoration: none;
 }
 
-.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;
 }

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
+      v-if="config.breadcrumbNavigation.show"
+      :class="$q.dark.isActive ? 'bg-white text-black' : 'bg-accent'"
+    >
+      <BreadCrumbNavigation
+        :config="config"
+      />
+    </div>
     <div class="header__wrap">
       <q-toolbar v-if="config['header_section'].titles">
         <TitleBar
@@ -55,7 +59,7 @@
 
 <script>
 import Navbar from '@/components/navbar.vue';
-import ProjectHeader from '@/components/projectheader.vue';
+import BreadCrumbNavigation from '@/components/breadcrumbnavigation.vue';
 import TitleBar from '@/components/titlebar.vue';
 import TogglePanels from '@/components/togglebar/togglePanels.vue';
 import Tools from '@/components/tools.vue';
@@ -66,7 +70,7 @@ export default {
     Navbar,
     TitleBar,
     TogglePanels,
-    ProjectHeader,
+    BreadCrumbNavigation,
     Tools,
   },
   props: {
@@ -108,10 +112,6 @@ export default {
       default: () => {},
     },
     standalone: Boolean,
-    projectheader: {
-      type: Object,
-      default: () => {},
-    },
   },
 };
 </script>

src/index.template.html

@@ -117,7 +117,7 @@
       "rtl": false,
       "lang": "en-us",
       "standalone": true,
-      "projectheader": {
+      "breadcrumbNavigation": {
         "search": "https://subugoe.pages.gwdg.de/ahiqar/website/search.html",
         "show": true,
         "title_homePage_key": "title_homePage",