segmentio · jedrzejchalubek · Oct 4, 2019 · Oct 3, 2019 · Oct 3, 2019 · Oct 3, 2019
@@ -1,5 +1,7 @@
 ---
 sections:
+- section_title: Home
+  path: "/"
 - section_title: Guides
   section:
   - path: "/guides"
@@ -202,7 +204,7 @@ sections:
     title: 'Protocols: Schema Controls'
   - path: "/protocols/tracking-plan"
     title: 'Protocols: Tracking Plan'
-- section_title: Segment-app
+- section_title: Segment Web App
   section:
   - path: "/segment-app"
     title: Overview
@@ -220,3 +222,27 @@ sections:
     title: Picking a secure password
   - path: "/segment-app/sso"
     title: Single Sign On
+- section_title: Partners
+  section:
+  - path: "/partners"
+    title: Overview
+  - path: "/partners/build-functions"
+    title: Building a Subscription Function
+  - path: "/partners/build-webhook"
+    title: Building a Subscription Webhook
+  - path: "/partners/checklist"
+    title: Public Beta Checklist
+  - path: "/partners/co-marketing"
+    title: Co-marketing
+  - path: "/partners/conceptual-model"
+    title: Conceptual Model
+  - path: "/partners/enable-with-segment"
+    title: Using OAuth to Build a Two-Click Enable Flow
+  - path: "/partners/plugins"
+    title: Building a Plugin
+  - path: "/partners/spec"
+    title: Segment Spec for Partners
+  - path: "/partners/streams"
+    title: Building a Stream
+  - path: "/partners/subscriptions"
+    title: Building a Subscription
@@ -15,3 +15,5 @@ sections:
       title: Reference
     - path: "/api/config-api/tutorial-javascript-google-analytics"
       title: Creating a Javascript web source and Google Analytics destination
+- section_title: Help
+  path: "/help"
@@ -1,21 +1,45 @@
 <li class="menu-item" data-accordion data-class-active="menu-item--active">
-  <span class="menu-item__trigger" data-ref="accordion[trigger]">{{ include.root_section.section_title }}</span>
+  {% if include.root_section.path %}
+    <a class="menu-item__link menu-item__link--highlight menu-item__link--icon flex flex--middle" href="{{ site.baseurl }}{{ item.path }}">
+      <div class="menu-item__icon flex__column">
+        {% include icons/menu/icon-{{ include.root_section.section_title | slugify }}.svg %}
+      </div>
+
+      <div class="flex__column">{{ include.root_section.section_title }}</div>
+    </a>
+  {% else %}
+    <div class="menu-item__link menu-item__link--highlight menu-item__link--icon flex flex--middle" data-ref="accordion[trigger]">
+      <div class="menu-item__icon flex__column">
+        {% include icons/menu/icon-{{ include.root_section.section_title | slugify }}.svg %}
+      </div>
+
+      <div class="flex__column">{{ include.root_section.section_title }}</div>
+    </div>
+  {% endif %}
 
   {% if include.root_section.section %}
     <ul class="menu-item__body" data-ref="accordion[body]">
       {% for item in root_section.section %}
         <li class="menu-item" data-accordion data-class-active="menu-item--active">
           {% if item.path %}
-            <a class="menu-item__link" href="{{ site.baseurl }}{{ item.path }}">{{ item.title }}</a>
+            <a class="menu-item__link flex" href="{{ site.baseurl }}{{ item.path }}">{{ item.title }}</a>
           {% endif %}
 
           {% if item.section_title %}
-            <span class="menu-item__trigger" data-ref="accordion[trigger]">{{ item.section_title }}</span>
+            <div class="menu-item__link flex flex--middle flex--justify" data-ref="accordion[trigger]">
+              <div class="flex__column">
+                {{ item.section_title }}
+              </div>
+
+              <div class="menu-item__chevron flex__column flex__column--shrink">
+                {% include icons/symbols/chevron-down.svg %}
+              </div>
+            </div>
 
-            <ul class="menu-item__body" data-ref="accordion[body]">
+            <ul class="menu-item__body menu-item__body--nested" data-ref="accordion[body]">
               {% for subsection in item.section %}
                 <li>
-                  <a class="menu-item__link" href="{{ site.baseurl }}{{ subsection.path }}">{{ subsection.title }}</a>
+                  <a class="menu-item__link flex" href="{{ site.baseurl }}{{ subsection.path }}">{{ subsection.title }}</a>
                 </li>
               {% endfor %}
             </ul>

@@ -1,14 +1,6 @@
 <nav class="menu">
-  <ul class="list list--unstyle">
-    <li class="menu-item">
-      <a class="menu-item__link" href="{{ site.baseurl }}/">Home</a>
-    </li>
-
-    {% for root_section in site.data.menu.main.sections %}
-      {% include menu/menu-item.html root_section=root_section %}
-    {% endfor %}
-
-    {% for root_section in site.data.menu.partners.sections %}
+  <ul class="menu__list list list--unstyle">
+    {% for root_section in site.data.menu.primary.sections %}
       {% include menu/menu-item.html root_section=root_section %}
     {% endfor %}
   </ul>

@@ -1,11 +1,7 @@
 <nav class="menu">
-  <ul class="list list--unstyle">
-    {% for root_section in site.data.menu.api.sections %}
+  <ul class="menu__list list list--unstyle">
+    {% for root_section in site.data.menu.secondary.sections %}
       {% include menu/menu-item.html root_section=root_section %}
     {% endfor %}
-
-    <li class="menu-item">
-      <a class="menu-item__link" href="#">Help</a>
-    </li>
   </ul>
 </nav>
@@ -1,25 +1,96 @@
 .menu-item {
   $this: &;
 
-  & > &__body {
-    display: none;
+  display: block;
+
+  &__body {
+    position: relative;
+    list-style-type: none;
+    margin-top: 20px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 34px;
+
+    & > * + * {
+      margin-top: 12px;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 8px;
+      display: block;
+      width: 1px;
+      height: 100%;
+      background-color: color(border-gray-dark);
+    }
+
+    &--nested {
+      margin-top: 12px;
+      padding-left: 18px;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      & > * {
+        padding-top: 3px;
+        padding-bottom: 3px;
+      }
+
+      &::before {
+        left: 0;
+      }
+    }
   }
 
-  &__trigger {
-    font-weight: 700;
+  & > &__body {
+    display: none;
   }
 
   &__link {
     color: color(gray);
+    line-height: 1.25;
 
     &:hover {
       color: color(primary);
+      text-decoration: none;
+    }
+
+    &--highlight {
+      color: color(gray-dark);
+      font-weight: 500;
+    }
+
+    &--icon {
+      #{$this}__icon {
+        flex: 0 0 16px;
+        width: 16px;
+        color: color(gray);
+        vertical-align: middle;
+        margin-right: 18px;
+      }
     }
   }
 
+  &__chevron {
+    color: color(gray);
+  }
+
   &--active {
     & > #{$this}__body {
       display: block;
     }
+
+    & > #{$this}__link {
+      color: color(primary);
+
+      #{$this}__icon {
+        color: color(primary);
+      }
+
+      #{$this}__chevron {
+        transform: rotate(180deg);
+      }
+    }
   }
 }
@@ -4,4 +4,10 @@
     padding-top: 30px;
     border-top: 1px solid color(border-gray-dark);
   }
+
+  &__list {
+    & > * + * {
+      margin-top: 20px;
+    }
+  }
 }