diff --git a/public/css/styling.css b/public/css/styling.css index cfa67f3af..6e28cd61e 100755 --- a/public/css/styling.css +++ b/public/css/styling.css @@ -299,3 +299,332 @@ footer a:hover { .bg-type { background-color: #c4c4c4; } + +.dropdown-menu.show { + border-radius: 8px; +} + +.dropdown-toggle:after { + content: none; +} + +/***************/ +/* Page header */ +/***************/ + + +.tools-menu { + display:none; +} + +.search-settings { + display:none; +} + +.page-header { + padding: 20px 30px; + background-color: rgb(94, 1, 38); + display: flex; + justify-content: space-between; + align-items: center; + height: 60px; + max-height: 90px; + } + + .page-header-logo-without-text { + display: none; + } + + .page-header-logo-with-text { + display: block; + } + + .page-header-menu-container { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 3; + } + .page-header-menu-container.visible { + display: block; + } + + .page-header-social-media-icons { + display: none; + } + + .page-header-menu-icon { + background: transparent; + border: none; + } + .page-header-menu-icon.hidden { + visibility: hidden; + } + + .page-header-menu-page-cover { + position: fixed; + top: 0px; + right: 0px; + width: 100%; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + z-index: 3; + display: none; + } + + .page-header-menu-nav { + background-color: rgb(94, 1, 38); + position: absolute; + top: 60px; + right: 0px; + width: 100vw; + display: flex; + flex-direction: column; + padding-bottom: 40px; + align-items: flex-start; + z-index: 4; + } + + .page-header-menu-list { + display: none; + /* padding: 30px 30px 50px; + display: flex; + flex-direction: column; + align-items: flex-start; + list-style-type: none; */ + } + + .page-header-menu-list-item { + margin-bottom: 10px; + } + + .page-header-menu-list-item .page-header-menu-list-item-title { + font-size: 32px; + text-transform: uppercase; + color: rgb(214, 181, 109); + line-height: 1; + font-weight: 300; + } + .page-header-menu-list-item a { + transition: opacity 200ms ease-in; + } + .page-header-menu-list-item a:hover { + text-decoration: none; + } + .page-header-menu-list-item div.page-header-menu-list-item-title { + display: flex; + align-items: center; + line-height: normal; + cursor: pointer; + user-select: none; + } + .page-header-menu-list-item div.page-header-menu-list-item-title button { + background: transparent; + border: none; + display: flex; + align-items: center; + margin-left: 10px; + padding: 0; + } + + .page-header-menu-sub-list { + list-style-type: none; + margin: 10px 0; + padding-left: 0; + display: none; + } + + .page-header-menu-sub-list.visible { + display: block; + } + + .page-header-menu-sub-list .page-header-menu-sub-list-item { + margin-top: 10px; + } + + .page-header-menu-sub-list .page-header-menu-sub-list-item a { + color: #fff; + font-size: 16px; + line-height: 1; + } + + .page-header-menu-close { + position: fixed; + z-index: 5; + right: 35px; + top: 5px; + cursor: pointer; + } + + .page-header-social-media-icons-container { + display: flex; + justify-content: center; + padding-top: 10px; + width: 100%; + } + + .page-header-social-media-icons { + grid-template-columns: repeat(8, 25px); + gap: 10px; + } + + .page-header-social-media-icons-container .page-header-social-media-icons { + display: grid; + } + + .dropdown-mobile { + position: relative !important; + transform: inherit !important; + min-width: 19rem; + margin-top: 20px; + line-height: 2.2; +} + +.tools-mobile { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + margin-bottom: 30px; + flex-direction: column +} + +.site-title-mobile { + width: 100%; + text-align: center; + margin-bottom: 20px; +} + +.search-settings-mobile { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 20px +} + + @media (min-width: 992px) { + .page-header { + padding: 20px; + } + } + + @media (min-width: 768px) { + + .search-settings { + display: inherit; + } + + .tools-menu { + display: flex; + align-items: center; + } + .page-header-logo-without-text { + display: block; + } + + .page-header-logo-with-text { + display: none; + } + + .page-header-social-media-icons { + display: grid; + } + + .page-header-social-media-icons-container .page-header-social-media-icons { + display: none; + } + + .page-header-menu-page-cover { + display: block; + } + + .page-header-menu-nav { + position: fixed; + width: 420px; + height: 100%; + top: 0; + bottom: 0px; + overflow-y: scroll; + align-items: center; + } + + .page-header-menu-list { + display: flex; + flex-direction: column; + align-items: flex-start; + list-style-type: none; + padding: 140px 80px 120px; + } + + .page-header-menu-list-item { + margin-bottom: 20px; + } + + .page-header-menu-list-item .page-header-menu-list-item-title { + font-weight: 300; + } + + .page-header-menu-sub-list { + margin: 0; + } + + .page-header-menu-close { + right: 25px; + } + + .tools-mobile { + display: none; + } + + .search-settings-mobile { + display: none; + } + + .site-title-mobile { + display: none; + } + } +.hide { + display: none; +} + +.show { + display: inline-block; +} +input.search { + border-color: white; + border-top-left-radius: 8px !important; + border-bottom-left-radius: 8px !important; + height: 34px; +} + +button.search { + background: white; + border: none; + border-top-right-radius: 8px !important; + border-bottom-right-radius: 8px !important; +} + +div.tools-container { + border: 2px solid #FFFFFF; + border-radius: 13px; + padding: 4px 10px; + color: white +} +div.tools-container-mobile { + border: 2px solid #FFFFFF; + border-radius: 13px; + padding: 4px 10px; + color: white; + margin-right: 24px; +} + +span.site-title { + color: white; + font-size:24px; + font-weight: 300; + padding-right: 10px; +} diff --git a/public/img/arrow-down-yellow.png b/public/img/arrow-down-yellow.png new file mode 100644 index 000000000..af633d164 Binary files /dev/null and b/public/img/arrow-down-yellow.png differ diff --git a/public/img/arrow-down.png b/public/img/arrow-down.png new file mode 100644 index 000000000..1013ec857 Binary files /dev/null and b/public/img/arrow-down.png differ diff --git a/public/img/arrow-up-yellow.png b/public/img/arrow-up-yellow.png new file mode 100644 index 000000000..5c57d67d7 Binary files /dev/null and b/public/img/arrow-up-yellow.png differ diff --git a/public/img/arrow-up.png b/public/img/arrow-up.png new file mode 100644 index 000000000..5afa50670 Binary files /dev/null and b/public/img/arrow-up.png differ diff --git a/public/img/header/btcv-logo-with-text.svg b/public/img/header/btcv-logo-with-text.svg new file mode 100644 index 000000000..e744ecb18 --- /dev/null +++ b/public/img/header/btcv-logo-with-text.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/img/header/btcv-logo.svg b/public/img/header/btcv-logo.svg new file mode 100644 index 000000000..aa987f599 --- /dev/null +++ b/public/img/header/btcv-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/header/chevron-up.svg b/public/img/header/chevron-up.svg new file mode 100644 index 000000000..115bff7c2 --- /dev/null +++ b/public/img/header/chevron-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/explorer.svg b/public/img/header/explorer.svg new file mode 100644 index 000000000..701378f23 --- /dev/null +++ b/public/img/header/explorer.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/facebook.svg b/public/img/header/facebook.svg new file mode 100644 index 000000000..c88edf486 --- /dev/null +++ b/public/img/header/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/github.svg b/public/img/header/github.svg new file mode 100644 index 000000000..9a812b627 --- /dev/null +++ b/public/img/header/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/instagram.svg b/public/img/header/instagram.svg new file mode 100644 index 000000000..9c3b81edd --- /dev/null +++ b/public/img/header/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/medium.svg b/public/img/header/medium.svg new file mode 100644 index 000000000..17646067a --- /dev/null +++ b/public/img/header/medium.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/img/header/menu-close.svg b/public/img/header/menu-close.svg new file mode 100644 index 000000000..c09ca7f4f --- /dev/null +++ b/public/img/header/menu-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/img/header/menu-hamburger.svg b/public/img/header/menu-hamburger.svg new file mode 100644 index 000000000..91bf01731 --- /dev/null +++ b/public/img/header/menu-hamburger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/img/header/telegram.svg b/public/img/header/telegram.svg new file mode 100644 index 000000000..3486edb46 --- /dev/null +++ b/public/img/header/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/twitter.svg b/public/img/header/twitter.svg new file mode 100644 index 000000000..1f0d9dbc8 --- /dev/null +++ b/public/img/header/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/header/youtube.svg b/public/img/header/youtube.svg new file mode 100644 index 000000000..d7e47df36 --- /dev/null +++ b/public/img/header/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/settings-off.png b/public/img/settings-off.png new file mode 100644 index 000000000..aafa6d2c4 Binary files /dev/null and b/public/img/settings-off.png differ diff --git a/public/img/settings-on.svg b/public/img/settings-on.svg new file mode 100644 index 000000000..67a0a6faa --- /dev/null +++ b/public/img/settings-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/views/includes/header.pug b/views/includes/header.pug new file mode 100644 index 000000000..2b2350788 --- /dev/null +++ b/views/includes/header.pug @@ -0,0 +1,266 @@ +header.page-header + a.page-header-logo + img.page-header-logo-without-text(src="/img/header/btcv-logo.svg" alt="logo") + img.page-header-logo-with-text(src="/img/header/btcv-logo-with-text.svg" alt="logo") + div(class="tools-menu") + span(class="site-title") #{coinConfig.siteTitle} + if (client) + ul(class="navbar-nav") + if (config.siteTools) + li(class="nav-item dropdown") + a(class="nav-link dropdown-toggle", href="javascript:void(0)", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") + div(class="tools-container") + span TOOLS + img(src="/img/arrow-down.png", style="margin-left: 7px;" class="arrow-down show") + img(src="/img/arrow-up.png", style="margin-left: 7px;" class="arrow-up hide") + div(class="dropdown-menu shadow", aria-label="Tools Items") + each item in config.siteTools + a(class="dropdown-item", href=item.url) + i(class=item.fontawesome, style="width: 20px; margin-right: 10px;") + span #{item.name} + + if (config.site.header.dropdowns) + each dropdown, ddIndex in config.site.header.dropdowns + li(class="nav-item dropdown") + a(class="nav-link dropdown-toggle", href="javascript:void(0)", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") + span #{dropdown.title} + div(class="dropdown-menu shadow", aria-label=(dropdown.title + " Items", style="border-radius: 8px;")) + each dropdownLink in dropdown.links + a(class="dropdown-item", href=dropdownLink.url) + if (dropdownLink.imgUrl) + img(src=dropdownLink.imgUrl, style="width: 24px; height: 24px; margin-right: 8px;", alt=dropdownLink.name) + span #{dropdownLink.name} + + aside.page-header-social-media-icons + a(href="https://twitter.com/vaultbitcoin" target="_blank" rel="noopener noreferrer") + img(src="/img/header/twitter.svg" alt="twitter") + a(href="https://t.me/Bitcoin_Vault" target="_blank" rel="noopener noreferrer") + img(src="/img/header/telegram.svg" alt="telegram") + a(href="https://medium.com/bitcoin-vault-btcv" target="_blank" rel="noopener noreferrer") + img(src="/img/header/medium.svg" alt="medium") + a(href="https://www.facebook.com/bitcoinvaultofficial" target="_blank" rel="noopener noreferrer") + img(src="/img/header/facebook.svg" alt="facebook") + a(href="https://www.instagram.com/bitcoinvaultofficial" target="_blank" rel="noopener noreferrer") + img(src="/img/header/instagram.svg" alt="instagram") + a(href="https://www.youtube.com/c/BitcoinVault" target="_blank" rel="noopener noreferrer") + img(src="/img/header/youtube.svg" alt="youtube") + a(href="/bitcoinvault" target="_blank" rel="noopener noreferrer") + img(src="/img/header/github.svg" alt="github") + a(href="https://explorer.bitcoinvault.global" target="_blank" rel="noopener noreferrer") + img(src="/img/header/explorer.svg" alt="explorer") + div(class="search-settings") + form(method="post", action="/search", class="form-inline mr-3") + input(type="hidden", name="_csrf", value=csrfToken) + div(class="input-group input-group-sm") + input(type="text", class="form-control form-control-sm search", name="query", placeholder="block height/hash, txid, address", value=(query)) + div(class="input-group-append") + button(type="submit", class="btn btn-primary search") + i(class="fas fa-search" style="color: #D6B56D") + + ul(class="navbar-nav") + li(class="nav-item dropdown") + a(class="nav-link dropdown-toggle", href="javascript:void(0)", id="navbarDropdown", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") + div(class="settings-container") + img(src="/img/settings-on.svg" alt="explorer" class="arrow-up hide") + img(src="/img/settings-off.png" alt="explorer" class="arrow-down show") + img(src="/img/arrow-down-yellow.png", style="margin-left: 5px;" class="arrow-down show") + img(src="/img/arrow-up-yellow.png", style="margin-left: 5px;" class="arrow-up hide") + div(class="dropdown-menu dropdown-menu-right shadow", aria-labelledby="navbarDropdown") + if (coinConfig.currencyUnits) + span(class="dropdown-header") Currency Units + each item in coinConfig.currencyUnits + if (item.type == "native" || (config.queryExchangeRates && !config.privacyMode)) + a(class="dropdown-item", href=("/changeSetting?name=currencyFormatType&value=" + item.values[0])) + each valueName in item.values + if (currencyFormatType == valueName) + i(class="fas fa-check", style="color: #5E0126;") + span #{item.name} + + span(class="dropdown-header") Theme + a(class="dropdown-item", href="/changeSetting?name=uiTheme&value=light") + if (session.uiTheme == "light" || session.uiTheme == "") + i(class="fas fa-check", , style="color: #5E0126;") + span Light + a(class="dropdown-item", href="/changeSetting?name=uiTheme&value=dark") + if (session.uiTheme == "dark") + i(class="fas fa-check", style="color: #5E0126;") + span Dark + + button.page-header-menu-icon(type="button") + img(src="/img/header/menu-hamburger.svg" alt="menu hamburger icon") + + div.page-header-menu-container + div.page-header-menu-page-cover + + img.page-header-menu-close(src="/img/header/menu-close.svg" alt="menu close icon") + + nav.page-header-menu-nav + span(class="site-title site-title-mobile") #{coinConfig.siteTitle} + div(class="tools-mobile") + if (client) + if (config.siteTools) + div(style="display: flex; align-items: center") + div(class="tools-container-mobile") + span TOOLS + img(src="/img/arrow-down.png", style="margin-left: 7px;" class="arrow-down show") + img(src="/img/arrow-up.png", style="margin-left: 7px;" class="arrow-up hide") + div(class="settings-container-mobile") + img(src="/img/settings-on.svg" alt="explorer" class="arrow-up hide") + img(src="/img/settings-off.png" alt="explorer" class="arrow-down show") + img(src="/img/arrow-down-yellow.png", style="margin-left: 5px;" class="arrow-down show") + img(src="/img/arrow-up-yellow.png", style="margin-left: 5px;" class="arrow-up hide") + + div(class="dropdown-menu dropdown-mobile tools-menu-mobile", aria-label="Tools Items") + each item in config.siteTools + a(class="dropdown-item", href=item.url) + i(class=item.fontawesome, style="width: 20px; margin-right: 10px;") + span #{item.name} + + ul(class="navbar-nav") + li(class="nav-item dropdown") + div(class="dropdown-menu dropdown-mobile settings-menu-mobile", aria-labelledby="navbarDropdown") + if (coinConfig.currencyUnits) + span(class="dropdown-header") Currency Units + each item in coinConfig.currencyUnits + if (item.type == "native" || (config.queryExchangeRates && !config.privacyMode)) + a(class="dropdown-item", href=("/changeSetting?name=currencyFormatType&value=" + item.values[0])) + each valueName in item.values + if (currencyFormatType == valueName) + i(class="fas fa-check", style="color: #5E0126;") + span #{item.name} + + span(class="dropdown-header") Theme + a(class="dropdown-item", href="/changeSetting?name=uiTheme&value=light") + if (session.uiTheme == "light" || session.uiTheme == "") + i(class="fas fa-check", , style="color: #5E0126;") + span Light + a(class="dropdown-item", href="/changeSetting?name=uiTheme&value=dark") + if (session.uiTheme == "dark") + i(class="fas fa-check", style="color: #5E0126;") + span Dark + + div(class="search-settings-mobile") + form(method="post", action="/search", class="form-inline", style="width: 80%") + input(type="hidden", name="_csrf", value=csrfToken) + div(class="input-group input-group-sm") + input(type="text", style="height: 40px;" class="form-control form-control-sm search", name="query", placeholder="block height/hash, txid, address", value=(query)) + div(class="input-group-append") + button(type="submit", class="btn btn-primary search") + i(class="fas fa-search" style="color: #D6B56D; margin-right: 5px;") + + div.page-header-social-media-icons-container + aside.page-header-social-media-icons + a(href="https://twitter.com/vaultbitcoin" target="_blank" rel="noopener noreferrer") + img(src="/img/header/twitter.svg" alt="twitter") + a(href="https://t.me/Bitcoin_Vault" target="_blank" rel="noopener noreferrer") + img(src="/img/header/telegram.svg" alt="telegram") + a(href="https://medium.com/bitcoin-vault-btcv" target="_blank" rel="noopener noreferrer") + img(src="/img/header/medium.svg" alt="medium") + a(href="https://www.facebook.com/bitcoinvaultofficial" target="_blank" rel="noopener noreferrer") + img(src="/img/header/facebook.svg" alt="facebook") + a(href="https://www.instagram.com/bitcoinvaultofficial" target="_blank" rel="noopener noreferrer") + img(src="/img/header/instagram.svg" alt="instagram") + a(href="https://www.youtube.com/c/BitcoinVault" target="_blank" rel="noopener noreferrer") + img(src="/img/header/youtube.svg" alt="youtube") + a(href="/bitcoinvault" target="_blank" rel="noopener noreferrer") + img(src="/img/header/github.svg" alt="github") + a(href="https://explorer.bitcoinvault.global" target="_blank" rel="noopener noreferrer") + img(src="/img/header/explorer.svg" alt="explorer") + + ul.page-header-menu-list + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global") Home + li.page-header-menu-list-item + div.page-header-menu-list-item-title Development + button(type="button") + img(src="/img/header/chevron-up.svg" alt="chevron icon") + + ul.page-header-menu-sub-list + li.page-header-menu-sub-list-item + a(href="https://bitcoinvault.global/btcv-explained") BTCV Explained + li.page-header-menu-sub-list-item + a(href="https://bitcoinvault.global/whitepaper") Whitepaper + li.page-header-menu-sub-list-item + a(href="https://bitcoinvault.global/roadmap") Roadmap + li.page-header-menu-sub-list-item + a(href="https://bitcoinvault.global/faq") FAQ + + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global/features") Features + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global/ecosystem") Ecosystem + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global/tutorials") Education + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global/community") Community + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global/team-behind") Team Behind + li.page-header-menu-list-item + a.page-header-menu-list-item-title(href="https://bitcoinvault.global/contact") Contact + +script. + var hideMenuCointainer = () => { + document.querySelector('.page-header-menu-container').classList.remove('visible'); + document.querySelector('.page-header-menu-icon').classList.remove('hidden'); + }; + var hideArrow = (name) => { + var elementUp = document.querySelector(name + ' > .arrow-up').classList[1] + if (elementUp === 'hide') { + document.querySelector(name + ' > .arrow-down').classList.add('hide') + document.querySelector(name + ' > .arrow-down').classList.remove('show') + document.querySelector(name + ' > .arrow-up').classList.add('show') + document.querySelector(name + ' > .arrow-up').classList.remove('hide') + } else { + document.querySelector(name + ' > .arrow-down').classList.add('show') + document.querySelector(name + ' > .arrow-down').classList.remove('hide') + document.querySelector(name + ' > .arrow-up').classList.add('hide') + document.querySelector(name + ' > .arrow-up').classList.remove('show') + } + }; + + document.querySelector('.page-header-menu-icon').addEventListener('click', (e) => { + document.querySelector('.page-header-menu-container').classList.add('visible'); + document.querySelector('.page-header-menu-icon').classList.add('hidden'); + }); + + document.querySelector('.page-header-menu-close').addEventListener('click', hideMenuCointainer); + document.querySelector('.page-header-menu-close').addEventListener('click', hideMenuCointainer); + + document.querySelector('.dropdown-toggle').addEventListener('click', () => { + hideArrow('.tools-container') + }); + document.querySelector('.tools-container-mobile').addEventListener('click', () => { + hideArrow('.tools-container-mobile'); + }); + document.querySelector('.settings-container').addEventListener('click', () => { + hideArrow('.settings-container'); + }); + document.querySelector('.settings-container-mobile').addEventListener('click', () => { + hideArrow('.settings-container-mobile'); + }); + + document.querySelector('.page-header-menu-list-item div.page-header-menu-list-item-title').addEventListener('click', () => { + document.querySelector('.page-header-menu-sub-list').classList.toggle('visible'); + }); + + var toggleMenu = (name) => { + var status = document.querySelector(name).style.display; + + if (status === 'block') { + document.querySelector(name).style.display='none'; + document.querySelector('.search-settings-mobile').style.display='flex'; + document.querySelector('.page-header-social-media-icons-container').style.display='flex'; + } else { + document.querySelector(name).style.display='block'; + document.querySelector('.search-settings-mobile').style.display='none'; + document.querySelector('.page-header-social-media-icons-container').style.display='none'; + } + } + + document.querySelector('.tools-container-mobile').addEventListener('click', () => { + toggleMenu('.tools-menu-mobile') + }); + document.querySelector('.settings-container-mobile').addEventListener('click', () => { + toggleMenu('.settings-menu-mobile') + }); + diff --git a/views/layout.pug b/views/layout.pug index 43de80d99..391a2ba7f 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -25,84 +25,7 @@ html(lang="en") title Explorer body(class="bg-dark") - nav(class="navbar navbar-expand-lg navbar-dark bg-dark") - div(class="container") - a(class="navbar-brand", href="/") - span - if (coinConfig.logoUrl) - img(src=coinConfig.logoUrl, class="header-image", alt="logo") - span #{coinConfig.siteTitle} - - button(type="button", class="navbar-toggler navbar-toggler-right", data-toggle="collapse", data-target="#navbarNav", aria-label="collapse navigation") - span(class="navbar-toggler-icon") - - div(class="collapse navbar-collapse", id="navbarNav") - if (client) - ul(class="navbar-nav mr-auto") - - if (config.siteTools) - li(class="nav-item dropdown") - a(class="nav-link dropdown-toggle", href="javascript:void(0)", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") - span Tools - div(class="dropdown-menu shadow", aria-label="Tools Items") - each item in config.siteTools - a(class="dropdown-item", href=item.url) - i(class=item.fontawesome, style="width: 20px; margin-right: 10px;") - span #{item.name} - - if (config.site.header.dropdowns) - each dropdown, ddIndex in config.site.header.dropdowns - li(class="nav-item dropdown") - a(class="nav-link dropdown-toggle", href="javascript:void(0)", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") - span #{dropdown.title} - div(class="dropdown-menu shadow", aria-label=(dropdown.title + " Items")) - each dropdownLink in dropdown.links - a(class="dropdown-item", href=dropdownLink.url) - if (dropdownLink.imgUrl) - img(src=dropdownLink.imgUrl, style="width: 24px; height: 24px; margin-right: 8px;", alt=dropdownLink.name) - span #{dropdownLink.name} - - - form(method="post", action="/search", class="form-inline mr-3") - input(type="hidden", name="_csrf", value=csrfToken) - div(class="input-group input-group-sm") - input(type="text", class="form-control form-control-sm", name="query", placeholder="block height/hash, txid, address", value=(query)) - div(class="input-group-append") - button(type="submit", class="btn btn-primary") - i(class="fas fa-search") - - ul(class="navbar-nav") - li(class="nav-item dropdown") - a(class="nav-link dropdown-toggle", href="javascript:void(0)", id="navbarDropdown", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") - i(class="fas fa-cog mr-1") - div(class="dropdown-menu dropdown-menu-right shadow", aria-labelledby="navbarDropdown") - if (coinConfig.currencyUnits) - span(class="dropdown-header") Currency Units - each item in coinConfig.currencyUnits - if (item.type == "native" || (config.queryExchangeRates && !config.privacyMode)) - a(class="dropdown-item", href=("/changeSetting?name=currencyFormatType&value=" + item.values[0])) - each valueName in item.values - if (currencyFormatType == valueName) - i(class="fas fa-check") - span #{item.name} - - span(class="dropdown-header") Theme - a(class="dropdown-item", href="/changeSetting?name=uiTheme&value=light") - if (session.uiTheme == "light" || session.uiTheme == "") - i(class="fas fa-check") - span Light - a(class="dropdown-item", href="/changeSetting?name=uiTheme&value=dark") - if (session.uiTheme == "dark") - i(class="fas fa-check") - span Dark - - if (host && port && !homepage && config.site.header.showToolsSubheader) - div(id="sub-menu", class="container mb-2 pt-2 d-lg-block d-none border-top", style="") - ul(class="nav") - each item, index in config.siteTools - li(class="nav-item") - a(href=item.url, class="nav-link text-white px-2 text-decoration-underline") - span #{item.name} + include includes/header.pug - var bodyBgColor = "#ffffff;"; if (session.uiTheme && session.uiTheme === "dark")