Refactor: layout

components/AddCourse.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="show" max-width="500" persistent>
     <template #activator="{ on, attrs }">
-      <v-card flat width="100%" class="rounded-lg" v-bind="attrs" v-on="on">
+      <v-card width="100%" v-bind="attrs" v-on="on">
         <v-card-text class="text-h6">
           <v-icon left x-large>mdi-plus</v-icon>
           Kurs hinzufügen

components/NavigationDrawer.vue

@@ -1,5 +1,12 @@
 <template>
-  <v-navigation-drawer v-if="$store.state.user" app dark clipped :mini-variant="miniVariant">
+  <v-navigation-drawer
+    v-if="$store.state.user"
+    v-model="drawer"
+    app dark clipped
+    :mini-variant="mini"
+    :permanent="!mobile"
+    :touchless="!mobile"
+  >
     <v-list>
       <v-list-item link class="px-2" :to="{ name: 'user' }">
         <v-list-item-avatar>
@@ -7,7 +14,6 @@
         </v-list-item-avatar>
           <v-list-item-content>
           <v-list-item-title>{{ $store.state.user.displayName }}</v-list-item-title>
-          <v-list-item-subtitle>{{ $auth.currentUser.email }}</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
     </v-list>
@@ -33,12 +39,23 @@
 export default {
   data () {
     return {
+      drawer: true,
       miniVariant: false
     }
   },
+  computed: {
+    mobile () {
+      return this.$vuetify.breakpoint.smAndDown
+    },
+    mini () {
+      if (this.mobile) return false
+      else return this.miniVariant
+    }
+  },
   methods: {
     toggle () {
-      this.miniVariant = !this.miniVariant
+      if (this.mobile) this.drawer = !this.drawer
+      else this.miniVariant = !this.miniVariant
     }
   }
 }

components/TutorPanel.vue

@@ -1,12 +1,11 @@
 <template>
   <v-container v-if="newQuestions.length > 0" fluid>
-    <v-subheader class="text-h5 text--primary">
-      <v-badge color="primary" offset-x="-5" offset-y="10" :content="newQuestions.length">
-        Neue Fragen
-      </v-badge>
-    </v-subheader>
-    <v-divider></v-divider>
-    <v-card flat class="my-3">
+    <v-card class="my-3">
+      <v-card-title class="text-h5 text--primary">
+        <v-badge color="primary" offset-x="-5" offset-y="10" :content="newQuestions.length">
+          Neue Fragen
+        </v-badge>
+      </v-card-title>
       <v-window
         continuous
         show-arrows
@@ -14,7 +13,7 @@
         <v-window-item
           v-for="question, index in newQuestions" :key="index"
         >
-          <v-card flat max-width="500" class="mx-auto">
+          <v-card max-width="500" class="mx-auto">
             <v-card-title>{{ question.question }}</v-card-title>
             <v-card-text>
               <p>