diff --git a/src/App.vue b/src/App.vue
index 8fcbaa2f0..35adf283c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,11 +21,77 @@
  -->
 
 <template>
-	<router-view />
+
+<div
+		id="content"
+		v-bind:class="{ 'nav-hidden': navHidden, 'sidebar-hidden': sidebarHidden }">
+	<AppNavigation :menu="menu" />
+	<div id="app-content">
+		<Controls></Controls>
+		<router-view />
+	</div>
+	<div id="app-sidebar">
+        <component v-bind:is="sidebarComponent"></component>
+	</div>
+</div>
+
 </template>
 
 <script>
+
+import { AppNavigation } from 'nextcloud-vue'
+import Controls from './components/Controls'
+import { mapState } from 'vuex'
+import Sidebar from './components/Sidebar'
+
 export default {
-	name: 'App'
+	name: 'App',
+	components: {
+		AppNavigation,
+		Controls,
+        Sidebar
+	},
+	computed: mapState({
+		navHidden: state => state.nav.hidden,
+		sidebarHidden: state => state.sidebar.hidden,
+		menu: state => state.nav.menu,
+        sidebarComponent: state => state.sidebar.component
+	})
 }
+
 </script>
+
+<style lang="scss" scoped>
+
+#content {
+	#app-content {
+		transition: margin-left 100ms ease;
+	}
+
+	#app-sidebar {
+		transition: width 100ms ease;
+	}
+
+	&.nav-hidden {
+		#app-content {
+			margin-left: 0;
+		}
+	}
+
+	&.sidebar-hidden {
+		#app-sidebar {
+			max-width: 0;
+			min-width: 0;
+		}
+	}
+}
+
+.deck-main {
+	bottom: 0;
+	overflow: auto;
+	position: absolute;
+	top: 44px;
+	width: 100%;
+}
+
+</style>
diff --git a/src/views/Board.vue b/src/components/Board.vue
similarity index 100%
rename from src/views/Board.vue
rename to src/components/Board.vue
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
new file mode 100644
index 000000000..d28393726
--- /dev/null
+++ b/src/components/Controls.vue
@@ -0,0 +1,44 @@
+<!--
+* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+*
+* @author Michael Weimann <mail@michael-weimann.eu>
+*
+* @license GNU AGPL version 3 or any later version
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program. If not, see <http://www.gnu.org/licenses/>.
+*
+-->
+
+<template>
+
+<div>
+    <div id="app-navigation-toggle-custom" class="icon-menu" v-on:click="toggleNav"></div>
+</div>
+
+</template>
+
+<script>
+export default {
+    name: "Controls",
+    methods: {
+        toggleNav() {
+            this.$store.dispatch('nav/toggle')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/List.vue b/src/components/List.vue
similarity index 100%
rename from src/views/List.vue
rename to src/components/List.vue
diff --git a/src/components/Main.vue b/src/components/Main.vue
new file mode 100644
index 000000000..0b0221e96
--- /dev/null
+++ b/src/components/Main.vue
@@ -0,0 +1,36 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+<div class="deck-main">
+    Main
+</div>
+</template>
+
+<script>
+export default {
+	name: 'Main'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/Sidebar.vue b/src/components/Sidebar.vue
similarity index 97%
rename from src/views/Sidebar.vue
rename to src/components/Sidebar.vue
index a63cb70ad..84d27fb76 100644
--- a/src/views/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div />
+	<div>sidebar</div>
 </template>
 
 <script>
diff --git a/src/router.js b/src/router.js
index 61c2ef5ef..0b0847a20 100644
--- a/src/router.js
+++ b/src/router.js
@@ -24,7 +24,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from 'nextcloud-server/dist/router'
 
-const Main = () => import('./views/Main')
+const Main = () => import('./components/Main')
 
 Vue.use(Router)
 
diff --git a/src/store/main.js b/src/store/main.js
index b6c4c1600..f5de7ff9b 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -22,13 +22,20 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
+import nav from './modules/nav'
+import sidebar from './modules/sidebar'
 
 Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Store({
-	modules: {
-	},
-	strict: debug
+    modules: {
+        nav,
+        sidebar
+    },
+	strict: debug,
+    state: {},
+    mutations: {},
+    actions: {}
 })
diff --git a/src/store/modules/nav.js b/src/store/modules/nav.js
new file mode 100644
index 000000000..2a4fd5381
--- /dev/null
+++ b/src/store/modules/nav.js
@@ -0,0 +1,135 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+// nav stuff
+// todo maybe move out of nav.js directly and import here
+
+import { translate as t } from 'nextcloud-server/dist/l10n'
+
+let defaultCategories = [
+    {
+        id: 'deck-boards',
+        classes: [],
+        icon: 'icon-deck',
+        text: t('deck', 'All boards'),
+        router: {
+            name: 'boards'
+        }
+    },
+    {
+        id: 'deck-boards-archived',
+        classes: [],
+        icon: 'icon-archive',
+        text: t('deck', 'Archived boards'),
+        router: {
+            name: 'boards.archived'
+        }
+    },
+    {
+        id: 'deck-boards-shared',
+        classes: [],
+        icon: 'icon-shared',
+        text: t('deck', 'Shared boards'),
+        router: {
+            name: 'boards.shared'
+        }
+    }
+]
+
+const boardActions = [
+    {
+        action: () => {},
+        icon: 'icon-edit',
+        text: t('deck', 'Edit board')
+    },
+    {
+        action: () => {},
+        icon: 'icon-archive',
+        text: t('deck', 'Archive board')
+    },
+    {
+        action: () => {},
+        icon: 'icon-delete',
+        text: t('deck', 'Delete board')
+    },
+    {
+        action: () => {},
+        icon: 'icon-settings',
+        text: t('deck', 'Board details')
+    }
+]
+
+const boards = [
+    {
+        id: 'deck-board-1',
+        classes: [],
+        bullet: '#00cc00',
+        text: 'Example board',
+        router: {
+            name: 'board',
+            params: { id: 1 }
+        },
+        utils: {
+            actions: boardActions
+        }
+    }
+]
+
+const addButton = {
+    icon: 'icon-add',
+    text: t('deck', 'Create new board'),
+    action: () => {}
+}
+
+// initial state
+const state = {
+    hidden: false,
+    menu: {
+        items: defaultCategories.concat(boards).concat([addButton]),
+        loading: false
+    }
+}
+
+// getters
+const getters = {}
+
+// actions
+const actions = {
+    toggle ({ commit }) {
+        commit('toggle')
+    }
+}
+
+// mutations
+const mutations = {
+    toggle (state) {
+        state.hidden = !state.hidden
+    }
+}
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+}
diff --git a/src/store/modules/sidebar.js b/src/store/modules/sidebar.js
new file mode 100644
index 000000000..5ec04d4a9
--- /dev/null
+++ b/src/store/modules/sidebar.js
@@ -0,0 +1,53 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+
+// initial state
+const state = {
+    hidden: true,
+    component: 'Sidebar'
+}
+
+// getters
+const getters = {}
+
+// actions
+const actions = {
+    toggle ({ commit }) {
+        commit('toggle')
+    }
+}
+
+// mutations
+const mutations = {
+    toggle (state) {
+        state.hidden = !state.hidden
+    }
+}
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+}
diff --git a/src/views/Main.vue b/src/views/Main.vue
deleted file mode 100644
index d88ea8702..000000000
--- a/src/views/Main.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div id="content">
-		<AppNavigation :menu="menu" />
-		<div id="app-content">
-			content
-		</div>
-		<div id="app-sidebar">
-			sidebar
-		</div>
-	</div>
-</template>
-
-<style scoped>
-
-</style>
-
-<script>
-import { AppNavigation } from 'nextcloud-vue'
-
-export default {
-	name: 'Main',
-	components: {
-		AppNavigation
-	},
-	computed: {
-		// TODO: move to mixin so we can use it in separate views (see mail app)
-		menu() {
-			let defaultCategories = [
-				{
-					id: 'deck-boards',
-					classes: [],
-					icon: 'icon-deck',
-					text: t('deck', 'All boards'),
-					router: {
-						name: 'boards'
-					}
-				},
-				{
-					id: 'deck-boards-archived',
-					classes: [],
-					icon: 'icon-archive',
-					text: t('deck', 'Archived boards'),
-					router: {
-						name: 'boards.archived'
-					}
-				},
-				{
-					id: 'deck-boards-shared',
-					classes: [],
-					icon: 'icon-shared',
-					text: t('deck', 'Shared boards'),
-					router: {
-						name: 'boards.shared'
-					}
-				}
-			]
-
-			const boardActions = [
-				{
-					action: () => {},
-					icon: 'icon-edit',
-					text: t('deck', 'Edit board')
-				},
-				{
-					action: () => {},
-					icon: 'icon-archive',
-					text: t('deck', 'Archive board')
-				},
-				{
-					action: () => {},
-					icon: 'icon-delete',
-					text: t('deck', 'Delete board')
-				},
-				{
-					action: () => {},
-					icon: 'icon-settings',
-					text: t('deck', 'Board details')
-				}
-			]
-
-			let boards = [
-				{
-					id: 'deck-board-1',
-					classes: [],
-					bullet: '#00cc00',
-					text: 'Example board',
-					router: {
-						name: 'board',
-						params: { id: 1 }
-					},
-					utils: {
-						actions: boardActions
-					}
-				}
-			]
-			const addButton = {
-				icon: 'icon-add',
-				text: t('deck', 'Create new board'),
-				action: () => {}
-			}
-			return {
-				items: defaultCategories.concat(boards).concat([addButton]),
-				loading: false
-			}
-		}
-	}
-}
-</script>