gitbot/hugo-book
1
0
Fork 1
mirror of https://github.com/alex-shpak/hugo-book.git synced 2025-06-13 03:54:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7 from decentraland/feat/update-navbar

Browse Source 
feat: Update navbar menu
This commit is contained in:
Gabriel Díaz 2023-05-12 10:18:20 -03:00 committed by GitHub
commit 1cac24f93f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 196 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
assets/_dcl-ui.scss
View File

@ -2602,6 +2602,7 @@ a.ui.card:hover,
padding: 0px;
font-size: 13px;
line-height: 18px;
z-index: 2;
}
.dcl.navbar .ui.menu .item.disabled {
@ -2610,12 +2611,18 @@ a.ui.card:hover,
}
.dcl.navbar .ui.menu .item:hover,
.dcl.navbar .ui.menu .item.active {
.dcl.navbar .ui.menu .item .item:has(+ .item.submenu.active),
.dcl.navbar .ui.menu .item.active,
.dcl.navbar .ui.menu .item.active .item {
color: var(--text);
background: transparent;
cursor: pointer;
}
.dcl.navbar .ui.menu .item > .item {
z-index: 1;
}
.dcl.navbar .ui.menu .item.active {
font-weight: bold;
}
@ -2673,6 +2680,53 @@ a.ui.card:hover,
cursor: default;
}
.dcl.navbar .ui.menu .item > a.item,
.dcl.navbar .ui.menu .item .submenu {
margin-left: 0;
margin-right: 0;
}
.dcl.navbar .ui.menu .item .item.submenu {
display: none;
position: absolute;
top: 0;
padding-top: 32px;
z-index: 0;
}
.dcl.navbar .ui.menu > div.item:hover .item.submenu {
display: block;
}
.dcl.navbar .ui.menu .item .submenu .ui.vertical.menu {
background: var(--dropdown);
box-shadow: var(--shadow-2);
}
.dcl.navbar .ui.menu .item .submenu .item {
font-weight: normal;
color: var(--text);
border-radius: 0;
text-transform: uppercase;
font-family: var(--font-family);
margin-left: 0;
margin-right: 0;
font-size: 13px;
line-height: 1.4285em;
display: flex;
align-items: center;
border-bottom: 1px solid var(--dropdown-hover);
padding: 12px 16px;
}
.dcl.navbar .ui.menu .item .submenu .item:last-child {
border-bottom: none;
}
.dcl.navbar .ui.menu .item .submenu .item:hover {
background-color: var(--dropdown-hover);
}
@media (max-width: 768px) {
.dcl.navbar-logo {
cursor: pointer;
@ -2709,6 +2763,9 @@ a.ui.card:hover,
opacity: 1;
transform: translateY(0px);
box-shadow: var(--shadow-3);
overflow-y: overlay;
overflow-x: hidden;
max-height: 395px;
}
.dcl.navbar .mobile-menu .item {
@ -2720,13 +2777,54 @@ a.ui.card:hover,
color: var(--text);
}
.dcl.navbar .mobile-menu .item.active {
.dcl.navbar .mobile-menu .item.active,
.dcl.navbar .mobile-menu .item.active .item {
background-color: var(--navbar-popup-hover);
font-weight: bold;
}
.dcl.navbar .mobile-menu .item:hover {
.dcl.navbar .mobile-menu .item.submenu .ui.vertical.menu {
width: 100%;
}
.dcl.navbar .mobile-menu .item,
.dcl.navbar .mobile-menu .item.submenu {
margin-left: 0;
margin-right: 0;
}
.dcl.navbar .mobile-menu .item.submenu {
position: relative;
top: 0;
padding: 0;
}
.dcl.navbar .mobile-menu .item.submenu .ui.vertical.menu {
background-color: var(--navbar-popup);
box-shadow: none;
}
.dcl.navbar .mobile-menu .item.submenu .item {
font-weight: normal;
color: var(--text);
border-radius: 0;
text-transform: uppercase;
font-family: var(--font-family);
margin-left: 0;
margin-right: 0;
font-size: 13px;
line-height: 1.4285em;
display: flex;
align-items: center;
border-bottom: 1px solid var(--dropdown-hover);
padding: 12px 0 12px 76px;
}
.dcl.navbar .mobile-menu .item.submenu .item:last-child {
border-bottom: none;
}
.dcl.navbar .mobile-menu .item.submenu .item:hover {
background-color: var(--navbar-popup-hover);
}
}

16
assets/navbar.js Normal file
View File

@ -0,0 +1,16 @@
;(function () {
var navbarItems = document.querySelectorAll('.dcl.navbar .dcl.navbar-menu .ui.menu > div.item')
navbarItems.forEach((menuItem) => {
menuItem.querySelectorAll('a.item').forEach((link) => {
var parent = menuItem.querySelector('a.item')
link.addEventListener('click', function (event) {
if (window.analytics) {
window.analytics.track('Clicked on navbar', {
section: parent.textContent.toLowerCase(),
submenu: parent.textContent !== event.target.textContent ? event.target.textContent.toLowerCase() : undefined,
})
}
})
})
})
})()

19
layouts/_default/baseof.html
View File

@ -7,24 +7,7 @@
<body dir="{{ default "ltr" .Site.Language.LanguageDirection }}" >
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<div class="dcl navbar fullscreen" role="navigation">
<div class="ui container">
<div class="dcl navbar-menu">
<div class="ui secondary stackable menu">
<a class="dcl navbar-logo" href="https://decentraland.org">
<i class="dcl logo"></i>
</a>
<a href="https://market.decentraland.org" class="item">Marketplace</a>
<a href="https://builder.decentraland.org" class="item">Builder</a>
<a href="https://docs.decentraland.org" class="active item">Docs</a>
<a href="https://places.decentraland.org" class="item">Places</a>
<a href="https://events.decentraland.org" class="item">Events</a>
<a href="https://dao.decentraland.org" class="item">DAO</a>
<a href="https://decentraland.org/blog" class="item">Blog</a>
</div>
</div>
</div>
</div>
{{ partial "docs/navbar" . }}
{{ if .IsHome }}
<main class="main-home">

78
layouts/partials/docs/navbar.html Normal file
View File

@ -0,0 +1,78 @@
<div class="dcl navbar fullscreen" role="navigation">
<div class="ui container">
<div class="dcl navbar-menu">
<div class="ui secondary stackable menu">
<a class="dcl navbar-logo" href="https://decentraland.org">
<i class="dcl logo"></i>
</a>
<div class="item">
<a href="https://market.decentraland.org" class="item">Marketplace</a>
<div class="item submenu">
<div class="ui vertical menu">
<a href="https://market.decentraland.org" class="item">Overview</a>
<a href="https://market.decentraland.org/browse" class="item">Collectibles</a>
<a href="https://market.decentraland.org/lands" class="item">LAND</a>
<a href="https://market.decentraland.org/account" class="item">My Assets</a>
</div>
</div>
</div>
<div class="item">
<a href="https://builder.decentraland.org" class="item">Builder</a>
<div class="item submenu">
<div class="ui vertical menu">
<a href="https://builder.decentraland.org" class="item">Overview</a>
<a href="https://builder.decentraland.org/collections" class="item">Collections</a>
<a href="https://builder.decentraland.org/scenes" class="item">Scenes</a>
<a href="https://builder.decentraland.org/land" class="item">Land</a>
<a href="https://builder.decentraland.org/names" class="item">Names</a>
</div>
</div>
</div>
<div class="item">
<a href="https://docs.decentraland.org" class="active item">Docs</a>
<div class="item submenu">
<div class="ui vertical menu">
<a href="https://docs.decentraland.org/player" class="item">Players</a>
<a href="https://docs.decentraland.org/creator" class="item">Content Creators</a>
<a href="https://docs.decentraland.org/contributor" class="item">Contributors</a>
<a href="https://studios.decentraland.org" class="item">Studios</a>
</div>
</div>
</div>
<div class="item">
<a href="https://places.decentraland.org" class="item">Places</a>
<div class="item submenu">
<div class="ui vertical menu">
<a href="https://places.decentraland.org" class="item">Overview</a>
<a href="https://places.decentraland.org/places" class="item">All Places</a>
<a href="https://docs.decentraland.org/creator/places/faq" class="item">FAQ</a>
</div>
</div>
</div>
<div class="item">
<a href="https://events.decentraland.org" class="item">Events</a>
</div>
<div class="item">
<a href="https://dao.decentraland.org" class="item">DAO</a>
<div class="item submenu">
<div class="ui vertical menu">
<a href="https://dao.decentraland.org" class="item">Overview</a>
<a href="https://governance.decentraland.org" class="item">Governance</a>
<a href="https://governance.decentraland.org/transparency" class="item">Transparency</a>
</div>
</div>
</div>
<div class="item">
<a href="https://decentraland.org/blog" class="item">Blog</a>
</div>
</div>
</div>
</div>
</div>
<!-- Restore menu position as soon as possible to avoid flickering -->
{{ $script := resources.Get "navbar.js" | resources.Minify }} {{ with $script.Content }}
<script>
{{ . | safeJS }}
</script>
{{ end }}