6 files changed, 166 insertions, 0 deletions
diff --git a/src/rocksdb/docs/_includes/nav.html b/src/rocksdb/docs/_includes/nav.html
new file mode 100644
index 000000000..9c6fed06b
--- /dev/null
+++ b/src/rocksdb/docs/_includes/nav.html
@@ -0,0 +1,37 @@
+<div id="fixed_header" class="fixedHeaderContainer{% if include.alwayson %} visible{% endif %}">
+  <div class="headerWrapper wrapper">
+    <header>
+      <a href="{{ '/' | absolute_url }}">
+        <img src="{{ '/static/logo.svg' }}">
+        <h2>{{ site.title }}</h2>
+      </a>
+
+      <div class="navigationWrapper navigationFull" id="flat_nav">
+        <nav class="navigation">
+          <ul>
+            {% for item in site.data.nav %}
+            <li class="navItem{% if page.collection == item.category or page.category == item.category %} navItemActive{% endif %}">
+              {% if item.category == "external" %}
+                <a href="{{ item.href }}">{{ item.title }}</a>
+              {% else %}
+                {% comment %}
+                I removed `relative_url` from here for now until the problem we are having with
+                GitHub pages is resolved. Yes, I know this is exactly the same as the if above.
+                See: https://github.com/facebook/rocksdb/commit/800e51553ee029f29581f7f338cbc988c7f6da62
+                {% endcomment %}
+                <a href="{{ item.href }}">{{ item.title }}</a>
+              {% endif %}
+            </li>
+            {% endfor %}
+            {% if site.searchconfig %}
+            {% include nav_search.html inputselector="search_input" %}
+            {% endif %}
+          </ul>
+        </nav>
+      </div>
+      <div class="navigationWrapper navigationSlider" id="navigation_wrap">
+        {% include nav/header_nav.html %}
+      </div>
+    </header>
+  </div>
+</div>
diff --git a/src/rocksdb/docs/_includes/nav/collection_nav.html b/src/rocksdb/docs/_includes/nav/collection_nav.html
new file mode 100644
index 000000000..a3c7a2dd3
--- /dev/null
+++ b/src/rocksdb/docs/_includes/nav/collection_nav.html
@@ -0,0 +1,64 @@
+<div class="docsNavContainer">
+  <nav class="toc" id="doc_nav">
+    <div class="toggleNav" id="collection_nav">
+      <section class="navWrapper wrapper">
+        <div class="navBreadcrumb wrapper">
+          <div class="navToggle" id="collection_nav_toggler">
+            <i></i>
+          </div>
+          <h2>
+            <a href="{{ include.sectionpath }}">{{ include.sectiontitle }}</a>
+            {% if include.currentgroup %}
+            <i>›</i>
+            <span>{{ include.currentgroup }}</span>
+            {% endif %}
+          </h2>
+        </div>
+        <div class="navGroups">
+          {% if include.type == "blog" %}
+            {% assign grouptitle = "All Posts" %}
+            {% assign groupitems = include.navdata %}
+            {% include nav/collection_nav_group.html %}
+          {% else %}
+          {% for group in include.navdata %}
+            {% assign grouptitle = group.title %}
+            {% for item in group.items %}
+              {% if item.id == page.docid %}
+              {% assign currentgroup = group %}
+              {% endif %}
+            {% endfor %}
+            {% include nav/collection_nav_group.html %}
+          {% endfor %}
+          {% endif %}
+        </div>
+      </section>
+    </div>
+  </nav>
+</div>
+<script>
+  var docsevent = document.createEvent('Event');
+  docsevent.initEvent('docs_slide', true, true);
+  document.addEventListener('docs_slide', function (e) {
+    document.body.classList.toggle('docsSliderActive');
+  }, false);
+
+  var collectionNav = document.getElementById('collection_nav');
+  var collectionNavToggler =
+    document.getElementById('collection_nav_toggler');
+  collectionNavToggler.addEventListener('click', function(e) {
+    collectionNav.classList.toggle('toggleNavActive');
+    document.dispatchEvent(docsevent);
+  });
+
+  var groups = document.getElementsByClassName('navGroup');
+  for(var i = 0; i < groups.length; i++) {
+    var thisGroup = groups[i];
+    thisGroup.onclick = function() {
+      for(var j = 0; j < groups.length; j++) {
+        var group = groups[j];
+        group.classList.remove('navGroupActive');
+      }
+      this.classList.add('navGroupActive');
+    }
+  }
+</script>
diff --git a/src/rocksdb/docs/_includes/nav/collection_nav_group.html b/src/rocksdb/docs/_includes/nav/collection_nav_group.html
new file mode 100644
index 000000000..b236ac5e3
--- /dev/null
+++ b/src/rocksdb/docs/_includes/nav/collection_nav_group.html
@@ -0,0 +1,19 @@
+<div class="navGroup{% if currentgroup == group %} navGroupActive navGroupCurrent{% endif %}">
+  <h3><i>+</i><span>{{ grouptitle }}</span></h3>
+  <ul>
+    {% if include.data_collection %}
+      {% for item in group.items %}
+        {% for collectionitem in include.data_collection %}
+        {% if collectionitem.docid == item.id %}
+          {% assign groupitem = collectionitem %}
+          {% include nav/collection_nav_group_item.html %}
+        {% endif %}
+        {% endfor %}
+      {% endfor %}
+    {% else %}
+      {% for groupitem in groupitems %}
+      {% include nav/collection_nav_group_item.html %}
+      {% endfor %}
+    {% endif %}
+  </ul>
+</div>
+\ No newline at end of file
diff --git a/src/rocksdb/docs/_includes/nav/collection_nav_group_item.html b/src/rocksdb/docs/_includes/nav/collection_nav_group_item.html
new file mode 100644
index 000000000..fbb063deb
--- /dev/null
+++ b/src/rocksdb/docs/_includes/nav/collection_nav_group_item.html
@@ -0,0 +1 @@
+<li class="navListItem"><a class="navItem" href="{{ groupitem.url | absolute_url }}">{{ groupitem.title }}</a></li>
diff --git a/src/rocksdb/docs/_includes/nav/header_nav.html b/src/rocksdb/docs/_includes/nav/header_nav.html
new file mode 100644
index 000000000..0fe945cdc
--- /dev/null
+++ b/src/rocksdb/docs/_includes/nav/header_nav.html
@@ -0,0 +1,30 @@
+<div id="header_nav">
+  <div class="navSlideout">
+    <i class="menuExpand" id="header_nav_expander"><span></span><span></span><span></span></i>
+  </div>
+  <nav class="slidingNav">
+    <ul>
+      {% for item in site.data.nav %}
+      <li class="navItem">
+        <a href="{{ item.href }}"{% if item.category == "external" %} target="_blank"{% endif %}>{{ item.title }}</a>
+      </li>
+      {% endfor %}
+      {% if site.searchconfig %}
+      {% include nav_search.html inputselector="search_input_react" %}
+      {% endif %}
+    </ul>
+  </nav>
+</div>
+<script>
+  var event = document.createEvent('Event');
+  event.initEvent('slide', true, true);
+  document.addEventListener('slide', function (e) {
+    document.body.classList.toggle('sliderActive');
+  }, false);
+  var headerNav = document.getElementById('header_nav');
+  var headerNavExpander = document.getElementById('header_nav_expander');
+  headerNavExpander.addEventListener('click', function(e) {
+    headerNav.classList.toggle('navSlideoutActive');
+    document.dispatchEvent(event);
+  }, false);
+</script>
+\ No newline at end of file
diff --git a/src/rocksdb/docs/_includes/nav_search.html b/src/rocksdb/docs/_includes/nav_search.html
new file mode 100644
index 000000000..84956b9f7
--- /dev/null
+++ b/src/rocksdb/docs/_includes/nav_search.html
@@ -0,0 +1,15 @@
+<li class="navSearchWrapper">
+  <input id="{{ include.inputselector }}" type="search" />
+</li>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+<script>
+// For Algolia search
+(function() {
+  // Algolia
+  docsearch({
+    apiKey: '{{ site.searchconfig.apikey }}',
+    indexName: '{{ site.searchconfig.indexname }}',
+    inputSelector: '#{{ include.inputselector }}',
+  });
+}());
+</script>
+\ No newline at end of file