From d5bc8c68211e1b13b242ddf0c6f19d3c7ae16f4d Mon Sep 17 00:00:00 2001 From: M Sarmad Qadeer Date: Fri, 26 Sep 2025 04:39:59 +0500 Subject: [PATCH] add navbar for desktop --- website/src/css/design3.css | 206 ++++++++++++++++++++++++ website/src/img/design_3/logo-light.png | Bin 0 -> 6448 bytes website/src/index.html | 144 +++++++++++++++++ 3 files changed, 350 insertions(+) create mode 100644 website/src/img/design_3/logo-light.png diff --git a/website/src/css/design3.css b/website/src/css/design3.css index bc660ebf6e..1f5454449d 100644 --- a/website/src/css/design3.css +++ b/website/src/css/design3.css @@ -235,6 +235,8 @@ body { .hidden { display: none !important; + visibility: hidden !important; + opacity: 0 !important; } img { @@ -630,4 +632,208 @@ main section .image { .page-4 .text-container a { max-width: 80vw !important; } +} + +/* NavBar */ +header#navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 10; + background: none; + + display: flex; + align-items: center; + justify-content: center; + height: 54px; + + border-bottom: 0.1px solid rgba(170, 170, 170, 0.1); +} + +header#navbar>a.logo { + position: absolute; + left: 16px; + height: 100%; + display: flex; + align-items: center; +} + +header#navbar>a.logo img { + height: 32px; + width: auto; +} + +header#navbar nav#menu hr { + width: 44px; + border: none; + height: 0.1px; + background: rgb(170, 170, 170); + opacity: 0.1; +} + +header#navbar ul { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 5px; + list-style: none; +} + +header#navbar ul a { + font-family: "Manrope", "GT-Walsheim", sans-serif; + color: white; + text-decoration: none; + font-size: 16px; + font-weight: 500; + padding: 8px 0; + + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + white-space: nowrap; +} + +header#navbar ul a span { + display: flex; + height: 100%; + align-items: center; + justify-content: center; + line-height: 1rem; +} + +header#navbar ul a>span:first-child { + transform: translateY(-1.5px); +} + +header#navbar ul a span svg { + fill: #fff; + width: 10px; + height: auto; + transition: all 0.5s ease; +} + +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; + gap: 0.5rem; + height: fit-content; + position: absolute; + background: #0e1637; + top: 100%; + margin-top: 10px; + padding: 16px 0; + min-width: 180px; + height: fit-content; + border-radius: 8px; + transition: all .3s ease !important; + overflow: auto; + + visibility: hidden; + opacity: 0; +} + +header#navbar ul.sub-menu li a { + padding: 3px 20px; + white-space: nowrap; + display: flex; + align-items: center; + gap: 4px; +} + +header#navbar ul.sub-menu li a img { + height: 1rem; +} + +header#navbar .nav-link.flag-container ul.sub-menu li a { + display: flex; + align-items: center; + gap: 16px; + white-space: nowrap; +} + +header#navbar nav#menu, +header#navbar nav#menu>ul, +header#navbar nav#menu>ul .nav-link { + height: 100%; +} + +header#navbar .nav-link { + display: flex; + align-items: center; + justify-content: center; +} + +header#navbar .nav-link:hover .sub-menu, +header#navbar .nav-link:focus-within .sub-menu { + visibility: visible; + opacity: 1; + margin-top: 0; +} + +.flag-container>a { + width: 36px; + height: 36px; + background-color: #1e3970d3; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + color: white; + text-decoration: none; +} + +.flag-container>a p { + font-size: 14px; + font-weight: 500; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + line-height: 1rem; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.flag-container .sub-menu a div { + display: flex; + align-items: center; + justify-content: center; +} + +.flag-container .sub-menu { + top: 100%; + right: 0; +} + +header#navbar button.theme-switch-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background-color: #1e3970d3; + border-radius: 4px; + border: none; +} + +header#navbar button.theme-switch-btn img { + width: 20px; + height: auto; +} + +.right-links { + position: absolute; + right: 16px; + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 8px; } \ No newline at end of file diff --git a/website/src/img/design_3/logo-light.png b/website/src/img/design_3/logo-light.png new file mode 100644 index 0000000000000000000000000000000000000000..93751c0f909e5b5a016da6507ef083522d02c598 GIT binary patch literal 6448 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 Simplex Chat + +