update ui design

app/assets/stylesheets/sx-sidebar.css

@@ -3,7 +3,8 @@
  * Copyright 2013-2017 Start Bootstrap
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
  */
-
+ 
+/**/
 #wrapper {
     padding-left: 0;
     -webkit-transition: all 0.5s ease;
@@ -20,14 +21,13 @@
    /* z-index: 1000;*/
     /*position: fixed;*/
      z-index: 1;
-    position: absolute;
+    position: ;
     left: 200px;
     width: 0;
     height: 100%;
-    margin-left: -200px;
+    margin-left: -224px;
     margin-top:-20px;
-    overflow-x: auto;
-    background: #222d32;
+    overflow-x: ;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
@@ -55,6 +55,7 @@
 
 .sidebar-nav {
     position: absolute;
+    background: #222d32;
     top: 0;
     width: 200px;
     margin: 0;
@@ -133,40 +134,90 @@
         margin-right: 0;
     }
 }
-
-.dropdown-item{
-    padding: 0px 1.5rem !important;
-}
-
-.sidebar-sub-menu {
-    position: relative !important;
+.accordion {
     width: 200px;
     list-style: none;
     font-size: 14px;
-    background-color: #161926;
+    color: #999999 ;
     padding: 0px !important;
     margin: 0px !important;
 }
 
-.sidebar-sub-item {
-    display: block;
-    width: 100%;
-    
-    /*clear: both;*/
-    /*font-weight: normal;*/
-    /*color: #292b2c;
-    text-align: inherit;
-    white-space: nowrap;
-    background: none;
-    border: 0;*/
+.accordion .link {
+  cursor: pointer;
+  display: block;
+ /* padding: 15px 15px 15px 42px;
+  color: #4D4D4D;*/
+ /* font-size: 14px;
+  font-weight: 700;*/
+  /*border-bottom: 1px solid #CCC;*/
+  position: relative;
+  -webkit-transition: all 0.4s ease;
+  -o-transition: all 0.4s ease;
+  transition: all 0.4s ease;
 }
-.fa{
-   
+
+/*.accordion li:last-child .link { border-bottom: 0; }*/
+
+.accordion li i {
+  position: absolute;
+  top: 13px;
+  left: 12px;
+  font-size: 16px;
+  color: #999999;
+  -webkit-transition: all 0.4s ease;
+  -o-transition: all 0.4s ease;
+  transition: all 0.4s ease;
 }
-.custom-fa-arrow{
-     font-size: 20px !important;
-    font-weight: bold;
-    padding: 9px 20px;
+
+.accordion li i.fa-chevron-down {
+  right: 12px;
+  left: auto;
+  font-size: 16px;
+}
+.accordion li .link:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #FFF;
+}
+.accordion li.open .link { color: #fff; }
+
+.accordion li.open .link > .submenu { display: block;overflow: hidden;}
+
+.accordion li.open i { color: #fff; }
+
+.accordion li.open i.fa-chevron-down {
+  -webkit-transform: rotateX(180deg);
+  -ms-transform: rotateX(180deg);
+  -o-transform: rotateX(180deg);
+  transform: rotateX(180deg);
+}
+
+.submenu {
+  display: none;
+  list-style: none;
+  margin-left: ;
+  background: #161926;
+  font-size: 14px;
+}
+
+.submenu li { 
+    margin-left: -38px;
+ }
+
+.submenu a {
+  display: block;
+  text-decoration: none;
+  color: #d9d9d9;
+  padding-left:20px;
+  -webkit-transition: all 0.25s ease;
+  -o-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+
+.submenu a:hover {
+  background: #b63b4d;
+  color: #FFF;
 }
 
 
+