Fixing the docs sidebar interactions

docs/layouts/partials/footer.html

@@ -19,7 +19,8 @@
   </section>
   <!-- container section end -->
     <!-- javascripts -->
-    <script src="/js/jquery.js"></script>
+    <script src="/js/jquery-2.1.1.min.js"></script>
+    <script src="/js/jquery.scrollTo.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
     <!--custom script for all page-->
     <script src="/js/highlight.pack.js"></script>

docs/layouts/partials/menu.html

@@ -12,9 +12,9 @@
                 {{ .Pre }}
                 <!--<i class="icon_desktop"></i>-->
                 <span>{{ .Name }}</span>
-                <span class="menu-arrow arrow_carrot-right"></span>
+                <span class="menu-arrow fa {{if $currentNode.HasMenuCurrent "main" . }}fa-angle-down{{else}}fa-angle-right{{end}}"></span>
             </a>
-                <ul class="sub">
+                <ul class="sub{{if $currentNode.HasMenuCurrent "main" . }} open{{end}}">
                     {{ range .Children }}
                     <li{{if $currentNode.IsMenuCurrent "main" . }} class="active"{{end}}><a href="{{.Url}}"> {{ .Name }} </a> </li>
                     {{ end }}

docs/static/css/style-responsive.css

@@ -63,7 +63,7 @@
     }
 
     #sidebar ul > li.active > a .arrow, #sidebar ul > li > a:hover .arrow, #sidebar ul > li > a:focus .arrow,
-    #sidebar > ul > li.active > a .arrow.open, #sidebar > ul > li > a:hover .arrow.open, #sidebar > ul > li > a:focus .arrow.open{
+    #sidebar > ul > li.active > a .arrow.open, #sidebar > ul > li > a:hover .arrow.open, #sidebar > ul > li > a:focus .arrow.open {
         margin-top: 15px;
     }
 
@@ -99,14 +99,12 @@
         border-right: 15px solid transparent;
     }
 
-
     /*---------*/
 
     .btn {
         margin-bottom: 5px;
     }
 
-
     .inbox-wrapper aside {
         display: block;
     }
@@ -200,12 +198,6 @@
         margin-bottom:0px !important;
     }
 
-    /*--*/
-
-    /*.chart-position {*/
-        /*margin-top: 0px;*/
-    /*}*/
-
     .timeline-desk .album a {
         margin-bottom: 5px;
         margin-right: 4px;
@@ -219,20 +211,18 @@
         margin-bottom: 0;
     }
 
-
-
 }
 
 
 @media (max-width: 740px) {
-    #task_notificatoin_bar,#mail_notificatoin_bar,#alert_notificatoin_bar{
+    #task_notificatoin_bar,#mail_notificatoin_bar,#alert_notificatoin_bar {
         display: none;
     }
 }
 
 @media (max-width: 480px) {
 
-    .notification-row,.task_notificatoin_bar, .search-row,.knob-charts, .dont-show , .inbox-head .sr-input, .inbox-head .sr-btn{
+    .notification-row,.task_notificatoin_bar, .search-row,.knob-charts, .dont-show , .inbox-head .sr-input, .inbox-head .sr-btn {
         display: none;
     }
 
@@ -240,13 +230,14 @@
         display: block;
     }
 
-    .inbox-wrapper .inbox-left , .inbox-wrapper .inbox-right{
+    .inbox-wrapper .inbox-left , .inbox-wrapper .inbox-right {
         width: 100% ;
     }
 
     #top_menu .nav > li, ul.top-menu > li {
         float: right;
     }
+
     .hidden-phone {
         display: none !important;
     }
@@ -274,6 +265,7 @@
 }
 
 @media (max-width:320px) {
+
     .login-social-link a {
         padding: 15px 17px !important;
     }
@@ -286,7 +278,7 @@
         display: block ;
     }
 
-    .inbox-wrapper .inbox-left , .inbox-wrapper .inbox-right{
+    .inbox-wrapper .inbox-left , .inbox-wrapper .inbox-right {
         width: 100% ;
     }
 
@@ -320,7 +312,3 @@
     }
 
 }
-
-
-
-

docs/static/css/style.css

@@ -354,7 +354,7 @@ table tr th { color: #007AFF;}
 /*sidebar navigation*/
 
 #sidebar {
-    width: 190px;
+    width: 200px;
     height: 100%;
     position: fixed;
     background: #ffffff;
@@ -453,6 +453,7 @@ ul.sidebar-menu li a{
     transition: all 0.3s ease;
     border-right: 1px solid #D7D7D7;
     border-bottom: 1px solid #D7D7D7;
+    overflow:hidden;
 }
 /*ul.sidebar-menu li a i{
     position: relative;
@@ -586,7 +587,7 @@ ul.sidebar-menu li.active a i {
 /*main content*/
 
 #main-content {
-    margin-left: 180px;
+    margin-left: 200px;
     line-height: 1.8;
     font-size: 19px;
 }

docs/static/js/scripts.js

@@ -8,17 +8,28 @@ function initializeJS() {
 
     //sidebar dropdown menu
     jQuery('#sidebar .sub-menu > a').click(function () {
-        var last = jQuery('.sub-menu.open', jQuery('#sidebar'));
-        jQuery('.menu-arrow').removeClass('arrow_carrot-right');
-        jQuery('.sub', last).slideUp(200);
+        // Close previous open submenu
+        var last = jQuery('.sub.open', jQuery('#sidebar'));
+        jQuery(last).slideUp(200);
+        jQuery(last).removeClass("open");
+        jQuery('.menu-arrow', jQuery(last).parent()).addClass('fa-angle-right');
+        jQuery('.menu-arrow', jQuery(last).parent()).removeClass('fa-angle-down');
+
+        // Toggle current submenu
         var sub = jQuery(this).next();
         if (sub.is(":visible")) {
-            jQuery('.menu-arrow').addClass('arrow_carrot-right');
+            jQuery('.menu-arrow', this).addClass('fa-angle-right');
+            jQuery('.menu-arrow', this).removeClass('fa-angle-down');
             sub.slideUp(200);
+            jQuery(sub).removeClass("open")
         } else {
-            jQuery('.menu-arrow').addClass('arrow_carrot-down');
+            jQuery('.menu-arrow', this).addClass('fa-angle-down');
+			jQuery('.menu-arrow', this).removeClass('fa-angle-right');
             sub.slideDown(200);
+            jQuery(sub).addClass("open")
         }
+
+        // Center menu on screen
         var o = (jQuery(this).offset());
         diff = 200 - o.top;
         if(diff>0)