Closes #205 #227

Merged
NetOpWibby merged 1 commit from 205-apis-in-navigation into master 2019-01-21 23:25:32 +01:00
2 changed files with 152 additions and 57 deletions

View file

@ -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">
<a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
<ul class="inner-wrap">
<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`
<a
class="navigation__item${activeClass ? " active" : ""}"
href="${link.url}"
title="${link.title}"
>${link.name}</a>
`;
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>
`;
}
}

View file

@ -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,66 +79,99 @@
flex: 1;
}
&:not(:first-of-type):not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
&::after {
width: 100%; height: 3px;
left: 0;
&:not(.logo) {
margin-right: 0.5rem;
background-color: $lbry-teal-3;
content: "";
position: absolute;
transition: bottom 0.2s;
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;
}
}
}
}
&.parent {
display: inline-flex;
&:not(:hover) {
&::after {
bottom: -3px;
ul {
width: 0; height: 0;
opacity: 0;
visibility: hidden;
}
}
&:hover,
&.active {
&::after {
bottom: 0;
&: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;
}
}
}
&:not(:first-of-type) {
color: inherit;
font-size: 1rem;
line-height: 4rem;
}
a {
height: 100%;
display: block;
&: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;
&:not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
&:hover::after {
background-color: $lbry-teal-3;
}
&[href="http://localhost:8000"],
&[href="https://lbry.io"] {
color: $lbry-white;
padding-right: 1rem;
padding-left: 1rem;
&::after {
width: 100%; height: 2rem;
top: 1rem; left: 0;
&:not(:hover)::after {
background-color: $lbry-black;
}
border-radius: 3px;
content: "";
position: absolute;
transition: background-color 0.2s;
z-index: -1;
&: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;
}
}
}
}