Add Sidebar on the left side

css/custom.css

@@ -159,36 +159,51 @@ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
 margin-bottom: 30px;
 }
 
+/* Sidebar */
 .sidebar {
-text-align: right;
+  position: fixed;
+  top: 0;
+  left: -250px; /* Cachée par défaut */
+  width: 250px;
+  height: 100%;
+  background: #333;
+  color: white;
+  padding: 20px;
+  transition: 0.3s;
+  z-index: 1000;
 }
 
-.sidebar a {
-color: #ccc;
+.sidebar ul {
+  list-style-type: none;
+  padding: 0;
 }
 
-.sidebar a:hover {
-text-decoration: underline;
+.sidebar ul li {
+  padding: 10px 0;
 }
 
-.sidebar a:visited {
-color: #ccc;
+.sidebar ul li a {
+  color: white;
+  text-decoration: none;
 }
 
-.sidebar ul {
-list-style: none;
-padding: 0;
-font-size: 12px;
-font-weight: 200;
+.sidebar ul li a:hover {
+  text-decoration: underline;
 }
 
-.sidebar ul li {
-margin: 3px 0;
+.sidebar-toggle {
+  position: absolute;
+  top: 10px;
+  right: -50px;
+  background: #ea2a2e;
+  border: none;
+  color: white;
+  padding: 10px;
+  cursor: pointer;
 }
 
-.sidebar-sub {
-margin-bottom: 0;
-margin-top: 30px;
+.sidebar.show {
+  left: 0;
 }
 
 .footer {

index.html

@@ -333,29 +333,32 @@ <h3>Libraries to help you build rich client applications</h3>
 
      <!-- START SIDEBAR -->
 
-      <!--
-     <div class="col-sm-4 sidebar">
-
-     <a class="twitter-timeline" href="https://twitter.com/NetflixOSS" data-theme="dark" data-widget-id="586596093502205952">Tweets by @NetflixOSS</a>
-     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-
-     <p class="sidebar-sub"><strong>Open Source</strong></p>
-     <ul class="sidebar-list">
-       <li><a href="http://netflix.github.io/" target="_blank">NETFLIX OPEN SOURCE</a></li>
-       <li><a href="http://netflix.github.io/" target="_blank">NETFLIX GITHUB</a></li>
-       <li><a href="https://jobs.netflix.com/" target="_blank">GET IN ON THE FUN: JOIN US!</a></li>
-     </ul>
-
-     <p class="sidebar-sub"><strong>Stay in Touch</strong></p>
-     <ul>
-       <li><a href="http://techblog.netflix.com/" target="_blank">OUR TECH BLOG</a></li>
-       <li><a href="https://twitter.com/NetflixOSS" target="_blank">@NetflixOSS</a></li>
-       <li><a href="http://www.slideshare.net/netflix" target="_blank">SLIDESHARE</a></li>
-       <li><a href="http://www.meetup.com/Netflix-Open-Source-Platform/" target="_blank">NETFLIX MEETUP</a></li>
-     </ul>
-
-     </div>
-           -->
+
+      <div class="sidebar">
+        <button class="sidebar-toggle" onclick="toggleSidebar()">☰ Menu</button>
+        <div class="sidebar-content">
+          <p class="sidebar-sub"><strong>Open Source</strong></p>
+          <ul class="sidebar-list">
+            <li><a href="http://netflix.github.io/" target="_blank">NETFLIX OPEN SOURCE</a></li>
+            <li><a href="https://www.github.com/netflix" target="_blank">NETFLIX GITHUB</a></li>
+            <li><a href="https://jobs.netflix.com/" target="_blank">GET IN ON THE FUN: JOIN US!</a></li>
+          </ul>
+
+          <p class="sidebar-sub"><strong>Stay in Touch</strong></p>
+          <ul>
+            <li><a href="http://techblog.netflix.com/" target="_blank">OUR TECH BLOG</a></li>
+            <li><a href="https://twitter.com/NetflixOSS" target="_blank">@NetflixOSS</a></li>
+            <li><a href="http://www.slideshare.net/netflix" target="_blank">SLIDESHARE</a></li>
+            <li><a href="http://www.meetup.com/Netflix-Open-Source-Platform/" target="_blank">NETFLIX MEETUP</a></li>
+          </ul>
+
+          <!-- Twitter Widget -->
+          <p class="sidebar-sub"><strong>Latest Tweet</strong></p>
+          <a class="twitter-timeline" data-width="250" data-height="400" data-theme="dark" href="https://twitter.com/NetflixOSS?ref_src=twsrc%5Etfw">Tweets by NetflixOSS</a>
+        </div>
+      </div>
+
+
 
      <!-- /END SIDEBAR -->
 
@@ -398,5 +401,7 @@ <h3>Libraries to help you build rich client applications</h3>
     <script src="js/bootstrap.min.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="js/ie10-viewport-bug-workaround.js"></script>
+    <script src="js/sidebar.js"></script>
+    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
   </body>
 </html>

js/sidebar.js

@@ -0,0 +1,3 @@
+function toggleSidebar() {
+    document.querySelector(".sidebar").classList.toggle("show");
+  }