diff --git a/css/comp-13.scss b/css/comp-13.scss
index 776bcdc4b..1d888ee92 100644
--- a/css/comp-13.scss
+++ b/css/comp-13.scss
@@ -27,3 +27,15 @@
 #content[class*='app-'] * {
 	box-sizing: border-box;
 }
+
+
+body:not(.snapjs-left) {
+	.app-navigation-hide {
+		#app-content {
+			margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/
+		}
+		#app-navigation {
+			display: none;
+		}
+	}
+}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index 064458d3c..dfcbaf4fc 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -264,7 +264,7 @@ input.input-inline {
 	}
 }
 
-#app-navigation-toggle {
+#app-navigation-toggle-custom {
 	width: 44px;
 	height: 44px;
 	cursor: pointer;
@@ -1439,3 +1439,22 @@ input.input-inline {
 .ui-select-dropdown.select2-drop-active {
 	opacity: 1 !important;
 }
+
+/**
+ * Custom app sidebar handling
+ */
+body:not(.snapjs-left) {
+	.app-navigation-hide {
+		#app-content {
+			margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/
+		}
+		#app-navigation {
+			transform: translateX(-300px);
+		}
+	}
+}
+@media only screen and (max-width: 768px) {
+	#app-navigation-toggle-custom {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/js/app/Run.js b/js/app/Run.js
index 6fef22355..60523305c 100644
--- a/js/app/Run.js
+++ b/js/app/Run.js
@@ -56,26 +56,6 @@ app.run(function ($document, $rootScope, $transitions, BoardService) {
 		OC.filePath('deck', 'img', 'app-512.png')
 	);
 
-	$('#app-navigation-toggle').off('click');
-	// App sidebar on mobile
-	var snapper = new Snap({
-		element: document.getElementById('app-content'),
-		disable: 'right',
-		maxPosition: 250,
-		touchToDrag: false
-	});
-
-	$('#app-navigation-toggle').click(function () {
-		if ($(window).width() > 768) {
-			$('#app-navigation').toggle('hidden');
-		} else {
-			if (snapper.state().state === 'left') {
-				snapper.close();
-			} else {
-				snapper.open('left');
-			}
-		}
-	});
 	// Select all elements with data-toggle="tooltips" in the document
 	$('body').tooltip({
 		selector: '[data-toggle="tooltip"]'
diff --git a/js/controller/AppController.js b/js/controller/AppController.js
index 62f4e088a..356d3f283 100644
--- a/js/controller/AppController.js
+++ b/js/controller/AppController.js
@@ -30,4 +30,13 @@ app.controller('AppController', function ($scope, $location, $http, $log, $rootS
 	$scope.sidebar = $rootScope.sidebar;
 	$scope.user = oc_current_user;
 	$rootScope.config = JSON.parse($attrs.config);
+
+	$scope.appNavigationHide = false;
+
+	$scope.toggleSidebar = function() {
+		if ($(window).width() > 768) {
+			$scope.appNavigationHide = !$scope.appNavigationHide;
+			console.log($scope.appNavigationHide);
+		}
+	}
 });
diff --git a/templates/main.php b/templates/main.php
index 9e61ad6e8..2cd2310e6 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -34,13 +34,13 @@ if (\OC_Util::getVersion()[0] < 14) {
 }
 ?>
 
-<div class="app app-deck" data-ng-app="Deck" ng-controller="AppController" ng-cloak config="<?php p(json_encode($_)); ?>">
+<div class="app app-deck" data-ng-app="Deck" ng-controller="AppController" ng-cloak config="<?php p(json_encode($_)); ?>" ng-class="{'app-navigation-hide': appNavigationHide}">
 
 	<div id="app-navigation" data-ng-controller="ListController" ng-init="initSidebar()">
 		<?php print_unescaped($this->inc('part.navigation')); ?>
 		<?php /* print_unescaped($this->inc('part.settings')); */ ?>
 	</div>
-	<div id="app-content" ng-class="{ 'details-visible': sidebar.show }"><div ui-view></div></div>
+	<div id="app-content" ng-class="{ 'details-visible': sidebar.show }"><div id="app-navigation-toggle-custom" class="icon-menu" ng-click="toggleSidebar()"></div><div ui-view></div></div>
 	<div id="app-sidebar" ng-class="{ 'details-visible': sidebar.show }" ng-if="sidebar.show" class="details-view scroll-container" ui-view="sidebarView"></div>
 	<route-loading-indicator></route-loading-indicator>