From d8f94a357cc3fb9f056bdd2de8c8ba2295c41ab5 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 29 Sep 2023 13:41:45 +0200
Subject: [PATCH] add icon on navigation sections
---
components/Footer.vue | 7 ++++++-
components/Nav/Navbar.vue | 32 ++++++++++++++++++++++++++------
components/Nav/Navigation.vue | 9 ++++++---
3 files changed, 38 insertions(+), 10 deletions(-)
diff --git a/components/Footer.vue b/components/Footer.vue
index 940569a1..4d127df6 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,3 +1,8 @@
<template>
- <v-footer id="app-footer" app>footer</v-footer>
+ <v-footer app border text-center d-flex flex-column>
+ <div class="px-4 py-1 text-center w-100">
+ <span><a href="https://mdmlab.fr/" target="_blank"><v-img src="/cropped-logoblue-288x129.png" inline :width="80"
+ :aspect-ratio="288 / 129"></v-img></a></span>
+ </div>
+ </v-footer>
</template>
\ No newline at end of file
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index bef009bf..a2ba7c72 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -2,9 +2,13 @@
<v-app-bar :elevation="0" border>
<template #prepend>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+ <!-- <Logo height="45px" /> -->
</template>
<v-app-bar-title>
- <Logo height="45px" />
+ <span class="d-flex align-center">
+ <span class="text-medium-emphasis">Knowledge database of all known anti-phage systems by
+ </span><span></span>
+ </span>
</v-app-bar-title>
<template #append v-if="!mobile">
<v-btn v-for="section in sections" :key="section.id" color="primary" :href="section.href">
@@ -15,11 +19,10 @@
</template>
</v-app-bar>
<v-navigation-drawer v-model="drawer" :border="1">
- <v-card flat>
- <v-list nav density="compact" :lines="false">
- <NavNavigation :navigation="navigation" />
- </v-list>
- </v-card>
+
+ <v-list nav density="compact" :lines="false">
+ <NavNavigation :navigation="computedNavigation" />
+ </v-list>
</v-navigation-drawer>
</template>
<script setup lang="ts">
@@ -38,4 +41,21 @@ const sections = ref([
{ id: "webservice", label: "webservice", href: runtimeConfig.public.defenseFinderWebservice }
])
const drawer = ref(true);
+
+
+const computedNavigation = computed(() => {
+ return navigation.value.map(navItem => {
+ if (navItem._path === '/') {
+ return { ...navItem, icon: "md:home" }
+ }
+ if (navItem._path === '/defense-systems') {
+ return { ...navItem, icon: "md:list" }
+ }
+ if (navItem._path === '/general-concepts') {
+ return { ...navItem, icon: "md:history_edu" }
+ }
+ return navItem
+ })
+})
+
</script>
diff --git a/components/Nav/Navigation.vue b/components/Nav/Navigation.vue
index b82e0514..52de4514 100644
--- a/components/Nav/Navigation.vue
+++ b/components/Nav/Navigation.vue
@@ -11,13 +11,16 @@ const props = defineProps<{
<template v-for="navItem in props.navigation" :key="navItem?.title">
<v-list-group v-if="navItem?.children" :value="navItem.title">
<template v-slot:activator="{ props }">
- <v-list-item v-bind="props" :title="navItem.title" color="primary" exact nav></v-list-item>
+ <v-list-item v-bind="props" color="primary" :title="navItem.title"
+ :prepend-icon="navItem?.icon ? navItem.icon : null" exact nav>
+ </v-list-item>
</template>
<Navigation :navigation="navItem.children" />
</v-list-group>
<template v-else>
- <v-list-item :title="navItem.title" :value="navItem.title" :to="navItem._path" color="primary" exact
- nav></v-list-item>
+ <v-list-item :title="navItem.title" :value="navItem.title" :to="navItem._path"
+ :prepend-icon="navItem?.icon ? navItem.icon : null" color="primary" exact nav>
+ </v-list-item>
</template>
</template>
</template>
--
GitLab