1 files changed, 122 insertions, 6 deletions
diff --git a/doc/toc.html b/doc/toc.html
index ac21959cf..458f6ec84 100644
--- a/doc/toc.html
+++ b/doc/toc.html
@@ -1,6 +1,122 @@
-<ul>
-<li><a href="help/general">Project/Site Information</a></li>
-<li><a href="help/members">For Members</a></li>
-<li><a href="help/admins">For Administrators</a></li>
-<li><a href="help/develop">For Developers</a></li>
-</ul>
+<style>
+    .doco-list-group-item > a {
+        font-weight: bold;
+    } 
+
+    .sub-menu {
+        margin: 3px 0px 10px 10px;
+    }
+    
+    #doco-content h1 {
+        border-bottom: #cccccc thin solid;
+        padding-bottom: 0.3em;
+    }
+    
+    #region_1 .widget ul ul {
+        list-style-type: none;
+    }
+
+    .toc-content li,
+    #doco-top-toc li {
+	padding: 3px 0px;
+    }
+</style>
+
+<div class="" id="accordion">
+    <div class="panel">
+        <div class="">
+            <h3 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#about">
+                    About</a>
+            </h3>
+        </div>
+        <div id="about" class="panel-collapse collapse in">
+            <ul class="list-group">
+                <li class="doco-list-group-item"><a href="/help/about/about_hubzilla">Hubzilla project</a></li>
+                <li class="doco-list-group-item"><a href="/help/about/about_hub">About this hub</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="panel">
+        <div class="">
+            <h3 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#members">
+                    Members</a>
+            </h3>
+        </div>
+        <div id="members" class="panel-collapse collapse in">
+            <ul class="list-group">
+                <li class="doco-list-group-item"><a href="/help/member/member_guide">Guide</a></li>
+                <li class="doco-list-group-item"><a href="/help/member/member_faq">FAQ</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="panel">
+        <div class="">
+            <h3 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#administrators">
+                    Administrators</a>
+            </h3>
+        </div>
+        <div id="administrators" class="panel-collapse collapse in">
+            <ul class="list-group">
+                <li class="doco-list-group-item"><a href="/help/admin/administrator_guide">Guide</a></li>
+                <li class="doco-list-group-item"><a href="/help/admin/hub_snapshots">Hub Snapshots</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="panel">
+        <div class="">
+            <h3 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#developers">
+                    Developers</a>
+            </h3>
+        </div>
+        <div id="developers" class="panel-collapse collapse in">
+            <ul class="list-group">
+                <li class="doco-list-group-item"><a href="/help/developer/developer_guide">Guide</a></li>
+                <li class="doco-list-group-item"><a href="/help/developer/api_zot">Zot API</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="panel">
+        <div class="">
+            <h3 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#tutorials">
+                    Tutorials</a>
+            </h3>
+        </div>
+        <div id="tutorials" class="panel-collapse collapse in">
+            <ul class="list-group">
+                <li class="doco-list-group-item"><a href="/help/tutorials/personal_channel">Personal Channel</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<script>
+
+    // Generate the table of contents in the side nav menu (see view/tpl/help.tpl)
+    $(document).ready(function () {
+        $(".panel-collapse.in").find('a').each(function(){
+            window.console.log($(this).attr('href'));
+            var url = document.createElement('a');
+            url.href = window.location;
+            var pageName = url.href.split('/').pop().split('#').shift();
+            window.console.log('pageName: ' + pageName);
+            var linkName = $(this).attr('href').split('/').pop();
+            window.console.log('linkName: ' + linkName);
+            if(pageName === linkName) {
+                var tocUl = $(this).closest('li').append('<ul>').find('ul');
+                tocUl.removeClass();  // Classes are automatically added to <ul> elements by something else
+                tocUl.toc({content: "#doco-content", headings: "h1"});
+                tocUl.addClass('toc-content sub-menu');
+		tocUl.attr('id', 'doco-side-toc');
+
+            }
+        });
+		
+	$(document.body).trigger("sticky_kit:recalc");
+
+    });
+
+</script>