Server-demo-v2: polish navbar.

eclipse-leshan · Jun 25, 2021 · 6227ecb · 6227ecb
1 parent a95a7ce
commit 6227ecb
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/leshan-server-demo/webapp2/src/components/LeshanNavBar.vue b/leshan-server-demo/webapp2/src/components/LeshanNavBar.vue
@@ -1,19 +1,22 @@
 <template>
   <v-app-bar :dark="true" flat dense max-height="48">
-    <v-toolbar-title
-      ><v-img src="@/assets/image/logo.png" max-height="48" contain></v-img>
+    <v-toolbar-title v-if="$vuetify.breakpoint.smAndUp"
+      ><v-img src="@/assets/image/logo.png" max-height="32" contain></v-img>
     </v-toolbar-title>
 
     <v-spacer></v-spacer>
-    <v-tabs right>
+    <v-tabs :right="$vuetify.breakpoint.smAndUp" :centered="!$vuetify.breakpoint.smAndUp">
       <v-tab
         v-for="page in pages"
         :key="page.title"
         fixed-tabs
         router
         :to="page.route"
       >
-        <v-icon class="pr-2">{{ page.icon }}</v-icon> {{ page.title }}</v-tab
+        <v-icon class="pr-2">{{ page.icon }}</v-icon
+        ><span v-if="$vuetify.breakpoint.smAndUp">
+          {{ page.title }}
+        </span></v-tab
       >
     </v-tabs>
   </v-app-bar>