Add icon to hide/show sidebar

2 files changed, 56 insertions, 2 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index ad9ed27c..e15e7c72 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1436,6 +1436,33 @@ span.task-board-date-overdue {
     line-height: 1.8em;
 }
 
+.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%;
@@ -1455,7 +1482,7 @@ span.task-board-date-overdue {
 
     .sidebar-content {
         margin: 0;
-        margin-top: 20px;
+        margin-top: 15px;
         width: 100%;
     }
 }
diff --git a/assets/css/src/sidebar.css b/assets/css/src/sidebar.css
index b744689e..5797e17f 100644
--- a/assets/css/src/sidebar.css
+++ b/assets/css/src/sidebar.css
@@ -27,6 +27,33 @@
     line-height: 1.8em;
 }
 
+.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%;
@@ -46,7 +73,7 @@
 
     .sidebar-content {
         margin: 0;
-        margin-top: 20px;
+        margin-top: 15px;
         width: 100%;
     }
 }