From 445fa5669ea4c658955c90b9be15eb5a7e705a8c Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Thu, 18 Aug 2022 23:11:42 +0500
Subject: [PATCH] improve mobile nav

---
 website/src/_includes/layouts/article.html | 8 ++++----
 website/src/blog.html                      | 8 ++++----
 website/src/contact/index.html             | 8 ++++----
 website/src/index.html                     | 8 ++++----
 website/src/invitation/index.html          | 8 ++++----
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/website/src/_includes/layouts/article.html b/website/src/_includes/layouts/article.html
index 73b2349e81..aa151810e4 100644
--- a/website/src/_includes/layouts/article.html
+++ b/website/src/_includes/layouts/article.html
@@ -40,10 +40,10 @@
       </div>
     </nav>
   </header>
-  <div class="flex lg:hidden w-full sticky top-[62px]">
-    <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 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-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
-    <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
+  <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>
 
   <section class="container">
diff --git a/website/src/blog.html b/website/src/blog.html
index cfe4696f6a..4f7747cb8b 100644
--- a/website/src/blog.html
+++ b/website/src/blog.html
@@ -44,10 +44,10 @@
           </div>
         </nav>
     </header>
-    <div class="flex lg:hidden w-full sticky top-[62px]">
-      <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 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-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
-      <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
+    <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>
     
     <section class="container">
diff --git a/website/src/contact/index.html b/website/src/contact/index.html
index 9f629d96aa..4ecfd0d8f5 100644
--- a/website/src/contact/index.html
+++ b/website/src/contact/index.html
@@ -45,10 +45,10 @@
       </div>
     </nav>
   </header>
-  <div class="flex lg:hidden w-full sticky top-[62px]">
-    <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 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-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
-    <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
+  <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>
 
   <section id="conn_req">
diff --git a/website/src/index.html b/website/src/index.html
index a36b52d94a..4ebf12f586 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -60,10 +60,10 @@
         </div>
       </nav>
     </header>
-    <div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#FCD561]">
-      <a class="flex-1 flex justify-center text-gray-800 bg-[#FCD561] tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 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-gray-800 bg-[#FCD561] tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
-      <a class="flex-1 flex justify-center text-gray-800 bg-[#FCD561] tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
+    <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>
 
     <section id="demo" class="z-10">
diff --git a/website/src/invitation/index.html b/website/src/invitation/index.html
index 8525a2dd93..6c755ae634 100644
--- a/website/src/invitation/index.html
+++ b/website/src/invitation/index.html
@@ -53,10 +53,10 @@
       </div>
     </nav>
   </header>
-  <div class="flex lg:hidden w-full sticky top-[62px]">
-    <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 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-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
-    <a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
+  <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>
 
   <section id="conn_req">