bellingcat/auto-archiver-setup-tool
1
0
Fork 0
mirror of https://github.com/bellingcat/auto-archiver-setup-tool.git synced 2026-06-07 19:18:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactors navbar

Browse Source
This commit is contained in:
msramalho
2024-11-07 10:23:30 +00:00
parent b865148f4a
commit 963fe95a8a
1 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/NavBar.vue
View File

@@ -1,51 +1,70 @@
<template>
<v-app-bar style="flex-grow: 0" class="text-no-wrap">
<v-toolbar-title>
<v-toolbar-title title="Bellingcat Auto Archiver demo">
<router-link to="/" class="nodecoration">
Bellingcat Auto Archiver demo
</router-link>
</v-toolbar-title>
<v-chip v-if="$store.state.errorMessage" :title="$store.state.errorMessage" color="red" variant="tonal"
closable class="mx-4">
ERROR: {{ $store.state.errorMessage }}
</v-chip>
<span class="user" v-if="user">
<v-chip v-if="user.active" color="green" prepend-icon="mdi-checkbox-marked-circle" variant="outlined">
active
</v-chip>
<v-chip v-if="!user.active" color="red" prepend-icon="mdi-account-cancel" variant="outlined">
inactive
</v-chip>
<span class="ms-4">{{ user.email }}</span>
<v-tooltip activator="parent" location="bottom">{{ activeUserMessage }}</v-tooltip>
<v-chip v-if="$store.state.errorMessage" :title="$store.state.errorMessage" color="red" variant="tonal" closable
class="mx-4">
ERROR: {{ $store.state.errorMessage }}
</v-chip>
<v-spacer v-if="!smAndDown"></v-spacer>
<div v-if="user && !smAndDown">
<template v-for="btn in btns">
<v-btn :to="btn.to" :prepend-icon="btn.icon" variant="text" class="nodecoration" size="large">
{{ btn.text }}
<v-tooltip activator="parent" location="bottom">{{ btn.tooltip }}</v-tooltip>
</v-btn>
</template>
</div>
<v-spacer v-if="!smAndDown"></v-spacer>
<span class="user mx-2 pa-2 bg-blue-grey-lighten-5 rounded elevation-2" v-if="user">
<span>
<v-chip v-if="user.active" color="green" class="bg-white" prepend-icon="mdi-checkbox-marked-circle"
variant="outlined">
active
</v-chip>
<v-chip v-if="!user.active" color="red" class="bg-white" prepend-icon="mdi-account-cancel" variant="outlined">
inactive
</v-chip>
<v-tooltip activator="parent" location="bottom">{{ activeUserMessage }}</v-tooltip>
</span>
<span class="ms-2">{{ user.email }}</span>
<v-btn v-if="!smAndDown" prepend-icon="mdi-logout" variant="text" class="mx-2 elevation-2 bg-white" size="small"
@click="$store.dispatch('signout')">Sign Out</v-btn>
</span>
<v-btn v-if="!user" @click="$store.dispatch('signin')">Sign In</v-btn>
<v-menu v-if="user">
<v-menu v-if="user && smAndDown">
<template v-slot:activator="{ props }">
<v-app-bar-nav-icon v-bind="props"></v-app-bar-nav-icon>
</template>
<v-list>
<v-list-item to="urls">
<v-btn prepend-icon="mdi-magnify" variant="plain">Search Archives</v-btn>
</v-list-item>
<v-list-item to="sheets">
<v-btn prepend-icon="mdi-table-large" variant="plain">Sheet</v-btn>
<v-list-item v-for="btn in btns" :key="btn.to" :to="btn.to">
<v-btn :prepend-icon="btn.icon" variant="plain" class="nodecoration" size="large">
{{ btn.text }}
</v-btn>
<v-tooltip activator="parent" location="left">{{ btn.tooltip }}</v-tooltip>
</v-list-item>
<v-list-item @click="$store.dispatch('signout')">
<v-btn prepend-icon="mdi-logout" variant="plain">Sign Out</v-btn>
<v-btn prepend-icon="mdi-logout" variant="plain" class="nodecoration" size="large">Sign Out</v-btn>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
</template>
<script setup>
import { useDisplay } from 'vuetify'
const { smAndDown } = useDisplay();
</script>
<script>
export default {
@@ -53,6 +72,11 @@ export default {
data() {
return {
drawer: false,
btns: [
{ to: "/", icon: "mdi-cloud-download-outline", text: "URL", tooltip: "Archive a single URL." },
{ to: "/urls", icon: "mdi-magnify", text: "Archives", tooltip: "Search for archived URLs." },
{ to: "/sheets", icon: "mdi-table-large", text: "Sheets", tooltip: "Create, manage, and archive Google Sheets." }
]
};
},
computed: {