From 5a8d6353e6ddb8d55b7fe0f1540c675ae2130bcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Courtine?= <benoit.courtine@gmail.com>
Date: Fri, 10 Feb 2017 11:00:32 +0100
Subject: [PATCH] Add a button to toggle sidebar and view content in full width
 (col-md-12).

---
 _includes/topnav.html |  2 ++
 _layouts/default.html | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/_includes/topnav.html b/_includes/topnav.html
index 8748605..aa5f072 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -12,6 +12,8 @@
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right">
+                <!-- toggle sidebar button -->
+                <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
                 <!-- entries without drop-downs appear here -->
                 {% for entry in site.data.topnav.topnav %}
                 {% for item in entry.items %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 90c1c4e..ebe68e7 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -38,6 +38,17 @@
             $('[data-toggle="tooltip"]').tooltip()
         })
     </script>
+    <script>
+        $(document).ready(function() {
+            $("#tg-sb-link").click(function() {
+                $("#tg-sb-sidebar").toggle();
+                $("#tg-sb-content").toggleClass('col-md-9');
+                $("#tg-sb-content").toggleClass('col-md-12');
+                $("#tg-sb-icon").toggleClass('fa-toggle-on');
+                $("#tg-sb-icon").toggleClass('fa-toggle-off');
+            });
+        });
+    </script>
     {% if page.datatable == true %}
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
     <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
@@ -61,11 +72,11 @@
     <!-- Content Row -->
     <div class="row">
         <!-- Sidebar Column -->
-        <div class="col-md-3">
+        <div class="col-md-3" id="tg-sb-sidebar">
 
           {% include sidebar.html %}
     <!-- Content Column -->
-    <div class="col-md-9">
+    <div class="col-md-9" id="tg-sb-content">
         {{content}}
     </div>
     <!-- /.row -->
@@ -77,4 +88,4 @@
 {% if site.google_analytics %}
 {% include google_analytics.html %}
 {% endif %}
-</html>
\ No newline at end of file
+</html>