WIP sidebar

public_html/css/style.css

@@ -8,15 +8,16 @@ img {
 }
 
 .messaging {
+    overflow: hidden;
     padding: 0 0 50px 0;
+    position: relative;
 }
 
-.inbox_people {
+.messaging_heading {
-    background: #f8f8f8 none repeat scroll 0 0;
+    border: 1px solid #c4c4c4;
-    border-left: 1px solid #c4c4c4;
+    border-bottom: 0;
-    float: right;
+    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;

public_html/index.html

@@ -16,12 +16,17 @@
 
 <div class="container">
 	<div class="messaging">
+		<div class="messaging_heading">
+			<button type="button" id="sidebarShow" class="btn btn-info">toggle show</button>
+		</div>
+
 		<div class="inbox_msg">
-			<div class="inbox_people">
+			<div id="sidebar">
 				<div class="heading_search">
-					<div class="recent_heading">
+					<div class="sidebar_heading">
-						<h4>Recent</h4>
+						<button type="button" id="sidebarCollapse" class="btn btn-info">toggle collapse</button>
 					</div>
+
 					<div class="search_bar">
 						<div class="stylish-input-group">
 							<input type="text" class="search-bar" placeholder="Search">
@@ -112,6 +117,7 @@
 					</div>
 				</div>
 			</div>
+
 			<div class="messages">
 				<div class="msg_history">
 					<div class="incoming_msg">
@@ -185,6 +191,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 <script src="js/client.js"></script>
+<script src="js/sidebar.js"></script>
 
 </body>
 </html>

public_html/js/sidebar.js

@@ -0,0 +1,12 @@
+// https://bootstrapious.com/p/bootstrap-sidebar
+$(document).ready(function () {
+
+    $('#sidebarCollapse').on('click touch', function () {
+        $('#sidebar').removeClass('active');
+    });
+
+    $('#sidebarShow').on('click touch', function () {
+        $('#sidebar').addClass('active');
+    });
+
+});