From 2e91e16dec89a089d70f341dde33c1f0de7992b6 Mon Sep 17 00:00:00 2001 From: "M. Sarmad Qadeer" Date: Sun, 28 Sep 2025 19:17:47 +0500 Subject: [PATCH] website: complete navbar (#6313) --- website/src/css/design3.css | 298 +++++++++++++++++++++++++++---- website/src/img/design_3/sun.svg | 11 ++ website/src/index.html | 75 +++++++- 3 files changed, 345 insertions(+), 39 deletions(-) create mode 100644 website/src/img/design_3/sun.svg diff --git a/website/src/css/design3.css b/website/src/css/design3.css index 1f5454449d..b22ca16cf0 100644 --- a/website/src/css/design3.css +++ b/website/src/css/design3.css @@ -215,6 +215,12 @@ --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); --vh: 1svh; + + --nav-color: #ffffff; +} + +body.change-nav-color { + --nav-color: #001796; } * { @@ -239,6 +245,10 @@ body { opacity: 0 !important; } +.lock-scroll { + overflow: hidden; +} + img { user-select: none; -webkit-user-select: none; @@ -647,8 +657,6 @@ header#navbar { align-items: center; justify-content: center; height: 54px; - - border-bottom: 0.1px solid rgba(170, 170, 170, 0.1); } header#navbar>a.logo { @@ -664,11 +672,14 @@ header#navbar>a.logo img { width: auto; } -header#navbar nav#menu hr { - width: 44px; - border: none; - height: 0.1px; - background: rgb(170, 170, 170); +header#navbar nav#menu>ul>hr { + display: none; +} + +header#navbar nav#menu ul.sub-menu hr { + height: 1px; + width: 100%; + background: rgb(255, 255, 255); opacity: 0.1; } @@ -677,7 +688,7 @@ header#navbar ul { flex-direction: row; align-items: center; justify-content: center; - gap: 5px; + gap: 49px; list-style: none; } @@ -701,7 +712,6 @@ header#navbar ul a span { height: 100%; align-items: center; justify-content: center; - line-height: 1rem; } header#navbar ul a>span:first-child { @@ -715,27 +725,37 @@ header#navbar ul a span svg { transition: all 0.5s ease; } -header#navbar nav#menu li.nav-link:hover span svg { - transform: rotate(180deg); +@media screen and (min-width: 768px) { + header#navbar nav#menu>ul>li>a { + color: var(--nav-color); + } + + header#navbar nav#menu>ul>li>a svg { + fill: var(--nav-color); + } +} + +@media (min-width: 768px) { + header#navbar nav#menu li.nav-link:hover span svg { + transform: rotate(180deg); + } } header#navbar ul.sub-menu { display: flex; flex-direction: column; align-items: flex-start; + justify-content: flex-start; gap: 0.5rem; - height: fit-content; + max-height: calc(100vh - 70px); position: absolute; - background: #0e1637; - top: 100%; - margin-top: 10px; + background: #181e43; + top: calc(100% + 8px); padding: 16px 0; min-width: 180px; - height: fit-content; border-radius: 8px; transition: all .3s ease !important; overflow: auto; - visibility: hidden; opacity: 0; } @@ -760,15 +780,12 @@ header#navbar .nav-link.flag-container ul.sub-menu li a { } header#navbar nav#menu, -header#navbar nav#menu>ul, -header#navbar nav#menu>ul .nav-link { +header#navbar nav#menu>ul { height: 100%; } header#navbar .nav-link { - display: flex; - align-items: center; - justify-content: center; + position: relative; } header#navbar .nav-link:hover .sub-menu, @@ -779,19 +796,33 @@ header#navbar .nav-link:focus-within .sub-menu { } .flag-container>a { - width: 36px; - height: 36px; - background-color: #1e3970d3; + background-color: transparent; display: flex; align-items: center; justify-content: center; - border-radius: 4px; + gap: 4px; color: white; text-decoration: none; } +.flag-container>a svg { + fill: #fff; + width: 10px; + height: auto; +} + +@media screen and (min-width: 768px) { + .flag-container>a { + color: var(--nav-color); + } + + .flag-container>a svg { + fill: var(--nav-color); + } +} + .flag-container>a p { - font-size: 14px; + font-size: 17px; font-weight: 500; user-select: none; -webkit-user-select: none; @@ -817,15 +848,12 @@ header#navbar button.theme-switch-btn { display: flex; align-items: center; justify-content: center; - width: 36px; - height: 36px; - background-color: #1e3970d3; - border-radius: 4px; + background-color: transparent; border: none; } header#navbar button.theme-switch-btn img { - width: 20px; + width: 18px; height: auto; } @@ -833,7 +861,209 @@ header#navbar button.theme-switch-btn img { position: absolute; right: 16px; display: flex; - flex-direction: row-reverse; align-items: center; - gap: 8px; + gap: 1.5rem; +} + +button#cross-btn { + background-color: transparent; + border: none; + display: none; + align-items: center; + justify-content: center; + cursor: pointer; +} + +#cross { + fill: white; + width: 13px; + height: auto; +} + +#mobile-header { + display: none; + padding: 0 1rem; +} + +#mobile-header a.logo img { + height: 32px; +} + +#mobile-header button#hamburger { + height: 36px; + background-color: transparent; + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +#mobile-header button#hamburger svg { + fill: var(--nav-color) !important; + width: 20px; + height: auto; +} + +@media (max-width: 767px) { + #mobile-header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 54px; + background: transparent; + + display: flex; + align-items: center; + justify-content: space-between; + z-index: 9; + } + + header#navbar { + height: 100%; + width: 100%; + background: #0a0f2b; + visibility: hidden; + opacity: 0; + transition: all .3s ease; + transform: translateX(-100%); + } + + header#navbar.open { + visibility: visible; + opacity: 1; + transform: translateX(0); + } + + header#navbar>a.logo { + height: fit-content; + top: 16px; + } + + header#navbar>a.logo img { + height: 28px; + } + + .right-links { + top: 16px; + } + + header#navbar ul a span svg { + width: 18px; + } + + header#navbar nav#menu>ul { + flex-direction: column; + justify-content: flex-start; + gap: 0; + } + + header#navbar nav#menu { + position: fixed !important; + top: 54px; + left: 0; + width: 100%; + height: calc(100% - 54px); + overflow: auto; + padding: 0.5rem 0; + } + + header#navbar nav#menu .nav-link { + width: 100%; + } + + header#navbar nav#menu .nav-link a { + font-family: "Manrope", "GT-Walsheim", sans-serif; + font-weight: 300; + font-size: 18px; + width: 100%; + justify-content: space-between; + justify-content: flex-start; + gap: 10px; + padding: 0px; + padding: 6px 2rem; + } + + header#navbar nav#menu .nav-link>a { + font-size: 28px; + padding: 1rem 2rem; + } + + header#navbar nav#menu ul.sub-menu hr { + opacity: 0.2; + width: 100%; + } + + header#navbar nav#menu ul.sub-menu hr { + margin: 1rem 2rem; + width: calc(100% - 4rem); + } + + header#navbar nav#menu ul.sub-menu { + position: static; + } + + header#navbar nav#menu .sub-menu { + max-height: 0; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all .7s ease !important; + overflow: hidden; + border-radius: 0; + background-color: transparent; + margin-top: 0; + padding: 0rem 1.5rem; + gap: 0; + } + + header#navbar nav#menu .sub-menu li { + width: 100%; + } + + header#navbar nav#menu .sub-menu li a { + font-family: "Manrope", "GT-Walsheim", sans-serif; + font-weight: 200; + width: 100%; + } + + header#navbar nav#menu .active .sub-menu { + max-height: 1000px; + transform: translateY(0px); + padding: 0.5rem 1.5rem; + opacity: 1; + visibility: visible; + margin-top: 0; + } + + button#cross-btn { + display: flex; + cursor: pointer; + } +} + +/* underline animation on hover */ +@media (min-width:768px) { + .nav-link-text { + display: inline-block; + position: relative; + } + + .nav-link-text::before { + content: ""; + position: absolute; + width: 0; + height: 1px; + bottom: 0; + right: 0; + background-color: var(--nav-color); + transition: width 0.25s ease-out; + } + + .nav-link:hover .nav-link-text::before { + width: 100%; + left: 0; + right: auto; + } } \ No newline at end of file diff --git a/website/src/img/design_3/sun.svg b/website/src/img/design_3/sun.svg new file mode 100644 index 0000000000..a1e7d065b8 --- /dev/null +++ b/website/src/img/design_3/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/website/src/index.html b/website/src/index.html index 6ee0d3f0d0..8132f88fcb 100644 --- a/website/src/index.html +++ b/website/src/index.html @@ -66,13 +66,13 @@
  • {{ "chat-protocol" | i18n({}, lang ) | safe }}
  • {{ "glossary" | i18n({}, lang ) | safe }}
    • -
    +
    {% for doc in docs_dropdown.items %}
  • {{ doc.title | i18n({}, lang ) | safe }}
    • {% endfor %} -
    +
  • {{ "docs-dropdown-7" | i18n({}, lang ) | safe }} @@ -115,11 +115,19 @@
    + +
    {% for language in languages.languages %} {% if language.label == page.url | getlang %}

    {{ language.label }}

    + + + {% endif %} {% endfor %}     @@ -147,12 +155,25 @@
    -
    +
    + + + +
    +
    @@ -234,6 +255,50 @@ window.addEventListener('resize', apply); window.addEventListener('orientationchange', apply); })(); + + const nav = document.querySelector('header#navbar'); + + (function navColorOnScroll(){ + const header = nav; // same element + const cover = document.querySelector('.page-1.cover'); + if (!header || !cover || !('IntersectionObserver' in window)) { + window.addEventListener('load', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10)); + window.addEventListener('scroll', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10)); + return; + } + const io = new IntersectionObserver((entries) => { + for (const e of entries) { + // if cover is mostly visible, keep white nav; else switch to #001796 + const onCover = e.isIntersecting && e.intersectionRatio >= 0.55; + document.body.classList.toggle('change-nav-color', !onCover); + } + }, { threshold: [0, 0.55, 1] }); + io.observe(cover); + })(); + + window.addEventListener('click',(e)=>{ + if(e.target.closest('.nav-link')){ + if(e.target.closest('.nav-link').classList.contains('active')){ + e.target.closest('.nav-link').classList.remove('active'); + } + else{ + document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active')) + e.target.closest('.nav-link').classList.add('active'); + } + } + else if(e.target.closest('.nav-toggle-btn')){ + document.body.classList.toggle('lock-scroll'); + if(nav.classList.contains('open')){ + nav.classList.remove('open'); + } + else{ + nav.classList.add('open'); + } + } + // else if(e.target.closest('.theme-switch-btn')){ + // themeSwitch(); + // } + });