src/plugins/user/pages/AdminSettings.vue

@@ -1,9 +1,23 @@
 <template>
   <div>
-    <q-page
-      padding
-      class="fit row justify-center content-center items-center q-gutter-sm"
-    >
+    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+      <q-tab v-for="(tabindex, index) in tabs" :key="'tab'+index" :name="tabindex.name" :label="tabindex.label"/>
+    </q-tabs>
+    <div class="fit row justify-end" v-else>
+      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer"/>
+    </div>
+    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
+      <q-list v-model="tab">
+        <q-item v-for="(tabindex, index) in tabs" :key="'tab'+index" :active="tab == tabindex.name" clickable
+                @click="tab = tabindex.name">
+          <q-item-label>{{ tabindex.label }}</q-item-label>
+        </q-item>
+      </q-list>
+    </q-drawer>
+    <q-page padding
+            class="fit row justify-center content-start items-start q-gutter-sm">
+      <q-tab-panels v-model="tab" style="background-color: transparent;" class="q-ma-none q-pa-none" animated>
+        <q-tab-panel name="user">
           <q-card class="col-12">
             <q-card-section
               class="fit row justify-start content-center items-center"
@@ -17,7 +31,14 @@
             </q-card-section>
             <MainUserSettings :user="user"/>
           </q-card>
+        </q-tab-panel>
+        <q-tab-panel name="newUser">
+          <h1>hier kommt noch was</h1>
+        </q-tab-panel>
+        <q-tab-panel name="roles">
           <RoleSettings v-if="canEditRoles"/>
+        </q-tab-panel>
+      </q-tab-panels>
     </q-page>
   </div>
 </template>
@@ -36,6 +57,7 @@ import { Store } from 'vuex';
 import {StateInterface} from 'src/store';
 import {hasPermission} from 'src/components/permission';
 import {PERMISSIONS} from '../permissions';
+import {Screen} from 'quasar';
 
 export default defineComponent({
   name: 'AdminSettings',
@@ -58,10 +80,37 @@ export default defineComponent({
       console.log(value);
     };
 
+    interface Tab {
+      name: string;
+      label: string;
+    }
+
+    const tabs: Tab[] = [
+      {name: 'user', label: 'Mitglieder'},
+      {name: 'newUser', label: 'Neues Mitglied'},
+      {name: 'roles', label: 'Rollen'}
+    ]
+
+    const drawer = ref<boolean>(false)
+
+    const showDrawer = computed({
+      get: () => {
+        return !Screen.gt.sm && drawer.value
+      },
+      set: (val: boolean) => {
+        drawer.value = val
+      }
+    })
+
+    const tab = ref<string>('user');
+
     return {
       user,
       userUpdated,
-      canEditRoles
+      canEditRoles,
+      showDrawer,
+      tab,
+      tabs
     };
   }
 });