slideout

public/less/admin/mobile.less

@@ -58,6 +58,52 @@
 			display: none;
 		}
 	}
+
+	
+	.slideout-menu {
+		position: fixed;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		z-index: 0;
+		width: 256px;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+		display: none;
+	}
+
+
+	.slideout-panel {
+		position: relative;
+		z-index: 1;
+	}
+
+	.slideout-open,
+	.slideout-open body,
+	.slideout-open .slideout-panel {
+		overflow: hidden;
+		overflow-y: hidden !important;
+	}
+
+	.slideout-open .slideout-menu {
+		display: block;
+	}
+
+	html {
+		height: 100%;
+		overflow-y: hidden;
+	}
+	
+	.slideout-open {
+		overflow-y: hidden;
+		height: 100%;
+	}
+
+	body {
+		overflow-y: scroll;
+		overflow-x: hidden;
+	}
 }
 
 @media (max-width: 768px) {

src/views/admin/header.tpl

@@ -56,6 +56,7 @@
 		<script type="text/javascript" src="{relative_path}/vendor/mousetrap/mousetrap.js?{cache-buster}"></script>
 		<script type="text/javascript" src="{relative_path}/vendor/jquery/js/jquery-ui-1.10.4.custom.js?{cache-buster}"></script>
 		<script type="text/javascript" src="{relative_path}/vendor/snackbar/snackbar.min.js?{cache-buster}"></script>
+		<script type="text/javascript" src="{relative_path}/vendor/slideout/slideout.min.js?{cache-buster}"></script>
 
 		<!-- BEGIN scripts -->
 		<script type="text/javascript" src="{scripts.src}"></script>