From cfca515706f42c3178134015b7877a668f575f9c Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <jeremy@lbry.io>
Date: Tue, 29 Jan 2019 11:16:14 -0500
Subject: [PATCH] Revert "Closes #205"

---
 app/components/navigation.js       |  70 +++------------
 app/sass/partials/_navigation.scss | 139 ++++++++++-------------------
 2 files changed, 57 insertions(+), 152 deletions(-)

diff --git a/app/components/navigation.js b/app/components/navigation.js
index 385e29a..64bad97 100644
--- a/app/components/navigation.js
+++ b/app/components/navigation.js
@@ -30,19 +30,7 @@ export default currentUrl => {
     {
       name: "Resources",
       title: "View LBRY 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"
-        }
-      ]
+      url: "/resources"
     },
     {
       name: "Community",
@@ -53,12 +41,10 @@ export default currentUrl => {
 
   return html`
     <nav class="navigation">
-      <ul class="inner-wrap">
-        <li class="navigation__item logo">
-          <a href="/" title="LBRY homepage">Home</a>
-        </li>
+      <div class="inner-wrap">
+        <a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
         ${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
-          href="${link.url}"
-          title="${link.title}"
-        >${link.name}</a>
-      </li>
-    `;
-  }
+  return html`
+    <a
+      class="navigation__item${activeClass ? " active" : ""}"
+      href="${link.url}"
+      title="${link.title}"
+    >${link.name}</a>
+  `;
 }
diff --git a/app/sass/partials/_navigation.scss b/app/sass/partials/_navigation.scss
index 1cdb18e..8b96ee5 100644
--- a/app/sass/partials/_navigation.scss
+++ b/app/sass/partials/_navigation.scss
@@ -9,8 +9,7 @@
   position: fixed;
   z-index: 10;
 
-  > ul:first-of-type {
-    overflow: hidden;
+  > div:first-of-type {
     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) {
-    margin-right: 0.5rem;
+  &:not(:first-of-type):not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
+    &::after {
+      width: 100%; height: 3px;
+      left: 0;
 
-    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;
-
-          background-color: $lbry-teal-3;
-          content: "";
-          position: absolute;
-          transition: bottom 0.2s;
-        }
-      }
+      background-color: $lbry-teal-3;
+      content: "";
+      position: absolute;
+      transition: bottom 0.2s;
     }
-  }
-
-  &.parent {
-    display: inline-flex;
 
     &:not(:hover) {
-      ul {
-        width: 0; height: 0;
-
-        opacity: 0;
-        visibility: hidden;
+      &::after {
+        bottom: -3px;
       }
     }
 
-    &:hover {
-      ul {
-        width: 100%;
-        padding-left: 1rem;
-      }
-    }
-
-    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;
+    &:hover,
+    &.active {
+      &::after {
+        bottom: 0;
       }
     }
   }
 
-  a {
-    height: 100%;
-    display: block;
+  &:not(:first-of-type) {
+    color: inherit;
+    font-size: 1rem;
+    line-height: 4rem;
+  }
 
-    &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
-      padding-right: 0.5rem;
-      padding-left: 0.5rem;
+  &:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
+    padding-right: 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"],
-    &[href="https://lbry.io"] {
-      color: $lbry-white;
-      padding-right: 1rem;
-      padding-left: 1rem;
+    &:hover::after {
+      background-color: $lbry-teal-3;
+    }
 
-      &:not(:hover)::after {
-        background-color: $lbry-black;
-      }
+    &::after {
+      width: 100%; height: 2rem;
+      top: 1rem; left: 0;
 
-      &:hover::after {
-        background-color: $lbry-teal-3;
-      }
-
-      &::after {
-        width: 100%; height: 2rem;
-        top: 1rem; left: 0;
-
-        border-radius: 3px;
-        content: "";
-        position: absolute;
-        transition: background-color 0.2s;
-        z-index: -1;
-      }
+      border-radius: 3px;
+      content: "";
+      position: absolute;
+      transition: background-color 0.2s;
+      z-index: -1;
     }
   }
 }
-- 
2.45.2