Improve side and top bars

packages/dashboard-v2/src/components/main/BucketPicker.vue

@@ -0,0 +1,48 @@
+<template>
+    <q-select :model-value="selectedBucket" @update:model-value="changeBucket" color="blue" stack-label :dense="true" filled bg-color="white"
+              :options="mainStore.buckets.map((obj) => obj.name)" label="Bucket" style="min-width: 100px" />
+<!--  <q-select filled :options="mainStore.buckets.map((obj) => obj.name)" label="Bucket" stack-label :dense="true" />-->
+
+<!--  <q-field label="Select Bucket" stack-label label-color="white">-->
+<!--    <template v-slot:control>-->
+<!--      <q-btn-dropdown color="blue" :label="selectedBucket">-->
+<!--        <q-list>-->
+<!--          <q-item v-close-popup clickable @click="changeBucket(bucket.name)" v-for="bucket in mainStore.buckets" :key="bucket.name">-->
+<!--            <q-item-section>-->
+<!--              <q-item-label>{{bucket.name}}</q-item-label>-->
+<!--            </q-item-section>-->
+<!--          </q-item>-->
+<!--        </q-list>-->
+<!--      </q-btn-dropdown>-->
+<!--    </template>-->
+<!--  </q-field>-->
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { useMainStore } from "stores/main-store";
+
+export default defineComponent({
+  name: "BucketPicker",
+  methods: {
+    changeBucket: function(bucket) {
+      this.$router.push({ name: `${this.selectedApp}-home`, params: { bucket: bucket } });
+    }
+  },
+  computed: {
+    selectedBucket: function() {
+      return this.$route.params.bucket;
+    },
+    selectedApp: function() {
+      return this.$route.name.split("-")[0];
+    }
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    return {
+      mainStore
+    };
+  }
+});
+</script>

packages/dashboard-v2/src/components/main/LeftSidebar.vue

@@ -1,49 +1,32 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md">
+    <div class="flex column">
+      <q-btn color="green" icon="add" stack class="q-mb-lg" label="New">
+        <q-menu>
+          <q-list>
+            <q-item clickable v-close-popup @click="$refs.createFolder.open()">
+              <q-item-section>
+                <q-item-label><q-icon name="create_new_folder" size="sm"/> New Folder</q-item-label>
+              </q-item-section>
+            </q-item>
 
-      <q-select :model-value="selectedBucket" @update:model-value="changeBucket" :options="mainStore.buckets.map((obj) => obj.name)" label="Bucket" />
+            <q-item clickable v-close-popup @click="$bus.emit('openFilesUploader')">
+              <q-item-section>
+                <q-item-label><q-icon name="upload_file" size="sm"/> Upload Files</q-item-label>
+              </q-item-section>
+            </q-item>
 
-      <q-field label="Application" stack-label borderless>
-        <template v-slot:control>
-          <q-btn-toggle
-            style="width: 100%"
-            :model-value="selectedApp" @update:model-value="changeApp"
-            :spread="true"
-            toggle-color="primary"
-            :options="[
-        {label: 'Files', value: 'files'},
-        {label: 'Email', value: 'email'}
-      ]"
-          />
-        </template>
-      </q-field>
+            <q-item clickable v-close-popup @click="$bus.emit('openFoldersUploader')">
+              <q-item-section>
+                <q-item-label><q-icon name="folder" size="sm"/> Upload Folders</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
 
-      <q-field stack-label borderless dense>
-      <q-btn-dropdown color="green" label="New" icon="add" style="width: 100%">
-        <q-list>
-          <q-item clickable v-close-popup @click="$refs.createFolder.open()">
-            <q-item-section>
-              <q-item-label><q-icon name="create_new_folder" size="sm"/> New Folder</q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-separator></q-separator>
-
-          <q-item clickable v-close-popup @click="$bus.emit('openFilesUploader')">
-            <q-item-section>
-              <q-item-label><q-icon name="upload_file" size="sm"/> Upload Files</q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-item clickable v-close-popup @click="$bus.emit('openFoldersUploader')">
-            <q-item-section>
-              <q-item-label><q-icon name="folder" size="sm"/> Upload Folders</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-btn-dropdown>
-      </q-field>
+      <q-btn class="q-mb-sm" @click="gotoFiles" color="blue" icon="folder_copy" label="Files" stack />
+      <q-btn class="q-mb-sm" @click="gotoEmail" color="blue" icon="email" label="Email" stack />
     </div>
   </div>
 
