Change layout

2020-04-28 19:57:49 +02:00
parent 3d2f950433
commit cbe1a8a7b7
5 changed files with 34 additions and 25 deletions
@@ -2,14 +2,25 @@
    <v-app-bar fixed app color="primary" dark>
        <v-btn to="/" text rounded>Simple Notes</v-btn>
        <v-spacer />
-        <div v-if="isAuthenticated">
-            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
-            <v-btn class="mr-2" outlined>
-                Welcome {{ loggedInUser.username }}
-            </v-btn>
-            <v-btn outlined @click="logout">Logout</v-btn>
-        </div>
-        <v-btn v-else to="/account" text rounded>Account</v-btn>
+        <v-menu bottom left>
+            <template v-slot:activator="{ on }">
+                <v-btn icon v-on="on">
+                    <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+            </template>
+
+            <v-list>
+                <v-list-item v-if="isAuthenticated" to="/notes">
+                    My notes
+                </v-list-item>
+                <v-list-item v-if="isAuthenticated" @click="logout">
+                    Logout
+                </v-list-item>
+                <v-list-item v-else>
+                    <v-btn to="/account" text rounded>Account</v-btn>
+                </v-list-item>
+            </v-list>
+        </v-menu>
    </v-app-bar>
 </template>