Change layout

api/resources/logback.xml

@@ -4,7 +4,7 @@
             <pattern>%d{YYYY-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
         </encoder>
     </appender>
-    <root level="TRACE">
+    <root level="DEBUG">
         <appender-ref ref="STDOUT"/>
     </root>
     <logger name="org.eclipse.jetty" level="INFO"/>

frontend/assets/main.css

@@ -1,17 +1,6 @@
-.page-enter-active {
+.page-enter-active, .page-leave-active {
-  animation: bounce-in .5s;
+    transition: opacity .5s;
 }
-.page-leave-active {
+.page-enter, .page-leave-to {
-  animation: bounce-in .5s reverse;
+    opacity: 0;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
-  }
 }

frontend/components/Navbar.vue

@@ -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-menu bottom left>
-            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
+            <template v-slot:activator="{ on }">
-            <v-btn class="mr-2" outlined>
+                <v-btn icon v-on="on">
-                Welcome {{ loggedInUser.username }}
+                    <v-icon>mdi-dots-vertical</v-icon>
                 </v-btn>
-            <v-btn outlined @click="logout">Logout</v-btn>
+            </template>
-        </div>
+
-        <v-btn v-else to="/account" text rounded>Account</v-btn>
+            <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>
 

frontend/pages/index.vue

@@ -7,7 +7,7 @@
                     :key="index"
                     class="d-flex"
                     cols="12"
-                    lg="6"
+                    md="6"
                 >
                     <v-card
                         :color="item.color"

frontend/pages/notes.vue

@@ -35,6 +35,15 @@
                 </div>
             </template>
             <template v-slot:item.actions="{ item }">
+                <v-icon
+                    small
+                    color="secondary"
+                    dark
+                    class="mr-2"
+                    @click="editItem(item)"
+                >
+                    mdi-eye
+                </v-icon>
                 <v-icon
                     small
                     color="secondary"