Change sidebar style

assets/css/src/listing.css

@@ -5,7 +5,7 @@
     margin-bottom: 20px;
     border: 1px solid #ddd;
     color: #333;
-    background-color: #fefefe;
+    background-color: #fcfcfc;
     overflow: auto;
 }
 

assets/css/src/sidebar.css

@@ -1,90 +1,65 @@
-/* sidebar */
 .sidebar-container {
     margin-top: 10px;
-    position: relative;
-    clear: both;
+    height: 100%;
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-box;
+    display: box;
+    -ms-flex-direction: row;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    -ms-box-orient: horizontal;
+    box-orient: horizontal;
 }
 
 .sidebar-content {
-    margin-left: 23%;
-    width: 76%;
-    position: absolute;
+    padding-left: 10px;
+    -ms-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -ms-box-flex: 1;
+    box-flex: 1;
 }
 
 .sidebar {
-    width: 20%;
-    float: left;
-    padding: 10px;
-    padding-top: 0;
-    border: 1px solid #ddd;
-    background: #fdfdfd;
-    border-radius: 5px;
+    padding-right: 10px;
+    border-right: 1px dotted #eee;
+    font-size: 0.95em;
+    width: 240px;
+    -ms-flex: 0 100px;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -ms-box-flex: 0;
+    box-flex: 0;
+}
+
+.sidebar a {
+    text-decoration: none;
 }
 
 .sidebar li {
-    list-style-type: square;
-    margin-left: 30px;
-    line-height: 1.8em;
+    list-style-type: none;
+    line-height: 35px;
+    border-bottom: 1px dotted #efefef;
+}
+
+.sidebar li:hover {
+    border-left: 5px solid #555;
+    padding-left: 8px;
+}
+
+.sidebar li.active {
+    border-left: 5px solid #333;
+    padding-left: 8px;
 }
 
 .sidebar li.active a {
-    color: #000;
+    color: #333;
     font-weight: bold;
-    text-decoration: none;
 }
 
 .sidebar li.active a:focus,
 .sidebar li.active a:hover {
-    text-decoration: underline;
-}
-
-.sidebar-collapsed .sidebar {
-    width: 10px;
-    padding-bottom: 0;
-    float: none;
-}
-
-.sidebar-collapsed .sidebar-content {
-    margin: 0;
-    margin-top: 15px;
-    width: 100%;
-}
-
-.sidebar-collapse {
-    text-align: right;
-}
-
-.sidebar-collapse a,
-.sidebar-expand a {
-    color: #333;
-    text-decoration: none;
-}
-
-.sidebar-collapse a:hover,
-.sidebar-expand a:hover {
-    color: #DF5353;
-}
-
-@media only screen and (max-width: 1024px) {
-    .sidebar {
-        width: 25%;
-    }
-
-    .sidebar-content {
-        margin-left: 30%;
-        width: 70%;
-    }
-}
-
-@media only screen and (max-width: 767px) {
-    .sidebar {
-        width: 95%;
-        float: none;
-    }
-
-    .sidebar-content {
-        margin: 0;
-        margin-top: 15px;
-        width: 100%;
-    }
+    color: #555;
 }

assets/js/src/App.js

@@ -1,7 +1,6 @@
 function App() {
     this.board = new Board(this);
     this.markdown = new Markdown();
-    this.sidebar = new Sidebar();
     this.search = new Search(this);
     this.swimlane = new Swimlane();
     this.dropdown = new Dropdown();
@@ -33,7 +32,6 @@ App.prototype.listen = function() {
     this.project.listen();
     this.popover.listen();
     this.markdown.listen();
-    this.sidebar.listen();
     this.tooltip.listen();
     this.dropdown.listen();
     this.search.listen();

assets/js/src/Sidebar.js

@@ -1,25 +0,0 @@
-function Sidebar() {
-}
-
-Sidebar.prototype.expand = function(e) {
-    e.preventDefault();
-    $(".sidebar-container").removeClass("sidebar-collapsed");
-    $(".sidebar-collapse").show();
-    $(".sidebar h2").show();
-    $(".sidebar ul").show();
-    $(".sidebar-expand").hide();
-};
-
-Sidebar.prototype.collapse = function(e) {
-    e.preventDefault();
-    $(".sidebar-container").addClass("sidebar-collapsed");
-    $(".sidebar-expand").show();
-    $(".sidebar h2").hide();
-    $(".sidebar ul").hide();
-    $(".sidebar-collapse").hide();
-};
-
-Sidebar.prototype.listen = function() {
-    $(document).on("click", ".sidebar-collapse", this.collapse);
-    $(document).on("click", ".sidebar-expand", this.expand);
-};