commit
5cb1941f23
2 changed files with 152 additions and 57 deletions
|
@ -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>
|
||||||
`;
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue