mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-05-25 22:54:29 +00:00
style mobile nav
This commit is contained in:
M Sarmad Qadeer
+119
-16
@@ -8,29 +8,132 @@
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn" href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
|
||||
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user