WIP sidebar

public_html/css/style.css

@@ -8,15 +8,16 @@ img {
 }
 
 .messaging {
+    overflow: hidden;
     padding: 0 0 50px 0;
+    position: relative;
 }
 
-.inbox_people {
-    background: #f8f8f8 none repeat scroll 0 0;
-    border-left: 1px solid #c4c4c4;
-    float: right;
+.messaging_heading {
+    border: 1px solid #c4c4c4;
+    border-bottom: 0;
+    padding: 10px 29px 10px 20px;
     overflow: hidden;
-    width: 40%;
 }
 
 .inbox_msg {
@@ -25,22 +26,58 @@ img {
     overflow: hidden;
 }
 
-.recent_heading {
+/* mobile */
+#sidebar {
+    align-items: stretch;
+    border: 1px solid #c4c4c4;
+    background: #f8f8f8 none repeat scroll 0 0;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    transform: translateX(100%);
+    transition-duration: 0.7s;
+    width: 100%;
+    z-index: 1;
+}
+
+/* desktop */
+@media (min-width: 768px) {
+    #sidebar {
+        border-left: 1px solid #c4c4c4;
+        /*float: right;*/
+        /*position: relative;*/
+        overflow: hidden;
+        /*width: 40%;*/
+    }
+}
+
+#sidebar.active {
+    left: 0;
+    transform: none;
+    transition-duration: 0.7s;
+}
+
+@media (min-width: 768px) {
+    #sidebar.active {
+        right: 0;
+        position: relative;
+        transform: none;
+        transition-duration: 0.7s;
+        width: 40%;
+    }
+}
+
+.sidebar_heading {
     float: left;
     width: 40%;
 }
 
-.recent_heading h4 {
-    color: #05728f;
-    font-size: 21px;
-    margin: auto;
-}
-
 /*Search*/
 .heading_search {
+    border-bottom: 1px solid #c4c4c4;
     padding: 10px 29px 10px 20px;
     overflow: hidden;
-    border-bottom: 1px solid #c4c4c4;
 }
 
 .search_bar {
@@ -143,9 +180,16 @@ img {
 }
 
 .messages {
-    float: left;
     padding: 30px 15px 0 25px;
-    width: 60%;
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .messages {
+        /*float: left;*/
+        padding: 30px 15px 0 25px;
+        /*width: 60%;*/
+    }
 }
 
 .time_date {
@@ -202,6 +246,10 @@ img {
     width: 33px;
 }
 
+.msg_send_btn svg {
+    fill: #ffffff;
+}
+
 .msg_history {
     height: 516px;
     overflow-y: auto;