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) {
+  return html`
-    const links = [];
+    <a
-
+      class="navigation__item${activeClass ? " active" : ""}"
-    links.push(html`
+      href="${link.url}"
-      <li class="navigation__item parent${activeClass ? " active" : ""}">
+      title="${link.title}"
-        <a
+    >${link.name}</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
-          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,99 +65,66 @@
     flex: 1;
   }
 
-  &:not(.logo) {
+  &:not(:first-of-type):not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
-    margin-right: 0.5rem;
+    &::after {
+      width: 100%; height: 3px;
+      left: 0;
 
-    a {
+      background-color: $lbry-teal-3;
-      color: inherit;
+      content: "";
-      font-size: 1rem;
+      position: absolute;
-      line-height: 4rem;
+      transition: bottom 0.2s;
-
-      &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
-        &::after {
-          width: 100%; height: 3px;
-          left: 0;
-
-          background-color: $lbry-teal-3;
-          content: "";
-          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 {
-      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 {
+  &:not(:first-of-type) {
-    height: 100%;
+    color: inherit;
-    display: block;
+    font-size: 1rem;
+    line-height: 4rem;
+  }
 
-    &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
+  &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
-      padding-right: 0.5rem;
+    padding-right: 0.5rem;
-      padding-left: 0.5rem;
+    padding-left: 0.5rem;
+  }
+
+  &[href="http://localhost:8000"],
+  &[href="https://lbry.io"] {
+    color: $lbry-white;
+    margin-right: 0.5rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
+
+    &:not(:hover)::after {
+      background-color: $lbry-black;
     }
 
-    &[href="http://localhost:8000"],
+    &:hover::after {
-    &[href="https://lbry.io"] {
+      background-color: $lbry-teal-3;
-      color: $lbry-white;
+    }
-      padding-right: 1rem;
-      padding-left: 1rem;
 
-      &:not(:hover)::after {
+    &::after {
-        background-color: $lbry-black;
+      width: 100%; height: 2rem;
-      }
+      top: 1rem; left: 0;
 
-      &:hover::after {
+      border-radius: 3px;
-        background-color: $lbry-teal-3;
+      content: "";
-      }
+      position: absolute;
-
+      transition: background-color 0.2s;
-      &::after {
+      z-index: -1;
-        width: 100%; height: 2rem;
-        top: 1rem; left: 0;
-
-        border-radius: 3px;
-        content: "";
-        position: absolute;
-        transition: background-color 0.2s;
-        z-index: -1;
-      }
     }
   }
 }