diff --git a/components/NavigationDrawer.vue b/components/NavigationDrawer.vue
new file mode 100644
index 0000000..e9cac3e
--- /dev/null
+++ b/components/NavigationDrawer.vue
@@ -0,0 +1,57 @@
+<template>
+  <v-navigation-drawer v-if="$store.state.userLoggedIn" app clipped :mini-variant="miniVariant">
+    <v-list>
+      <v-list-item link class="px-2" @click="gotoProfilePage">
+        <v-list-item-avatar>
+          <v-img src="https://avatarfiles.alphacoders.com/207/207426.png"></v-img>
+        </v-list-item-avatar>
+          <v-list-item-content>
+          <v-list-item-title>{{ userName }}</v-list-item-title>
+          <v-list-item-subtitle>{{ $auth.currentUser.email }}</v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+    <v-divider></v-divider>
+    <v-list nav dense>
+      <v-list-item link to="dashboard">
+        <v-list-item-icon>
+          <v-icon>mdi-view-dashboard</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Dashboard</v-list-item-title>
+      </v-list-item>
+      <v-list-item link to="help">
+        <v-list-item-icon>
+          <v-icon>mdi-frequently-asked-questions</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Hilfe (FAQ)</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import _capitalize from 'lodash-es/capitalize'
+
+export default {
+  data () {
+    return {
+      miniVariant: false
+    }
+  },
+  computed: {
+    userName () {
+      const givenName = this.$auth.currentUser.email.split('.')[0]
+      return _capitalize(givenName)
+    }
+  },
+  methods: {
+    toggle () {
+      this.miniVariant = !this.miniVariant
+    },
+    gotoProfilePage () {
+      // TODO
+      this.$toast({ content: 'TODO: Benutzerbereich implementieren', color: 'info' })
+    }
+  }
+}
+</script>
\ No newline at end of file