Add new sidebar main menu

Add a left side menu navigation style. The main app navigation links
will be displayed here. The notification, user and system tools are now
displayed at the top navigation bar.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>

mayan/apps/appearance/static/appearance/css/base.css

@@ -49,10 +49,6 @@
         url('../fonts/Lato_400italic.ttf') format('truetype');
 }
 
-body {
-    padding-top: 70px;
-}
-
 .navbar-brand {
     font-family: "IM Fell English SC", serif;
 }
@@ -142,11 +138,7 @@ hr {
 }
 
 .radio ul li {
-    list-style-type:none;
-}
-
-a i {
-    padding-right: 3px;
+    list-style-type: none;
 }
 
 .dashboard-widget {
@@ -341,3 +333,148 @@ a i {
     font-size: 110%;
     font-weight: bold;
 }
+
+body {
+  padding-top: 40px;
+}
+
+.sub-header {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+/*
+ * Top navigation
+ * Hide default border to remove 1px line.
+ */
+.navbar-fixed-top {
+  border: 0;
+}
+
+/*
+ * Sidebar
+ */
+
+/* Hide for mobile, show later */
+.sidebar {
+    display: none;
+}
+@media (min-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: 51px;
+        bottom: 0;
+        left: 0;
+        z-index: 1000;
+        display: block;
+        padding-top: 10px;
+        overflow-x: hidden;
+        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+        background-color: #2c3e50;
+        border-right: 1px solid #18bc9c;
+    }
+
+    .navbar-brand {
+        text-align: center;
+        width: 210px;
+    }
+}
+
+/*
+ * Main content
+ */
+
+.main {
+  padding: 20px;
+}
+@media (min-width: 768px) {
+    .main {
+        padding-right: 0px;
+        padding-left: 0px;
+        margin-left: 210px;
+    }
+
+}
+.main .page-header {
+  margin-top: 0;
+}
+
+.sidebar {
+    width: 210px;
+}
+
+.navbar-brand {
+}
+
+.container-fluid {
+    margin-right: 0px;
+    margin-left: 0px;
+    width: 100%;
+}
+
+.navbar-form > .form-control {
+    padding: 0px;
+    height: 35px;
+    margin-top: 3px;
+}
+
+#accordion-sidebar a {
+    padding: 10px 15px;
+}
+
+#accordion-sidebar a[aria-expanded="true"] {
+    background: #1a242f;
+}
+
+#accordion-sidebar .panel {
+    border: 0px;
+}
+
+#accordion-sidebar a {
+    text-decoration: none;
+    outline: none;
+    position: relative;
+    display: block;
+}
+
+#accordion-sidebar .panel-heading {
+    background-color: #2c3e50;
+    color: white;
+    padding: 0px;
+}
+
+#accordion-sidebar .panel-heading:hover {
+    background-color: #517394;
+}
+
+#accordion-sidebar .panel-title {
+    font-size: 15px;
+}
+
+#accordion-sidebar .panel-body {
+    font-size: 13px;
+    border: 0px;
+    background-color: #2c3e50;
+    padding-top: 5px;
+    padding-left: 20px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+}
+
+#accordion-sidebar .panel-body li {
+    padding: 0px;
+}
+
+#accordion-sidebar .panel-body li:hover {
+    background-color: #517394;
+}
+
+#accordion-sidebar .panel-body a {
+    color: white;
+    text-decoration: none;
+    padding: 9px;
+}
+
+.navbar-brand {
+    outline: none;
+}

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -4,18 +4,13 @@ class MayanApp {
     constructor (parameters) {
         var self = this;
 
-        parameters = parameters || {}
+        parameters = parameters || {
+            ajaxMenusOptions: []
+        }
 
         this.ajaxSpinnerSeletor = '#ajax-spinner';
         this.ajaxExecuting = false;
-        this.ajaxMenusOptions = [
-            {
-                app: this,
-                interval: 5000,
-                menuSelector: '#main-menu',
-                url: apiTemplateMainMenuURL,
-            }
-        ];
+        this.ajaxMenusOptions = parameters.ajaxMenusOptions;
         this.ajaxMenuHashes = {};
         this.window = $(window);
     }
@@ -214,6 +209,8 @@ class MayanApp {
     }
 
     initialize () {
+        var self = this;
+
         this.setupAJAXPeriodicWorkers();
         this.setupAJAXSpinner();
         this.setupAutoSubmit();
@@ -223,6 +220,7 @@ class MayanApp {
         this.setupNavbarCollapse();
         this.setupNewWindowAnchor();
         $.each(this.ajaxMenusOptions, function(index, value) {
+            value.app = self;
             app.doRefreshAJAXMenu(value);
         });
         partialNavigation.initialize();