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..c7c728f 100644 --- a/public/assets/css/documentation.css +++ b/public/assets/css/documentation.css @@ -23,6 +23,7 @@ button#openSidebar { } .docs-wrapper header { + position: relative; box-sizing: border-box; margin: 20px; margin-left: 0; @@ -278,6 +279,7 @@ button#openSidebar { .docs-wrapper header { margin-left: 20px; width: 100%; + left: 0; } .docs-wrapper { @@ -327,6 +329,16 @@ button#openSidebar { 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 2f52611..e32aaaa 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; @@ -1009,4 +1011,4 @@ section.update-signup div.circle { .purple-circle { display: none; } -} \ No newline at end of file +} diff --git a/public/assets/css/partials/header.css b/public/assets/css/partials/header.css index 3d95b73..c418b22 100644 --- a/public/assets/css/partials/header.css +++ b/public/assets/css/partials/header.css @@ -1,7 +1,17 @@ header { + position: fixed; + top: 0; + left: 2.5%; display: flex; align-items: center; + width: 95%; margin-top: 35px; + z-index: 60; + transition: box-shadow 300ms, background 300ms; +} +header.dropdown-active { + box-shadow: 0 0 0 600vw rgba(27, 31, 59, 0.8); + background: rgba(27, 31, 59, 0.8); } header a { text-decoration: none; @@ -10,23 +20,187 @@ header .logo-link, header .logo-link svg { display: block; } -header nav a:first-child { + +header nav { + position: relative; + display: flex; + flex-flow: row nowrap; + align-items: center; margin-left: 40px; } -header nav a { +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 { + background: none; color: var(--text-shade-3); - transition: color 50ms ease-in-out; +} +header nav button.donate { + 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 button.donate svg { + height: 1rem; + width: 1rem; +} +header nav button.donate:hover { + background: var(--accent-shade-0); + color: #fff; +} + +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 300ms; +} + +header div.dropdown-content { + position: absolute; + top: 0; + width: 100%; + opacity: 0; + pointer-events: none; + transition: opacity 350ms; +} +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); @@ -128,8 +302,9 @@ header .user-widget .button.logout { } @media screen and (max-width: 900px) { - header nav a:not(.keep-on-mobile) { - display: none; + header { + width: 90%; + left: 5%; } header .logo-link { @@ -137,7 +312,19 @@ header .user-widget .button.logout { } } -@media screen and (max-width: 480px) { +@media screen and (max-width: 768px) { + header nav { + margin-left: 0; + } + header .hide-on-mobile { + display: none; + } + header div.dropdown .top a.show-on-mobile { + display: grid; + } +} + +@media screen and (max-width: 624px) { header .logo-link svg text { display: none; } @@ -147,9 +334,60 @@ header .user-widget .button.logout { } header .logo-link { - margin-right: 10px; + margin-right: 6px; } - header nav a { +} + +@media screen and (max-width: 576px) { + header div.dropdown { + left: calc(-39.876px - 6px - 5vw); + width: 100vw; + box-sizing: border-box; + border-radius: 0; + } +} + +@media screen and (max-width: 504px) { + header nav button.donate span { + display: none; + } + + header nav button.donate { + padding: 8px; + margin: 0; + } + + header nav > a { margin: 0 10px; } } + +@media screen and (max-width: 420px) { + header .right-section { + gap: 12px; + } + + header nav button, + header nav > a { + margin: 0 24px 0 0; + } + + header div.dropdown .top a .caption { + display: none; + } + + header div.dropdown .top a { + padding: 8px; + } +} + +@media screen and (max-width: 348px) { + header .right-section { + gap: 12px; + } + + header nav button, + header nav > a { + margin: 0 12px 0 0; + } +} 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..c09c2b4 100644 --- a/public/assets/js/header-handler.js +++ b/public/assets/js/header-handler.js @@ -1,5 +1,48 @@ /* 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'); +function navbarDropdownHandler(buttonID) { + const allDropdownContents = dropdown.querySelectorAll('div.dropdown-content'); + const dropdownContent = document.querySelector(`.dropdown-content#${buttonID}-dropdown-content`); + + // hide all contents + allDropdownContents.forEach((content) => { + content.classList.remove('show'); + }); + // show the content of the clicked button + dropdownContent.classList.add('show'); + // set the dropdown height to the height of the content + dropdown.style.height = `${dropdownContent.offsetHeight}px`; + + // dim the rest of the page + header.classList.add('dropdown-active'); + +} + +const navbarDropdownBtns = document.querySelectorAll('header .dropdown-button-wrapper button.dropdown-button'); +navbarDropdownBtns.forEach((btn) => { + [ 'click', 'mouseover' ].forEach((event) => { + btn.addEventListener(event, () => { + const id = btn.id.replace('-button', ''); + navbarDropdownHandler(id); + }); + }); +}); +dropdownButtonWrapper.addEventListener('mouseleave', (e) => { + if (e.toElement !== dropdown && !dropdown.contains(e.toElement)) { + dropdown.style.height = '0'; + header.classList.remove('dropdown-active'); + } +}); +dropdown.addEventListener('mouseleave', (e) => { + if (e.toElement !== dropdownButtonWrapper && !dropdown.contains(dropdownButtonWrapper)) { + dropdown.style.height = '0'; + header.classList.remove('dropdown-active'); + } +}); + // 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}} +