From 3e3bf0abce82acad14e46ff730adb3933e8b7021 Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Fri, 19 Aug 2022 22:29:37 +0500
Subject: [PATCH] style mobile nav

---
 website/src/_includes/nav.html | 135 +++++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 16 deletions(-)

diff --git a/website/src/_includes/nav.html b/website/src/_includes/nav.html
index 20b6deab2a..bb680649ae 100644
--- a/website/src/_includes/nav.html
+++ b/website/src/_includes/nav.html
@@ -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>
\ No newline at end of file
+
+<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>
\ No newline at end of file