Merge pull request #227 from lbryio/205-apis-in-navigation

Closes #205

app/components/navigation.js

@@ -30,7 +30,19 @@ export default currentUrl => {
     {
       name: "Resources",
       title: "View LBRY resources",
-      url: "/resources"
+      url: "/resources",
+      children: [
+        {
+          name: "Blockchain API",
+          title: "Reference for the LBRY blockchain API",
+          url: "/api/blockchain"
+        },
+        {
+          name: "SDK API",
+          title: "Reference for the SDK API",
+          url: "/api/sdk"
+        }
+      ]
     },
     {
       name: "Community",
@@ -41,10 +53,12 @@ export default currentUrl => {
 
   return html`
     <nav class="navigation">
-      <div class="inner-wrap">
+      <ul class="inner-wrap">
-        <a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
+        <li class="navigation__item logo">
+          <a href="/" title="LBRY homepage">Home</a>
+        </li>
         ${links.map(link => renderLink(currentUrl, link))}
-      </div>
+      </ul>
     </nav>
   `;
 };
@@ -66,11 +80,45 @@ function renderLink(href, link) {
       break;
   }
 
-  return html`
+  if (link.children) {
+    const links = [];
+
+    links.push(html`
+      <li class="navigation__item parent${activeClass ? " active" : ""}">
         <a
-      class="navigation__item${activeClass ? " active" : ""}"
           href="${link.url}"
           title="${link.title}"
         >${link.name}</a>
+        <ul>
+    `);
+
+    for (const child of link.children) {
+      links.push(html`
+        <li>
+          <a
+            href="${child.url}"
+            title="${child.title}"
+          >${child.name}</a>
+        </li>
+      `);
+    }
+
+    links.push(html`
+        </ul>
+      </li>
+    `);
+
+    return links.join("");
+  }
+
+  else {
+    return html`
+      <li class="navigation__item${activeClass ? " active" : ""}">
+        <a
+          href="${link.url}"
+          title="${link.title}"
+        >${link.name}</a>
+      </li>
     `;
+  }
 }

app/sass/partials/_navigation.scss

@@ -9,7 +9,8 @@
   position: fixed;
   z-index: 10;
 
-  > div:first-of-type {
+  > ul:first-of-type {
+    overflow: hidden;
     position: relative;
 
     @media (min-width: 701px) {
@@ -39,7 +40,7 @@
 }
 
 .navigation__item {
-  overflow: hidden;
+  // overflow: hidden;
   position: relative;
 
   @media (max-width: 700px) {
@@ -53,6 +54,19 @@
     }
   }
 
+  &:not(:hover) {
+    a::after {
+      bottom: -3px;
+    }
+  }
+
+  &:hover,
+  &.active {
+    a::after {
+      bottom: 0;
+    }
+  }
+
   &:first-of-type {
     @include hide-text;
     width: 10rem; height: 3rem;
@@ -65,7 +79,15 @@
     flex: 1;
   }
 
-  &:not(:first-of-type):not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
+  &:not(.logo) {
+    margin-right: 0.5rem;
+
+    a {
+      color: inherit;
+      font-size: 1rem;
+      line-height: 4rem;
+
+      &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
         &::after {
           width: 100%; height: 3px;
           left: 0;
@@ -75,26 +97,51 @@
           position: absolute;
           transition: bottom 0.2s;
         }
+      }
+    }
+  }
+
+  &.parent {
+    display: inline-flex;
 
     &:not(:hover) {
-      &::after {
+      ul {
-        bottom: -3px;
+        width: 0; height: 0;
+
+        opacity: 0;
+        visibility: hidden;
       }
     }
 
-    &:hover,
+    &:hover {
-    &.active {
+      ul {
-      &::after {
+        width: 100%;
-        bottom: 0;
+        padding-left: 1rem;
-      }
       }
     }
 
-  &:not(:first-of-type) {
+    ul {
-    color: inherit;
+      background-color: $lbry-white;
+      display: inline-flex;
+      position: relative;
+      transition: opacity 0.2s;
+
+      &::before {
+        height: 100%;
+        top: 0; left: 0;
+
+        content: "→";
         font-size: 1rem;
         line-height: 4rem;
+        opacity: 0.3;
+        position: absolute;
       }
+    }
+  }
+
+  a {
+    height: 100%;
+    display: block;
 
     &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
       padding-right: 0.5rem;
@@ -104,7 +151,6 @@
     &[href="http://localhost:8000"],
     &[href="https://lbry.io"] {
       color: $lbry-white;
-    margin-right: 0.5rem;
       padding-right: 1rem;
       padding-left: 1rem;
 
@@ -127,4 +173,5 @@
         z-index: -1;
       }
     }
+  }
 }