acp - nanoscroller ftw

public/less/admin/admin.less

@@ -39,6 +39,10 @@
 		z-index: 1;
 		overflow-y: auto;
 
+		.nano-content {
+			top: 11px;
+		}
+		
 		.sidebar-nav {
 			margin-top: 1px;
 			overflow: hidden;

public/src/forum/admin/footer.js

@@ -34,6 +34,8 @@ define('forum/admin/footer', ['forum/admin/settings'], function(Settings) {
 		$('.sidebar-nav .nav-header').on('click', function() {
 			$(this).parents('.sidebar-nav').toggleClass('open');
 		});
+
+		$('.nano').nanoScroller();
 	}
 
 	function setupPills() {

public/vendor/nanoscroller/nanoscroller.css

@@ -0,0 +1,54 @@
+/** initial setup **/
+.nano {
+  position : relative;
+  width    : 100%;
+  height   : 100%;
+  overflow : hidden;
+}
+.nano > .nano-content {
+  position      : absolute;
+  overflow      : scroll;
+  overflow-x    : hidden;
+  top           : 0;
+  right         : 0;
+  bottom        : 0;
+  left          : 0;
+}
+.nano > .nano-content:focus {
+  outline: thin dotted;
+}
+.nano > .nano-content::-webkit-scrollbar {
+  display: none;
+}
+.has-scrollbar > .nano-content::-webkit-scrollbar {
+  display: block;
+}
+.nano > .nano-pane {
+  background : rgba(0,0,0,.25);
+  position   : absolute;
+  width      : 10px;
+  right      : 0;
+  top        : 0;
+  bottom     : 0;
+  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
+  opacity    : .01;
+  -webkit-transition    : .2s;
+  -moz-transition       : .2s;
+  -o-transition         : .2s;
+  transition            : .2s;
+  -moz-border-radius    : 5px;
+  -webkit-border-radius : 5px;
+  border-radius         : 5px;
+}
+.nano > .nano-pane > .nano-slider {
+  background: rgba(255, 255, 255, 0.3);
+  position              : relative;
+  margin                : 0 1px;
+  -moz-border-radius    : 3px;
+  -webkit-border-radius : 3px;
+  border-radius         : 3px;
+}
+.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
+  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
+  opacity    : 0.99;
+}

src/views/admin/header.tpl

@@ -6,6 +6,7 @@
 
 	<link rel="stylesheet" href="{relative_path}/vendor/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css">
 	<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/colorpicker/colorpicker.css">
+	<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/nanoscroller/nanoscroller.css">
 	<link rel="stylesheet" type="text/css" href="{relative_path}/admin.css?{cache-buster}" />
 
 	<script>
@@ -24,6 +25,7 @@
 	<script type="text/javascript" src="{relative_path}/vendor/colorpicker/colorpicker.js"></script>
 	<script type="text/javascript" src="{relative_path}/src/admin.js?{cache-buster}"></script>
 	<script type="text/javascript" src="{relative_path}/vendor/ace/ace.js"></script>
+	<script type="text/javascript" src="{relative_path}/vendor/nanoscroller/nanoscroller.min.js"></script>
 
 	<script>
 		require.config({
@@ -91,7 +93,8 @@
 	</div>
 
 	<div class="wrapper">
-		<div id="main-menu">
+		<div id="main-menu" class="nano">
+			<div class="nano-content">
 				<div class="sidebar-nav">
 					<ul class="nav nav-list">
 						<li class="nav-header">General</li>
@@ -164,4 +167,5 @@
 				</div>
 				<!-- ENDIF env -->
 			</div>
+		</div>
 		<div class="col-sm-12" id="content">