feat: add navigation drawer for mobile devices (#31)

Related: https://github.com/socketio/socket.io-admin-ui/issues/29

ui/src/components/AppBar.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-app-bar app clipped-left>
+  <v-app-bar app clipped-left :extension-height="extensionHeight">
+    <v-app-bar-nav-icon
+      class="d-lg-none"
+      @click.stop="toggleNavigationDrawer"
+    />
+
     <v-img :src="logoSrc" alt="logo" max-height="40" max-width="40" />
     <v-toolbar-title class="ml-3">Socket.IO Admin UI</v-toolbar-title>
     <v-btn small class="pa-0 ml-2 elevation-0" :href="linkToReleaseNotes">{{
@@ -8,7 +13,7 @@
 
     <v-spacer />
 
-    <div class="d-flex">
+    <div class="d-none d-lg-flex">
       <div>
         <div>
           {{ $t("connection.serverUrl") }}{{ $t("separator")
@@ -20,10 +25,26 @@
         </div>
       </div>
 
-      <v-btn @click="onUpdate" class="ml-3 align-self-center">{{
+      <v-btn outlined @click="onUpdate" class="ml-3 align-self-center">{{
         $t("update")
       }}</v-btn>
     </div>
+
+    <template v-slot:extension>
+      <div class="d-flex flex-column d-lg-none">
+        <div class="mt-3">
+          {{ $t("connection.serverUrl") }}{{ $t("separator")
+          }}<code v-if="serverUrl">{{ serverUrl }}</code>
+        </div>
+        <div class="mt-3 mb-3">
+          {{ $t("status") }}{{ $t("separator")
+          }}<ConnectionStatus :connected="connected" />
+          <v-btn small outlined @click="onUpdate" class="ml-3">{{
+            $t("update")
+          }}</v-btn>
+        </div>
+      </div>
+    </template>
   </v-app-bar>
 </template>
 
@@ -58,12 +79,28 @@ export default {
         "https://github.com/socketio/socket.io-admin-ui/releases/tag/" + version
       );
     },
+
+    extensionHeight() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+        case "sm":
+        case "md":
+          return 96;
+        case "lg":
+        case "xl":
+        default:
+          return 0;
+      }
+    },
   },
 
   methods: {
     onUpdate() {
       this.$emit("update");
     },
+    toggleNavigationDrawer() {
+      this.$store.commit("config/toggleNavigationDrawer");
+    },
   },
 };
 </script>

ui/src/components/NavigationDrawer.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-navigation-drawer app clipped permanent class="elevation-3">
+  <v-navigation-drawer
+    v-model="$store.state.config.showNavigationDrawer"
+    app
+    clipped
+    class="elevation-3"
+  >
     <v-list dense nav>
       <v-list-item
         v-for="item in items"

ui/src/store/modules/config.js

@@ -7,6 +7,7 @@ export default {
     readonly: false,
     lang: "en",
     supportedFeatures: [],
+    showNavigationDrawer: false,
   },
   mutations: {
     init(state) {
@@ -37,5 +38,8 @@ export default {
     updateConfig(state, config) {
       state.supportedFeatures = config.supportedFeatures;
     },
+    toggleNavigationDrawer(state) {
+      state.showNavigationDrawer = !state.showNavigationDrawer;
+    },
   },
 };