From de4ae49dd98fc842c29e1ced6876d65a60ab7312 Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Tue, 9 May 2023 16:20:05 -0300 Subject: [PATCH 1/4] feat: Move navbar to a template file --- layouts/_default/baseof.html | 19 +-------- layouts/partials/docs/navbar.html | 71 +++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 18 deletions(-) create mode 100644 layouts/partials/docs/navbar.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c0e72b0..824739a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,24 +7,7 @@ - + {{ partial "docs/navbar" . }} {{ if .IsHome }}
diff --git a/layouts/partials/docs/navbar.html b/layouts/partials/docs/navbar.html new file mode 100644 index 0000000..6e86b2b --- /dev/null +++ b/layouts/partials/docs/navbar.html @@ -0,0 +1,71 @@ + From 610fbee1b6e9c390e2f924f13e4af3ae3740e561 Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Wed, 10 May 2023 12:50:35 -0300 Subject: [PATCH 2/4] feat: Update navbar styles --- assets/_dcl-ui.scss | 104 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 101 insertions(+), 3 deletions(-) diff --git a/assets/_dcl-ui.scss b/assets/_dcl-ui.scss index 3e2552d..e4f3467 100644 --- a/assets/_dcl-ui.scss +++ b/assets/_dcl-ui.scss @@ -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 .item .item.submenu.active { + 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); } } From 354a4f038b741c6541463070cacad4f3a23e8ebf Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Wed, 10 May 2023 12:51:08 -0300 Subject: [PATCH 3/4] feat: Add navbar submenu toggle and tracking --- assets/navbar.js | 28 ++++++++++++++++++++++++++++ layouts/partials/docs/navbar.html | 7 +++++++ 2 files changed, 35 insertions(+) create mode 100644 assets/navbar.js diff --git a/assets/navbar.js b/assets/navbar.js new file mode 100644 index 0000000..d33c056 --- /dev/null +++ b/assets/navbar.js @@ -0,0 +1,28 @@ +;(function () { + var navbarItems = document.querySelectorAll('.dcl.navbar .dcl.navbar-menu .ui.menu > div.item') + navbarItems.forEach((menuItem) => { + menuItem.addEventListener('mouseenter', function (event) { + var submenu = event.target.querySelector('.item.submenu') + if (submenu) { + submenu.classList.add('active') + } + }) + menuItem.addEventListener('mouseleave', function (event) { + var submenu = event.target.querySelector('.item.submenu') + if (submenu && submenu.classList.contains('active')) { + submenu.classList.remove('active') + } + }) + 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, + }) + } + }) + }) + }) +})() diff --git a/layouts/partials/docs/navbar.html b/layouts/partials/docs/navbar.html index 6e86b2b..6c5b400 100644 --- a/layouts/partials/docs/navbar.html +++ b/layouts/partials/docs/navbar.html @@ -69,3 +69,10 @@ + + +{{ $script := resources.Get "navbar.js" | resources.Minify }} {{ with $script.Content }} + +{{ end }} From 86b3724b2de5a9579bc1df9367cc6b6109e26833 Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Wed, 10 May 2023 13:06:57 -0300 Subject: [PATCH 4/4] refactor: Hover logic from js to css --- assets/_dcl-ui.scss | 2 +- assets/navbar.js | 12 ------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/assets/_dcl-ui.scss b/assets/_dcl-ui.scss index e4f3467..ddc92d9 100644 --- a/assets/_dcl-ui.scss +++ b/assets/_dcl-ui.scss @@ -2694,7 +2694,7 @@ a.ui.card:hover, z-index: 0; } -.dcl.navbar .ui.menu .item .item.submenu.active { +.dcl.navbar .ui.menu > div.item:hover .item.submenu { display: block; } diff --git a/assets/navbar.js b/assets/navbar.js index d33c056..e37d568 100644 --- a/assets/navbar.js +++ b/assets/navbar.js @@ -1,18 +1,6 @@ ;(function () { var navbarItems = document.querySelectorAll('.dcl.navbar .dcl.navbar-menu .ui.menu > div.item') navbarItems.forEach((menuItem) => { - menuItem.addEventListener('mouseenter', function (event) { - var submenu = event.target.querySelector('.item.submenu') - if (submenu) { - submenu.classList.add('active') - } - }) - menuItem.addEventListener('mouseleave', function (event) { - var submenu = event.target.querySelector('.item.submenu') - if (submenu && submenu.classList.contains('active')) { - submenu.classList.remove('active') - } - }) menuItem.querySelectorAll('a.item').forEach((link) => { var parent = menuItem.querySelector('a.item') link.addEventListener('click', function (event) {