From 963fe95a8a7a37245e94e3294f9c2c60385d821b Mon Sep 17 00:00:00 2001
From: msramalho <19508417+msramalho@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:23:30 +0000
Subject: [PATCH] refactors navbar

---
 src/components/NavBar.vue | 72 ++++++++++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 4e826e6..bc82e4e 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -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: {