code refactor

src/index.html

@@ -242,9 +242,16 @@
     </div>
 
     <footer class="main-footer">
-        <a class="sidebar-toggle" data-toggle="offcanvas" role="button" title="{{'Toggle Navigation' | translate}}"></a>
+        <nav class="navbar" role="navigation">
-
+            <div class="navbar-toolbar">
-        <div class="toolbar dropup">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a data-toggle="offcanvas" role="button" title="{{'Toggle Navigation' | translate}}">
+                            <i class="fa fa-bars"></i>
+                        </a>
+                    </li>
+                    <li class="divider"></li>
+                    <li class="dropup">
                         <a class="dropdown-toggle" data-toggle="dropdown" role="button" title="{{'Quick Setting' | translate}}">
                             <i class="fa fa-wrench"></i>
                             <span translate>Quick Setting</span>
@@ -257,6 +264,8 @@
                                 </a>
                             </li>
                         </ul>
+                    </li>
+                </ul>
             </div>
 
             <div class="pull-right ng-cloak" ng-if="globalStatusContext.isEnabled">
@@ -272,6 +281,7 @@
                 </span>
                 </a>
             </div>
+        </nav>
     </footer>
 
     <ng-setting-dialog setting="quickSettingContext"></ng-setting-dialog>

src/styles/core/core.css

@@ -69,8 +69,27 @@ td {
     overflow-y: scroll;
 }
 
-.main-footer .toolbar {
+.main-footer > .navbar {
+    margin-bottom: 0;
+    min-height: inherit;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav {
+    float: left;
+    margin: 0;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav > li {
     display: inline-block;
+    float: left;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+    padding: 0 10px 0 10px;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav > li:first-child > a {
+    padding-left: 0;
 }
 
 .dropdown-menu.right-align {
@@ -103,6 +122,11 @@ td {
         border: 1px solid #eee;
         background-color: #fff;
     }
+
+    .main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
 }
 
 /* toolbar */

src/styles/theme/default.css

@@ -40,14 +40,6 @@
     top: 15px;
 }
 
-.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle, .skin-aria-ng .main-footer .toolbar > a {
-    color: #707070;
-}
-
-.skin-aria-ng .main-header .navbar .sidebar-toggle:hover, .skin-aria-ng .main-footer .sidebar-toggle:hover, .skin-aria-ng .main-footer .toolbar > a:hover, .skin-aria-ng .main-footer .toolbar.open > a {
-    color: #0080ff;
-}
-
 .skin-aria-ng .main-header .navbar .navbar-searchbar .form-control-icon {
     color: #999999;
 }
@@ -210,16 +202,30 @@
     font-size: 12px;
 }
 
-.skin-aria-ng .main-footer .sidebar-toggle {
+.skin-aria-ng .main-footer > .navbar {
-    float: left;
+    border: 0;
-    background-color: transparent;
-    background-image: none;
-    padding: 0 15px 0 0;
-    font-family: fontAwesome;
 }
 
-.skin-aria-ng .main-footer .sidebar-toggle:before {
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li.divider {
-    content: "\f0c9";
+    padding-top: 16px;
+    margin-left: 4px;
+    margin-right: 4px;
+    border-right: 1px solid #ccc;
+    position: relative;
+    top: 0;
+}
+
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+    color: #707070;
+    line-height: 17px;
+}
+
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:hover,
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:active,
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:focus,
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li.open > a {
+    color: #0080ff;
+    background: none;
 }
 
 .skin-aria-ng .global-status {