Add navigation tabs to docs

_custom_theme/css/jspsych_docs.css

@@ -0,0 +1,78 @@
+img {
+  border: thin solid gray !important;
+  box-shadow: 3px 3px 3px #ccc;
+  margin-bottom: 1em;
+}
+
+div.version {
+  margin-left: 1.5em;
+  color: gray;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+nav#toggle-lookit-frameplayer ul {
+  list-style: none;
+  margin: 0;
+  padding: 0px;
+  margin-top: 2em;
+}
+
+nav#toggle-lookit-frameplayer li {
+  float: left;
+  border-bottom-width: 0;
+  border: thin solid whitesmoke;
+  padding: 10px 10px 0.5em 12px;
+  border-width: 1px 1px 0px 1px;
+  margin: 0;
+  border-radius: 20px 8px 0px 0px;
+  background-color: #343131;
+}
+
+nav#toggle-lookit-frameplayer li a {
+  font-weight: bold;
+  color: #9a9a9a;
+}
+
+nav#toggle-lookit-frameplayer li a:visited {
+  color: #9a9a9a;
+}
+
+#toggle-lookit-frameplayer #selected {
+  position: relative;
+  top: 1px;
+}
+
+#toggle-lookit-frameplayer #selected a,
+#toggle-lookit-frameplayer #selected a:visited {
+  color: white;
+}
+
+div.wy-side-nav-search {
+  clear: both;
+  display: inline-block;
+
+  border-bottom: thin solid whitesmoke;
+  margin-bottom: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.wy-nav-side {
+  width: 20em;
+}
+
+.wy-side-scroll {
+  width: 22em;
+}
+
+.wy-side-nav-search {
+  width: 20em;
+}
+
+.wy-menu-vertical {
+  width: 20em;
+}
+
+.wy-nav-content-wrap {
+  margin-left: 20em;
+}

_custom_theme/js/links_in_new_tab.js

@@ -0,0 +1,5 @@
+$(document).ready(function () {
+  $('a[href^="http://"], a[href^="https://"]')
+    .not("a[class*=internal]")
+    .attr("target", "_blank");
+});

_custom_theme/main.html

@@ -0,0 +1,36 @@
+{%- extends "base.html" %} {%- block search_button %} {%- if 'search' in
+config.plugins %}{%- include "searchbox.html" %}{%- endif %} {# From Kim's
+forked RTD theme: https://github.com/kimberscott/sphinx-rtd-theme-frameplayer #}
+<div id="toggle-tab-container" style="position: relative">
+  <nav id="toggle-lookit-frameplayer">
+    <ul>
+      <li>
+        <a href="https://lookit.readthedocs.io" class="icon icon-home"> CHS </a>
+      </li>
+      <li>
+        <a
+          href="https://lookit.readthedocs.io/projects/frameplayer/"
+          class="fa fa-puzzle-piece"
+        >
+          Lookit EFP
+        </a>
+      </li>
+      <li id="selected">
+        {%- if config.theme.logo %}
+        <a href="{{ nav.homepage.url|url }}">
+          <img
+            src="{{ config.theme.logo|url }}"
+            class="logo"
+            alt="{{ _('Logo') }}"
+        /></a>
+        {%- else %}
+        <a href="{{ nav.homepage.url|url }}" class="fa fa-puzzle-piece">
+          jsPsych
+        </a>
+        {%- endif %}
+      </li>
+    </ul>
+  </nav>
+</div>
+
+{%- endblock %}

mkdocs.yml

@@ -3,10 +3,6 @@ docs_dir: ./packages
 repo_url: https://github.com/lookit/lookit-jspsych
 
 nav:
-  - Home: index.md
-  - Related projects:
-      - Lookit API: https://lookit.readthedocs.io
-      - Ember Lookit Frameplayer: https://lookit.readthedocs.io/projects/frameplayer
   - Plugins and Extensions:
       - Record: record/README.md
       - Surveys: surveys/README.md
@@ -15,6 +11,8 @@ nav:
       - CHS's initJsPsych: lookit-initjspsych/README.md
       - Templates: templates/README.md
 
+not_in_nav: index.md
+
 validation:
   omitted_files: warn
   absolute_links: warn
@@ -29,6 +27,13 @@ exclude_docs: |
 
 theme:
   name: readthedocs
+  custom_dir: _custom_theme/
+
+extra_css:
+  - css/jspsych_docs.css
+
+extra_javascript:
+  - js/links_in_new_tab.js
 
 plugins:
   - search