API List on left panel

src/main/scala/code/snippet/ApiExplorer.scala

@@ -704,11 +704,11 @@ class ApiExplorer extends Loggable {
     "#api_home_link [href]" #> s"$baseUrl" &
     "@views_box [style]" #> s"display: $displayViews;" &
     ".info-box__about_selected *" #> s"$catalogDescription" &
-    ".api_call_index" #> resources.map { i =>
+    ".api_list_item" #> resources.map { i =>
       // append the anchor to the current url. Maybe need to set the catalogue to all etc else another user might not find if the link is sent to them.
-      ".api_call_index_link [href]" #> s"#${i.id}" &
-        ".api_call_index_link *" #> i.summary &
-        ".api_call_index_link [id]" #> s"index_of_${i.id}"
+      ".api_list_item_link [href]" #> s"#${i.id}" &
+        ".api_list_item_link *" #> i.summary &
+        ".api_list_item_link [id]" #> s"index_of_${i.id}"
        // ".content-box__available-since *" #> s"Implmented in ${i.implementedBy.version} by ${i.implementedBy.function}"
     } &
       // replace the node identified by the class "resource" with the following

src/main/webapp/index.html

@@ -2,6 +2,15 @@
 
     <div data-lift="ApiExplorer.showResources">
 
+        <div class="api_list">
+            <ul>
+                <li class="api_list_item">
+                    <a class="api_list_item_link" href="./#anchor">API call title</a>
+                </li>
+            </ul>
+        </div>
+
+
     <section class="breadcrumb-section">
         <div class="container">
             <div class="breadcrumbs">
@@ -146,20 +155,6 @@
 
 
 
-<ul>
-        <li class="api_call_index">
-
-
-                        <a class="api_call_index_link" href="./#anchor">
-                            <h2 id="index_anchor" class="index__headline">The root of the API</h2>
-                        </a>
-
-
-
-        </li>
-</ul>
-
-
 
 
 

src/main/webapp/media/css/style.css

@@ -19,7 +19,7 @@ a img {
 
 .container {
   width: 1017px;
-  margin: 0 auto;
+  margin-left: 270px;
 }
 .container:after {
   content: '';
@@ -373,10 +373,23 @@ a img {
 }
 
 
-.api_call_index {
+
+
+/* This is the list of Api calls on the left panel */
+.api_list {
+    position: fixed;
+    top: 0;
+    z-index: 10;
+    overflow: scroll;
+    width: 250px;
+    height: 750px;
+    background-color: white;
+}
+
+
+.api_list_item {
   margin: 0 0 0px 0;
-  font-size: 10px;
-  line-height: 33px;
+  font-size: 8px;
   color: #24bc65;
   font-weight: 400;
   padding: 0px 0 0 0;