dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-31 21:55:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add navbar for desktop

Browse Source
This commit is contained in:
M Sarmad Qadeer
2025-09-26 04:39:59 +05:00
parent 352e0905c7
commit d5bc8c6821
3 changed files with 350 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/css/design3.css
+206
View File
@@ -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;
}
website/src/img/design_3/logo-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

website/src/index.html
+144
View File
@@ -6,9 +6,153 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Simplex Chat</title>
<link rel="stylesheet" href="/css/design3.css">
<script src="/js/flag-anchor.js"></script>
</head>
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
{# <a href="/" class="hidden dark:inline-block dark:lg:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a> #}
<nav id="menu">
<ul>
<li class="nav-link">
<a href="/{{ '' if lang == 'en' else lang }}">
<span class="nav-link-text">{{ "home" | i18n({}, lang ) | safe }}</span>
</a>
</li>
<hr>
<li class="nav-link">
<a href="javascript:void(0);">
<span class="">{{ "guide" | i18n({}, lang ) | safe }}</span>
<span href="" id="btn-mobile">
<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>
</span>
</a>
<ul class="sub-menu">
{% for guide in guide_dropdown.items %}
<li><a href="{{ guide.url | url }}" class="{{ "active" if page.url == guide.url | url else '' }}">{{ guide.title | i18n({}, lang ) | safe }}</a></li>
{% endfor %}
</ul>
</li>
<hr>
<li class="nav-link">
<a href="javascript:void(0);">
<span class="">{{ "reference" | i18n({}, lang ) | safe }}</span>
<span href="" id="btn-mobile">
<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>
</span>
</a>
<ul class="sub-menu">
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank">Whitepaper
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="/privacy">{{ "terms-and-privacy-policy" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/simplex-messaging.md"
target="_blank">{{ "smp-protocol" | i18n({}, lang ) | safe }}
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<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]">
{% 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]">
<li><a href="/docs/translations.html"
>{{ "docs-dropdown-7" | i18n({}, lang ) | safe }}
</a></li>
<li><a href="/docs/android.html"
>{{ "docs-dropdown-2" | i18n({}, lang ) | safe }}
</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
target="_blank">{{ "chat-bot-example" | i18n({}, lang ) | safe }}
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank">TypeScript SDK
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="/docs/cli.html">{{ "terminal-cli" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq"
target="_blank">SimpleXMQ
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
</ul>
</li>
<hr>
<li class="nav-link">
<a href="/jobs">
<span class="nav-link-text">{{ "jobs" | i18n({}, lang ) | safe }}</span>
</a>
</li>
<hr>
<li class="nav-link">
<a href="/blog">
<span class="nav-link-text">{{ "blog" | i18n({}, lang ) | safe }}</span>
</a>
</li>
</ul>
</nav>
<div class="right-links">
<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>
{% endif %}
{% endfor %}
</a>
<ul class="sub-menu">
{% for language in languages.languages %}
{% if language.enabled %}
<li>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
<img src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% else %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
<div style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
</div>
<p>{{ language.name }}</p>
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</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>
</div>
</header>
<div class="screen">
<section class="page-1 cover">
<div class="content">