diff --git a/locales/en_US.json b/locales/en_US.json index 936f6e7..0946d15 100644 --- a/locales/en_US.json +++ b/locales/en_US.json @@ -11,6 +11,15 @@ "accountWidget": { "settings": "Settings", "logout": "Logout" + }, + "dropdown": { + "captions": { + "credits": "Meet the team", + "about": "About the project", + "faq": "Frequently asked questions", + "blog": "Our latest updates, condensed", + "progress": "Check the project progress and goals" + } } }, "hero": { diff --git a/public/assets/css/documentation.css b/public/assets/css/documentation.css index 1f001a4..0b3e11a 100644 --- a/public/assets/css/documentation.css +++ b/public/assets/css/documentation.css @@ -23,10 +23,16 @@ button#openSidebar { } .docs-wrapper header { + position: relative; box-sizing: border-box; margin: 20px; margin-left: 0; } +.docs-wrapper header::before { + content: none; + background: none; + pointer-events: none; +} .docs-wrapper header a.logo-link { display: none; } @@ -278,6 +284,7 @@ button#openSidebar { .docs-wrapper header { margin-left: 20px; width: 100%; + left: 0; } .docs-wrapper { @@ -321,12 +328,34 @@ button#openSidebar { } } +@media screen and (max-width: 900px) { + .docs-wrapper header button.dropdown-button#mobile-button { + display: none; + } + .docs-wrapper header .logo-link svg text { + display: block; + } + .docs-wrapper header .logo-link svg { + width: 120px; + } +} + @media screen and (max-width: 820px) { .docs-wrapper .content .quick-links-grid, .platform-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; } + + .docs-wrapper header a.logo-link { + margin-right: 6px; + } +} + +@media screen and (max-width: 576px) { + .docs-wrapper header div.dropdown { + left: calc(-39.876px - 6px - 30px - 40px); + } } @media screen and (max-width: 492px) { diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 02fcfca..c60b039 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -4,7 +4,9 @@ --bg-shade-0: #131733; --bg-shade-1: #1B1F3B; --bg-shade-2: #23274A; + --bg-shade-2-5: #2D3258; --bg-shade-3: #373C65; + --bg-shade-3-5: #404673; --bg-shade-4: #494F81; --accent-shade-0: #673DB6; @@ -65,7 +67,7 @@ body, .main-body { .wrapper { width: 95%; max-width: 1590px; - margin: 0 auto; + margin: 48px auto 0; } h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after { @@ -864,8 +866,8 @@ section.update-signup div.circle { padding: 8px 27px; } .button.secondary.icon-btn { - width: 41px; - height: 41px; + width: 41px !important; + height: 41px !important; } .button.icon-btn svg { min-width: 30px; diff --git a/public/assets/css/partials/header.css b/public/assets/css/partials/header.css index 3d95b73..fbdc397 100644 --- a/public/assets/css/partials/header.css +++ b/public/assets/css/partials/header.css @@ -1,7 +1,53 @@ header { + position: fixed; + top: 0; + left: 2.5%; display: flex; align-items: center; + width: 95%; margin-top: 35px; + z-index: 60; + transition: box-shadow 180ms, background 180ms; +} +header * { + z-index: 1; +} +header::before { + content: ""; + position: absolute; + top: -35px; + left: -10vw; + width: 120vw; + height: calc(100% + 35px + 35px); + background: rgba(27, 31, 59, 0.98); + transition: background 180ms; +} +header.transparent, +header.transparent::before { + background: rgba(27, 31, 59, 0); +} +header.dropdown-active { + background: rgba(27, 31, 59, 0.98); + box-shadow: 0 0 0 600vw rgba(27, 31, 59, 0.8); +} +header .dropdown-arrow { + opacity: 0; + position: absolute; + width: 0; + border-style: solid; + border-color: var(--bg-shade-3) transparent; + border-width: 0 14px 14px; + bottom: -26px; + margin-left: -10px; + margin-bottom: -10px; + transition: left 180ms, margin-bottom 180ms, opacity 180ms; + pointer-events: none; +} + +header.dropdown-active .dropdown-arrow { + opacity: 1; + display: block; + margin-bottom: 0; } header a { text-decoration: none; @@ -10,23 +56,225 @@ header .logo-link, header .logo-link svg { display: block; } -header nav a:first-child { + +header div.left-section { + display: flex; + flex-flow: row nowrap; +} + +header nav { + position: relative; + display: flex; + flex-flow: row nowrap; + align-items: center; margin-left: 40px; } -header nav a { +header button.dropdown-button#mobile-button { + display: none; + background: none; + padding: 0; + margin-right: 12px; + transition: transform 200ms; +} +header button.dropdown-button#mobile-button.active { + transform: rotate(90deg); +} + +header div.dropdown-button-wrapper { + position: relative; + display: flex; + flex-flow: row nowrap; +} +/* these are safezones where the dropdown will not close */ +header div.dropdown-button-wrapper::before { + content: ""; + position: absolute; + top: -16px; + bottom: 100%; + left: 0; + right: -12px; +} +header div.dropdown-button-wrapper::after { + content: ""; + position: absolute; + top: 100%; + bottom: -32px; + left: 0; + right: -12px; +} + +header nav button { + background: none; color: var(--text-shade-1); margin: 0 17px; - text-decoration: none; + padding: 0; } -header nav a:hover { +header nav button:hover, +header nav button.active { + background: none; color: var(--text-shade-3); - transition: color 50ms ease-in-out; +} +header nav a.donate button { + display: grid; + grid-auto-flow: column; + align-items: center; + gap: 4px; + font-weight: bold; + background: #332b61; + color: var(--accent-shade-3); + padding: 2px 12px; + border-radius: 24px; +} +header nav a.donate button svg { + height: 1rem; + width: 1rem; +} +header nav a.donate button:hover { + background: var(--accent-shade-0); + color: #fff; +} +header nav a.donate button.dropdown-button::after { + content: ""; + display: inline-block; + align-items: center; + width: 16px; + height: 8px; + bottom: 0; + margin-left: 0.3rem; + background: no-repeat center url("/assets/images/down-arrow.svg"); + filter: brightness(0) invert(78%) sepia(2%) saturate(5488%) hue-rotate(197deg) + brightness(88%) contrast(93%); + + transition: transform 100ms; +} +header nav button.dropdown-button.active::after { + transform: scaleY(-1); + filter: none; +} + +header div.dropdown { + position: absolute; + top: 100%; + margin-top: 24px; + left: 0; + display: block; + background: var(--bg-shade-3); + border-radius: 8px; + width: 420px; + height: 0; + overflow-y: hidden; + transition: height 180ms; +} +header div.dropdown * { + box-sizing: border-box; +} + +header div.dropdown-content { + position: absolute; + top: 0; + width: 100%; + opacity: 0; + pointer-events: none; + transition: opacity 180ms; +} +header div.dropdown-content.show { + opacity: 1; + pointer-events: auto; +} + +header div.dropdown .top { + padding: 32px 18px; +} +header div.dropdown .top a { + position: relative; + display: grid; + grid-auto-flow: column; + gap: 16px; + justify-content: start; + align-items: center; + color: var(--text-shade-1); + padding: 16px; + border-radius: 8px; +} +header div.dropdown .top a .icon { + background: var(--bg-shade-2); + color: var(--accent-shade-3); + height: 56px; + width: 56px; + border-radius: 8px; +} +header div.dropdown .top a:hover .icon { + background: #151b44; + color: var(--accent-shade-1); +} +header div.dropdown .top a .icon svg { + width: 32px; + height: 32px; + margin: 12px; +} +header div.dropdown .top a .title { + margin: 0; + font-weight: bold; + color: var(--text-shade-3); +} +header div.dropdown .top a .caption { + margin: 0; +} +header div.dropdown .top a:hover { + background: var(--bg-shade-2-5); +} +header div.dropdown .top a:hover::after { + content: ""; + position: absolute; + top: 0; + right: 24px; + width: 24px; + height: 100%; + background: no-repeat center url("/assets/images/arrow-right.svg"); + /* garbage to make it look the same color */ + filter: brightness(0) invert(60%) sepia(70%) saturate(453%) hue-rotate(208deg) + brightness(113%) contrast(97%); +} +header div.dropdown .top a:hover .title { + color: var(--accent-shade-3); +} + +header div.dropdown .bottom { + display: grid; + grid-auto-flow: column; + justify-content: center; + gap: 24px; + background: var(--bg-shade-3-5); + padding: 22px; + width: 100%; + box-sizing: border-box; +} +header div.dropdown .bottom a { + width: 48px; + height: 48px; + background: var(--bg-shade-3); + color: var(--text-shade-3); + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} +header div.dropdown .bottom a:hover { + background: var(--bg-shade-2); +} +header div.dropdown .bottom a svg { + width: 24px; + height: auto; +} + +header div.dropdown .top a.show-on-mobile { + display: none; } header .right-section { display: grid; grid-auto-flow: column; - grid-gap: 24px; + gap: 24px; margin-left: auto; z-index: 2; color: var(--text-shade-1); @@ -46,12 +294,14 @@ header .locale-dropdown-toggle.active { } header .user-widget-wrapper { - height: 24px; + height: auto; } header .user-widget-wrapper a.login-link { color: var(--text-shade-1); text-decoration: none; + display: block; + height: 32px; transition: color 150ms; } header .user-widget-wrapper a.login-link:hover { @@ -128,16 +378,83 @@ header .user-widget .button.logout { } @media screen and (max-width: 900px) { - header nav a:not(.keep-on-mobile) { - display: none; + header { + position: relative; + justify-content: flex-end; + width: 90%; + left: 5%; } - header .logo-link { - margin-right: 20px; + header .hide-on-mobile { + display: none !important; + } + header button.dropdown-button#mobile-button { + display: block; + } + header .left-section { + margin-right: auto; + } + header .right-section { + margin-left: 24px; + } + header nav a.donate button { + margin: 0; + } + + header div.dropdown { + left: unset; + right: -104px; + width: 90vw; + } + header div.dropdown .top { + display: grid; + grid-template-columns: 1fr 1fr; } } -@media screen and (max-width: 480px) { +@media screen and (max-width: 600px) { + header div.dropdown .top { + grid-template-columns: 1fr; + } + header div.dropdown .top { + padding: 16px 9px; + } +} + +@media screen and (max-width: 500px) { + header nav a.donate button span { + display: none; + } + header nav a.donate button { + padding: 6px; + } +} + +@media screen and (max-width: 420px) { + header nav a.donate button { + display: none; + } + header .right-section { + margin-left: 0; + } + header div.dropdown { + right: -80px; + } + header div.dropdown .top a { + padding: 8px; + } + header div.dropdown .top a .icon { + height: 40px; + width: 40px; + } + header div.dropdown .top a .icon svg { + width: 24px; + height: 24px; + margin: 8px; + } +} + +@media screen and (max-width: 330px) { header .logo-link svg text { display: none; } @@ -147,9 +464,6 @@ header .user-widget .button.logout { } header .logo-link { - margin-right: 10px; - } - header nav a { - margin: 0 10px; + margin-right: 6px; } } diff --git a/public/assets/images/arrow-right.svg b/public/assets/images/arrow-right.svg new file mode 100644 index 0000000..88abada --- /dev/null +++ b/public/assets/images/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/js/header-handler.js b/public/assets/js/header-handler.js index 4acbbfc..5bccda6 100644 --- a/public/assets/js/header-handler.js +++ b/public/assets/js/header-handler.js @@ -1,5 +1,118 @@ /* eslint-disable no-undef, no-unused-vars */ +const header = document.querySelector('header'); +const dropdownButtonWrapper = document.querySelector('.dropdown-button-wrapper'); +const dropdown = document.querySelector('header div.dropdown'); +const allDropdownButtons = document.querySelectorAll('button.dropdown-button'); +const desktopDropdownBtns = document.querySelectorAll('header .dropdown-button-wrapper button.dropdown-button'); +const mobileDropdownBtn = document.querySelector('.dropdown-button#mobile-button'); +let dropdownContent; + +function isDropdownOpen() { + return header.classList.contains('dropdown-active'); +} + +function closeDropdown() { + dropdown.style.height = '0'; + header.classList.remove('dropdown-active'); + // deselect all buttons + allDropdownButtons.forEach((button) => { + button.classList.remove('active'); + }); +} +window.addEventListener('resize', () => { + if (isDropdownOpen() && dropdownContent) { + // set the dropdown height to the height of the content + dropdown.style.height = `${dropdownContent.offsetHeight}px`; + } +}); + +function navbarDropdownHandler(buttonID) { + const allDropdownContents = dropdown.querySelectorAll('div.dropdown-content'); + dropdownContent = document.querySelector(`.dropdown-content#${buttonID}-dropdown-content`); + const dropdownButton = document.querySelector(`button.dropdown-button#${buttonID}-button`); + const dropdownArrow = document.querySelector('.dropdown-arrow#navbar-dropdown-arrow'); + + // if on mobile, reclicking the button should close the dropdown + if (buttonID === 'mobile' && dropdownButton.classList.contains('active')) { + closeDropdown(); + return; + } + + // hide all contents + allDropdownContents.forEach((content) => { + content.classList.remove('show'); + }); + // deselect all buttons + allDropdownButtons.forEach((button) => { + button.classList.remove('active'); + }); + // show the content of the clicked button + dropdownContent.classList.add('show'); + // select the clicked button + dropdownButton.classList.add('active'); + // set the dropdown height to the height of the content + dropdown.style.height = `${dropdownContent.offsetHeight}px`; + + // move the arrow to the selected button + dropdownArrow.style.left = `${dropdownButton.offsetLeft + dropdownButton.offsetWidth / 2 - 5}px`; + + // dim the rest of the page + header.classList.add('dropdown-active'); +} + +const dropdownAnchors = document.querySelectorAll('.dropdown-content a'); +dropdownAnchors.forEach((a) => { + a.addEventListener('click', () => { + closeDropdown(); + }); +}); + + +// make the header background transparent if near the top of the page +function makeHeaderBackgroundTransparent() { + if(window.pageYOffset < 100) { + header.classList.add('transparent'); + } else { + header.classList.remove('transparent'); + } +} +makeHeaderBackgroundTransparent(); +window.addEventListener('scroll', () => { + makeHeaderBackgroundTransparent(); +}); + +desktopDropdownBtns.forEach((btn) => { + [ 'click', 'mouseover' ].forEach((event) => { + btn.addEventListener(event, () => { + const id = btn.id.replace('-button', ''); + navbarDropdownHandler(id); + }); + }); +}); +mobileDropdownBtn.addEventListener('click', () => { + const id = 'mobile'; + navbarDropdownHandler(id, true); +}); + +/* if on desktop: we check if the element the mouse moves to is part of the ignored element (keep the dropdown open) or not (close the dropdown) + * if on mobile: do nothing +*/ +function dropdownOnMouseLeave(e, ignoredElement) { + if (window.innerWidth > 900) { + const targetElement = e.relatedTarget || e.toElement; + if (targetElement !== ignoredElement && !ignoredElement.contains(targetElement)) { + closeDropdown(); + } + } +} +dropdownButtonWrapper.addEventListener('mouseleave', (e) => { + dropdownOnMouseLeave(e, dropdown); +}); +dropdown.addEventListener('mouseleave', (e) => { + dropdownOnMouseLeave(e, dropdownButtonWrapper); +}); + // Account widget handler const userWidgetToggle = document.querySelector('.user-widget-toggle') ; const userWidget = document.querySelector('.user-widget'); diff --git a/views/account/account.handlebars b/views/account/account.handlebars index 230d70c..0e629c6 100644 --- a/views/account/account.handlebars +++ b/views/account/account.handlebars @@ -1,8 +1,8 @@ -
+{{> header}} - {{> header}} +