mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-03-31 20:36:19 +00:00
website: complete navbar (#6313)
This commit is contained in:
M. Sarmad Qadeer
@@ -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;
|
||||
}
|
||||
}
|
||||
11
website/src/img/design_3/sun.svg
Normal file
11
website/src/img/design_3/sun.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="469" height="469" viewBox="0 0 469 469" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M225.768 1.44594C220.301 3.84594 214.701 10.6459 213.768 15.9793C213.234 18.3793 213.101 31.7126 213.368 45.7126L213.768 71.1793L217.634 76.1126C226.701 88.1126 242.968 87.5793 252.301 75.0459C254.968 71.5793 255.101 69.5793 255.101 42.2459C255.101 14.9126 254.968 12.9126 252.301 9.44594C250.834 7.44594 248.034 4.51261 246.168 3.17928C241.768 -0.154057 231.101 -1.08739 225.768 1.44594Z" fill="white"/>
|
||||
<path d="M72.9687 65.3128C63.7687 71.5794 60.1687 81.4461 63.7687 91.1794C65.502 95.4461 98.702 129.446 104.035 132.379C106.035 133.446 110.569 134.246 114.035 134.246C126.035 134.246 134.435 125.846 134.435 113.846C134.435 110.379 133.635 105.846 132.569 103.846C129.635 98.5128 95.6353 65.3128 91.3687 63.5794C85.102 61.3128 77.902 61.9794 72.9687 65.3128Z" fill="white"/>
|
||||
<path d="M377.102 63.7128C373.102 65.3128 338.969 98.7794 336.302 103.846C335.236 105.846 334.436 110.379 334.436 113.846C334.436 125.846 342.836 134.246 354.836 134.246C358.302 134.246 362.836 133.446 364.836 132.379C370.169 129.446 403.369 95.4461 405.102 91.1794C408.702 81.4461 405.102 71.5794 395.902 65.3128C391.102 61.9794 383.102 61.3128 377.102 63.7128Z" fill="white"/>
|
||||
<path d="M211.635 108.246C185.635 113.179 163.502 125.046 144.302 144.112C117.902 170.512 104.968 203.579 106.835 240.246C109.768 297.712 149.102 344.912 205.902 359.179C218.568 362.379 250.302 362.379 262.968 359.179C310.435 347.312 345.768 312.646 358.702 265.046C362.435 251.446 362.835 219.446 359.368 205.712C347.368 158.112 312.302 122.379 265.235 110.112C251.768 106.512 225.502 105.579 211.635 108.246Z" fill="white"/>
|
||||
<path d="M12.4349 214.779C-0.498477 220.379 -4.09848 237.579 5.23486 248.246C11.2349 255.046 15.6349 255.846 45.3682 255.313C74.0349 254.913 75.1015 254.646 81.6349 245.713C85.9015 239.979 85.5015 228.113 80.8349 221.979C74.4349 213.713 71.2349 212.913 42.1682 212.913C23.7682 213.046 15.2349 213.579 12.4349 214.779Z" fill="white"/>
|
||||
<path d="M396.035 215.179C393.635 216.379 390.035 219.445 388.035 221.979C383.368 228.112 382.968 239.979 387.235 245.712C394.035 254.779 394.301 254.912 426.435 254.912C458.568 254.912 458.835 254.779 465.635 245.712C469.501 240.512 469.501 227.979 465.635 222.779C458.968 213.845 458.301 213.579 428.035 213.179C404.435 212.912 399.768 213.179 396.035 215.179Z" fill="white"/>
|
||||
<path d="M103.101 336.779C96.7013 340.779 65.368 373.179 63.768 377.313C57.368 394.513 74.168 411.313 91.368 404.913C95.6347 403.179 129.635 369.979 132.568 364.646C135.368 359.446 134.968 349.046 131.768 343.846C126.168 334.646 112.035 331.179 103.101 336.779Z" fill="white"/>
|
||||
<path d="M344.035 336.912C341.635 338.379 338.569 341.445 337.102 343.845C333.902 349.045 333.502 359.445 336.302 364.645C339.235 369.979 373.235 403.179 377.502 404.912C387.235 408.512 397.102 404.912 403.369 395.712C406.702 390.779 407.369 383.579 405.102 377.312C403.369 373.045 370.169 339.045 364.835 336.112C359.635 333.312 349.235 333.712 344.035 336.912Z" fill="white"/>
|
||||
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -66,13 +66,13 @@
|
||||
<li><a href="/docs/protocol/simplex-chat.html">{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
|
||||
<li><a href="/docs/glossary.html">{{ "glossary" | i18n({}, lang ) | safe }}</a></li>
|
||||
|
||||
<hr class=" h-[1px] w-full dark:opacity-[0.1]">
|
||||
<hr>
|
||||
|
||||
{% for doc in docs_dropdown.items %}
|
||||
<li><a href="{{ doc.url | url }}" class="{{ "active" if page.url == doc.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ doc.title | i18n({}, lang ) | safe }}</a></li>
|
||||
{% endfor %}
|
||||
|
||||
<hr class=" h-[1px] w-full dark:opacity-[0.1]">
|
||||
<hr>
|
||||
|
||||
<li><a href="/docs/translations.html"
|
||||
>{{ "docs-dropdown-7" | i18n({}, lang ) | safe }}
|
||||
@@ -115,11 +115,19 @@
|
||||
</nav>
|
||||
|
||||
<div class="right-links">
|
||||
<button href="#" class="theme-switch-btn">
|
||||
<img src="/img/design_3/sun.svg" alt="" srcset="" class="sun">
|
||||
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
|
||||
</button>
|
||||
|
||||
<div class="nav-link flag-container">
|
||||
<a href="javascript:void(0);">
|
||||
{% for language in languages.languages %}
|
||||
{% if language.label == page.url | getlang %}
|
||||
<p style="text-align:center;">{{ language.label }}</p>
|
||||
<svg viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
@@ -147,12 +155,25 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button href="#" class="theme-switch-btn">
|
||||
<img src="/img/new/sun.svg" alt="" srcset="" class="sun">
|
||||
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
|
||||
<button id="cross-btn" class="nav-toggle-btn">
|
||||
<svg id="cross" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mobile-header">
|
||||
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
|
||||
|
||||
<button id="hamburger" class="nav-toggle-btn">
|
||||
<svg viewBox="0 0 100 80" width="36" height="36">
|
||||
<rect width="100" height="15"></rect>
|
||||
<rect y="30" width="100" height="15"></rect>
|
||||
<rect y="60" width="100" height="15"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="screen">
|
||||
<section class="page-1 cover">
|
||||
<div class="content">
|
||||
@@ -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();
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user