segmentio · bryanmikaelian · Jul 24, 2019 · Jul 23, 2019 · Jul 23, 2019 · Jul 23, 2019
@@ -1,5 +1,5 @@
-.PHONY: run
-run:
+.PHONY: docs
+docs:
 	make build && \
 	docker build . -t segment-docs:latest && \
 	echo "Running segment docs at http://localhost:4000/docsv2/" && \

@@ -1 +1,5 @@
-<div id="sidenav"></div>
+<div id="sidenav">
+  <nav>
+
+  </nav>
+</div>
@@ -0,0 +1,10 @@
+<div id="topnav">
+  <div class="l-topnav-search">
+    <img src="{{site.baseurl}}/assets/icons/nav/search.svg"></img>
+    <input class="DocsNav-search-input" placeholder="Search documentation" type="text"/>
+  </div>
+  <div class="l-topnav-links ">
+    <a href="https://segment.com/contact/">Support</a>
+    <a href="https://app.segment.com">Sign In</a>
+  </div>
+</div>
@@ -4,9 +4,20 @@
   <body>
     <div id="docs">
       {% include sidenav.html %}
-      <div class="l-docs-wrapper">
-        {{ content }}
-      </div>
+      <main>
+        {% include topnav.html %}
+        <div id="doc-content">
+          {{ content }}
+        </div>
+      </main>
     </div>
+    <script type="text/javascript">
+      (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
+      (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
+      e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
+      })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
+
+      _st('install','dsmQzTck4zz2vQNsXLJW','2.0.0');
+    </script>
   </body>
 </html>
@@ -2,24 +2,26 @@
 layout: default
 ---
 
-<article id="doc-content">
-  {% include breadcrumb.html %} 
+<div class="l-doc-container">
+  <article id="doc-content">
+    {% include breadcrumb.html %} 
 
 
-  {%- if page.title -%}
-    <h1 id="{{page.title | downcase}}" class="page-heading">{{ page.title }}</h1>
-  {%- endif -%}
-
-  {{ content }}
-</article>
-<div id="doc-toc">
-  <div class="l-doc-toc-wrapper">
-    <h4>On this page</h4>
     {%- if page.title -%}
-      <ul>
-        <li><a href="#{{page.title | downcase}}"> {{page.title}}</a></li>
-      </ul>
+      <h1 id="{{page.title | downcase}}" class="page-heading">{{ page.title }}</h1>
     {%- endif -%}
-    {% include toc.html html=content h_max=2 %} 
+
+    {{ content }}
+  </article>
+  <div id="doc-toc">
+    <div class="l-doc-toc-wrapper">
+      <h4>On this page</h4>
+      {%- if page.title -%}
+        <ul>
+          <li><a href="#{{page.title | downcase}}"> {{page.title}}</a></li>
+        </ul>
+      {%- endif -%}
+      {% include toc.html html=content h_max=2 %} 
+    </div>
   </div>
-</div>
+</div>
@@ -31,7 +31,7 @@ $border-radius-unit: 5px !default;
 $content-padding: 47px !default;
 
 // Width of the content areas
-$content-width: 1000px !default;
+$content-width: 1250px !default;
 $topnav-height: 60px !default;
 $sidenav-width: 270px !default;
 

@@ -4,35 +4,60 @@
   display: flex;
   display: grid;
 
-  grid-template-columns: minmax(252px, calc(50% - 405px)) 1010px 1fr;
-  grid-template-columns: minmax(252px, calc((100% - 1262px) / 2 + 226px)) 1010px 1fr;
+  grid-template-columns: minmax($sidenav-width, calc(50% - 405px)) 1fr;
+  grid-template-columns: minmax($sidenav-width, calc((100% - 1200px) / 2)) 1fr;
+}
+
+#docs > main {
+  display: flex;
+  flex-direction: column;
 }
 
 #sidenav {
   display: flex;
   flex: 0;
-  flex-grow: 1;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   height: 100vh;
-  margin-right: $content-padding;
+  min-width: $sidenav-width;
   background-color: $grey-color;
 }
 
+#sidenav > nav {
+  margin-left: 226px;
+}
+
+#topnav {
+  height: $topnav-height;
+  border-bottom:  1px solid rgba(67, 90, 111, 0.2);
+  padding: 0px 30px;
+  padding-left: $content-padding;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+}
+
+#doc-content {
+  background: $background-color;
+}
+
 #doc-content {
   overflow-x: visible;
-  min-width: $content-width - 10;
+  width: $content-width;
+  display: flex;
+  flex-direction: column
 }
 
+
 #doc-toc {
   padding-left: 44px;
-  min-width: $content-width / 5;
+  min-width: $sidenav-width - 50px;
 }
 
 .l-breadcrumb-wrapper {
   display: flex;
-  margin-top: 25px;
   margin-bottom: 32px;
   margin-left: -5px;
   color: $text-color-breadcrumb;
@@ -43,15 +68,17 @@
   padding: 0 5px;
 }
 
-.l-docs-wrapper {
-  outline: none;
+.l-doc-container {
   display: flex;
-  background: $background-color;
+  flex: 0;
+  margin-left: $content-padding;
+  margin-top: 25px;
 }
 
 .l-doc-toc-wrapper {
   position: -webkit-sticky;
   position: sticky;
+  margin-top: 60px;
   top: 81px;
   color: $text-color-grey;
 }
@@ -89,9 +116,10 @@
   display: flex;
   align-items: center;
   color: $text-color;
-  width: $grid-gutter-unit * 14;
+  width: $grid-gutter-unit * 13;
   height: 84px;
   padding: 22px $grid-gutter-unit;
+  padding-right: $grid-gutter-unit;
   margin-bottom: $grid-gutter-unit;
   margin-left: $grid-gutter-unit;
   border-radius: $border-radius-unit;
@@ -121,3 +149,34 @@
     margin-bottom: 0;
   }
 }
+
+.l-topnav-search  {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.l-topnav-search > img {
+  margin-right: 10px;
+  opacity: 0.5;
+}
+
+.l-topnav-search > input {
+  width: 100%;
+  height: inherit;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+}
+
+.l-topnav-links {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.l-topnav-links > a {
+  margin-left: 30px;
+}