app/components/navigation.js

@@ -30,19 +30,7 @@ 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",
@@ -53,12 +41,10 @@ export default currentUrl => {
 
   return html`
     <nav class="navigation">
-      <ul class="inner-wrap">
+      <div class="inner-wrap">
-        <li class="navigation__item logo">
+        <a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
-          <a href="/" title="LBRY homepage">Home</a>
-        </li>
         ${links.map(link => renderLink(currentUrl, link))}
-      </ul>
+      </div>
     </nav>
   `;
 };
@@ -80,45 +66,11 @@ function renderLink(href, link) {
       break;
   }
 
-  if (link.children) {
-    const links = [];
-
-    links.push(html`
-      <li class="navigation__item parent${activeClass ? " active" : ""}">
-        <a
-          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
+      class="navigation__item${activeClass ? " active" : ""}"
       href="${link.url}"
       title="${link.title}"
     >${link.name}</a>
-      </li>
   `;
 }
-}

app/sass/partials/_navigation.scss

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