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

Closes #205
This commit is contained in:
netop:// ウェッブ 2019-01-21 16:25:31 -06:00 committed by GitHub
commit 5cb1941f23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 57 deletions

View file

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

View file

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