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"
@@ -12,12 +26,19 @@
                 Benutzereinstellungen
               </div>
               <div class="col-xs-12 col-sm-6 q-pa-sm">
-            <UserSelector :user="user" @update:user="userUpdated" />
+                <UserSelector :user="user" @update:user="userUpdated"/>
               </div>
             </q-card-section>
-        <MainUserSettings :user="user" />
+            <MainUserSettings :user="user"/>
           </q-card>
-      <RoleSettings v-if="canEditRoles" />
+        </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>
@@ -32,15 +53,16 @@ import {
 import UserSelector from '../components/UserSelector.vue';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
 import RoleSettings from '../components/settings/RoleSettings.vue';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
-import { hasPermission } from 'src/components/permission';
-import { PERMISSIONS } from '../permissions';
+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',
-  components: { UserSelector, MainUserSettings, RoleSettings },
-  setup(_, { root }) {
+  components: {UserSelector, MainUserSettings, RoleSettings},
+  setup(_, {root}) {
     const store = <Store<StateInterface>>root.$store;
 
     onBeforeMount(() => {
@@ -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
     };
   }
 });