@@ -53,15 +36,19 @@
 <script>
 import { defineComponent } from "vue";
 import { useMainStore } from "stores/main-store";
-import FilePreview from "components/preview/FilePreview.vue";
 import CreateFolder from "components/files/CreateFolder.vue";
 
 export default defineComponent({
   name: 'LeftSidebar',
   components: { CreateFolder },
   methods: {
-    changeBucket: function(bucket) {
-      this.$router.push({ name: `${this.selectedApp}-home`, params: { bucket: bucket }})
+    gotoEmail: function() {
+      if(this.selectedApp !== 'email')
+        this.changeApp('email')
+    },
+    gotoFiles: function() {
+      if(this.selectedApp !== 'files')
+        this.changeApp('files')
     },
     changeApp: function(app) {
       this.$router.push({ name: `${app}-home`, params: { bucket: this.selectedBucket }})
@@ -84,3 +71,9 @@ export default defineComponent({
   },
 })
 </script>
+
+<style scoped>
+.q-btn {
+  max-width: 100%;
+}
+</style>

packages/dashboard-v2/src/components/main/Topbar.vue

@@ -0,0 +1,24 @@
+<template>
+  <q-btn dense flat round icon="menu" @click="$emit('toggleLeftDrawer')" />
+
+  <q-toolbar-title class="text-bold">
+    <q-avatar>
+      <img src="/v2.0/logo-white.svg">
+    </q-avatar>
+    R2-Explorer
+  </q-toolbar-title>
+  <q-space />
+  <div>
+    <bucket-picker/>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import BucketPicker from "components/main/BucketPicker.vue";
+
+export default defineComponent({
+  name: "TopBar",
+  components: { BucketPicker }
+});
+</script>

packages/dashboard-v2/src/components/preview/FilePreview.vue

@@ -6,10 +6,10 @@
     @hide="close"
   >
     <q-card>
-      <q-card-section class="row items-center q-pb-none">
-        <div class="text-h6">{{ filename }}</div>
+      <q-card-section class="row items-center q-p-sm bg-grey-3" style="font-size: 20px">
+        <div>{{ filename }}</div>
         <q-space />
-        <q-btn icon="close" flat round dense v-close-popup />
+        <q-btn icon="close" size="md" flat round dense v-close-popup />
       </q-card-section>
 
       <q-card-section class="scroll">

packages/dashboard-v2/src/layouts/MainLayout.vue

@@ -3,19 +3,13 @@
 
     <q-header reveal class="bg-green text-white">
       <q-toolbar>
-        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
 
-        <q-toolbar-title class="text-bold">
-          <q-avatar>
-            <img src="/v2.0/logo-white.svg">
-          </q-avatar>
-          R2-Explorer
-        </q-toolbar-title>
+        <top-bar @toggleLeftDrawer="toggleLeftDrawer"/>
 
       </q-toolbar>
     </q-header>
 
-    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+    <q-drawer :width="100" show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <left-sidebar/>
     </q-drawer>
 
@@ -35,10 +29,11 @@ import { ref } from 'vue'
 import { useMainStore } from "stores/main-store";
 import LeftSidebar from "components/main/LeftSidebar.vue";
 import RightSidebar from "components/main/RightSidebar.vue";
+import TopBar from "components/main/Topbar.vue";
 
 export default {
   name: 'MainLayout',
-  components: { RightSidebar, LeftSidebar },
+  components: { TopBar, RightSidebar, LeftSidebar },
   created() {
     const mainStore = useMainStore()
     mainStore.loadUserDisks().then((buckets) => {

packages/dashboard-v2/src/pages/files/FilesFolderPage.vue

@@ -150,7 +150,7 @@ export default defineComponent({
     breadcrumbs: function () {
       if (this.selectedFolder) {
         return [{
-          name: "Home",
+          name: this.selectedBucket,
           path: '/'
         }, ...this.selectedFolder.split('/')
           .filter((obj) => obj !== '')
@@ -163,7 +163,7 @@ export default defineComponent({
         ]
       } else {
         return [{
-          name: "Home",
+          name: this.selectedBucket,
           path: '/'
         }]
       }