diff --git a/components/Footer.vue b/components/Footer.vue index 940569a18a799da1ba38bedbe5d48653167ef830..4d127df67d245406c1257325cdcd339b06a370ec 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 bef009bfaa558adbee5b26dc04a9b6fb0a587de2..a2ba7c72d598b6dd21fc12716f1d18a1a4517a82 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 b82e051409aa4ab3bd7147431c434ed9983efd3c..52de4514918ae23c1e2d24103e1fd21a375c4edc 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>