From 3787c85d0d0d668977c82ce9d19f874068e3a853 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Sat, 30 Mar 2024 23:26:05 +0530
Subject: [PATCH] (feat): implemented basic mobile floating bottom navbar and
 share button

---
 htdocs/assets/_floatingbar.php         |  48 ++++-
 htdocs/assets/extra-style.css          |  10 +
 htdocs/assets/js/floatingbar-config.js |  57 ++++++
 htdocs/assets/style.css                | 243 ++++++++++++++++++++++++-
 4 files changed, 349 insertions(+), 9 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index ef38ef5..1678156 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -1,3 +1,17 @@
+<?php
+function isNavPageActive($pageName, $pageRoute) {
+    $currentPage = $_SERVER['PHP_SELF'];
+    $currentRoute = parse_url($_SERVER['REQUEST_URI'])['path'];
+    if (strpos($currentPage, $pageName) !== false || strpos($currentRoute, $pageRoute) !== false) {
+        if ($pageRoute == '/' && ($pos = strrpos($currentRoute, $pageRoute)) !== false && $pos < strlen($currentRoute) - 1) {
+            return '';
+        }
+        return 'w-full';
+    }
+    return '';
+}
+?>
+
 <div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
 <div id="phpHostBasePath" class="hidden" data-base-path="<?php echo htmlspecialchars($basePath);?>"></div>
 <div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-fit min-h-[15vh] max-h-[45vh] md:max-h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll no-scrollbar hidden">
@@ -123,7 +137,7 @@
         </div>
     </div>
 </div>
-<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
+<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] hidden lg:flex justify-center items-center">
     <div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_extratransparent transition transform duration-300">
         <button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
         <p id="searchtext" class="ml-3 mr-4 text-accent_three">Search</p>
@@ -132,4 +146,36 @@
     <button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
     <button id="closebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
     <button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
+</div>
+<div id="mobile-floating-bar" class="fixed inset-x-0 bottom-[3vh] z-[50] flex lg:hidden justify-center items-center">
+    <div class="bottomnav w-[90vw] p-3 bg-bg_secondary rounded-xl relative flex justify-around items-center shadow-[0px_0px_30px] shadow-bg_primary">
+        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath ?>'">
+            <lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+            <p class="mx-1 text-xs">Home</p>
+            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('home.php', '/');?>"></span>
+        </span>
+        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/projects' ?>'">
+            <lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+            <p class="mx-1 text-xs">Projects</p>
+            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('projects.php', '/projects');?>"></span>
+        </span>
+        <div class="flex items-center absolute -top-1/2">
+            <button id="mobilesearchbutton" class="searchbutton bg-accent_primary px-5 py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary transition transform duration-300 border-[8px] border-bg_primary before:content-[''] before:absolute before:top-1/2 before:-left-6 before:w-[20px] before:h-[20px] before:bg-[transparent] before:rounded-tr-full after:shadow-[0px_-10px_0_0_rgb(15,_23,_42)] after:content-[''] after:absolute after:top-1/2 after:-right-6 after:w-[20px] after:h-[20px] after:bg-[transparent] after:rounded-tl-full before:shadow-[0px_-10px_0_0_rgb(15,_23,_42)]"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
+        </div>
+        <div class="spacer w-[20%]"></div>
+        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/blog' ?>'">
+            <lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+            <p class="mx-1 text-xs">Blog</p>
+            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('blog.php', '/blog');?>"></span>
+        </span>
+        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/contact' ?>'">
+            <lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+            <p class="mx-1 text-xs">Contact</p>
+            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('contact.php', '/contact');?>"></span>
+        </span>
+    </div>
+</div>
+<div id="mobile-floating-share" class="fixed right-[1rem] -bottom-[10vh] z-[40] flex lg:hidden justify-center items-center">
+    <button id="mobilesharebutton" class="sharebutton bg-accent_primary px-[1.30rem] py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
+    <button id="mobileshareclose" class="closebutton bg-accent_primary px-[1.35rem] py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
 </div>
\ No newline at end of file
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index 31637c9..51d5aa0 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -124,6 +124,16 @@ background: #38BDF8;
     transition: transform 0.5s ease-in-out;
 }
 
+.floatingshare-slide-up {
+    transform: translateY(-15vh);
+    transition: transform 0.5s ease-in-out;
+}
+
+.floatingshare-slide-down {
+    transform: translateY(15vh);
+    transition: transform 0.5s ease-in-out;
+}
+
 .floatingbar-click-slide-up {
     transform: translateY(-70vh);
     transition: transform 0.5s ease-in-out;
diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 9be2475..dd505fa 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -17,6 +17,11 @@ const spinnerQr = document.getElementById("qrspinnercont");
 const qrCode = document.getElementById("pageqrcode");
 const linkInput = document.getElementById("pageurlinput");
 const embedCode = document.getElementById("embedcodetag");
+const mobileFloatingBar = document.getElementById("mobile-floating-bar");
+const mobileFloatingShare = document.getElementById("mobile-floating-share");
+const mobileSearchBtn = document.getElementById("mobilesearchbutton");
+const mobileShareBtn = document.getElementById("mobilesharebutton");
+const mobileShareCloseBtn = document.getElementById("mobileshareclose");
 const basePath = document.getElementById('phpHostBasePath').dataset.basePath;
 let lastScrollTop = 0, isSearchActive = false, isShareActive = false;
 
@@ -28,11 +33,19 @@ window.addEventListener("scroll", function () {
     floatingBar.classList.remove("floatingbar-click-slide-down");
     floatingBar.classList.add("floatingbar-slide-down");
     floatingBar.classList.remove("floatingbar-slide-up");
+    mobileFloatingBar.classList.add("floatingbar-slide-down");
+    mobileFloatingBar.classList.remove("floatingbar-slide-up");
+    mobileFloatingShare.classList.remove("floatingshare-slide-down");
+    mobileFloatingShare.classList.add("floatingshare-slide-up");
     } else {
     // Scrolling up
     floatingBar.classList.remove("floatingbar-click-slide-down");
     floatingBar.classList.remove("floatingbar-slide-down");
     floatingBar.classList.add("floatingbar-slide-up");
+    mobileFloatingBar.classList.remove("floatingbar-slide-down");
+    mobileFloatingBar.classList.add("floatingbar-slide-up");
+    mobileFloatingShare.classList.remove("floatingshare-slide-up");
+    mobileFloatingShare.classList.add("floatingshare-slide-down");
     }
 
     lastScrollTop = st <= 0 ? 0 : st;
@@ -41,6 +54,12 @@ window.addEventListener("scroll", function () {
 // function to open floating search window
 function activate_search() {
     isSearchActive = true;
+    mobileFloatingBar.classList.remove("flex", "lg:hidden");
+    mobileFloatingBar.classList.add("hidden");
+    if(window.innerWidth < 1024) {
+        floatingBar.classList.remove("hidden", "lg:flex");
+        floatingBar.classList.add("flex");
+    }
     floatingBar.classList.remove("floatingbar-click-slide-down");
     floatingBar.classList.add("floatingbar-click-slide-up");
     searchBar.classList.remove("searchbar-click-decrease-width");
@@ -58,6 +77,12 @@ function activate_search() {
 
 // function to close floating search window
 function close_search() {
+    mobileFloatingBar.classList.remove("hidden");
+    mobileFloatingBar.classList.add("flex", "lg:hidden");
+    if(window.innerWidth < 1024) {
+        floatingBar.classList.remove("flex");
+        floatingBar.classList.add("hidden", "lg:flex");
+    }
     floatingBar.classList.remove("floatingbar-click-slide-up");
     floatingBar.classList.add("floatingbar-click-slide-down");
     searchBar.classList.remove("searchbar-click-increase-width");
@@ -84,6 +109,18 @@ searchBar.addEventListener("click", function () {
     }
 });
 
+// when the search icon is clicked on mobile view
+mobileSearchBtn.addEventListener("click", function () {
+    if(!isShareActive) {
+        activate_search();
+    }
+    else {
+        close_share();
+        activate_search();
+    }
+});
+
+
 // when ALT + K shortcut key is pressed
 document.addEventListener("keydown", function(event) {
     if (event.altKey && event.key === "k") {
@@ -350,7 +387,9 @@ function activate_share() {
     windowWrapper.classList.remove("hidden");
     windowWrapper.classList.add("flotingbar-window-wrapper-show");
     shareBtn.classList.add("hidden");
+    mobileShareBtn.classList.add("hidden");
     shareCloseBtn.classList.remove("hidden");
+    mobileShareCloseBtn.classList.remove("hidden");
     shareWin.classList.add("floatingshare-window-show");
     document.body.classList.add("overflow-hidden");
     show_qr_loading_delay();  //show qrcode loading delay spinner
@@ -361,7 +400,9 @@ function close_share() {
     windowWrapper.classList.remove("flotingbar-window-wrapper-show");
     windowWrapper.classList.add("hidden");
     shareCloseBtn.classList.add("hidden");
+    mobileShareCloseBtn.classList.add("hidden");
     shareBtn.classList.remove("hidden");
+    mobileShareBtn.classList.remove("hidden");
     shareWin.classList.remove("floatingshare-window-show");
     document.body.classList.remove("overflow-hidden");
     isShareActive = false;
@@ -378,11 +419,27 @@ shareBtn.addEventListener("click", function () {
     }
 });
 
+// when the Share Button is clicked on mobile view
+mobileShareBtn.addEventListener("click", function () {
+    if(!isSearchActive) {
+        activate_share();
+    }
+    else {
+        close_search();
+        activate_share();
+    }
+});
+
 // when Close Share button is pressed
 shareCloseBtn.addEventListener("click", function () {
     close_share();
 });
 
+// when the Close Share button is clicked on mobile view
+mobileShareCloseBtn.addEventListener("click", function () {
+    close_share();
+});
+
 // when ALT + L shortcut key is pressed
 document.addEventListener("keydown", function(event) {
     if (event.altKey && event.key === "l") {
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index e8f1def..7d58feb 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -581,6 +581,10 @@ video {
   right: 0px;
 }
 
+.-top-7 {
+  top: -1.75rem;
+}
+
 .-top-\[0\.60rem\] {
   top: -0.60rem;
 }
@@ -597,6 +601,10 @@ video {
   bottom: 20vh;
 }
 
+.bottom-\[3vh\] {
+  bottom: 3vh;
+}
+
 .bottom-\[5\.5rem\] {
   bottom: 5.5rem;
 }
@@ -669,6 +677,46 @@ video {
   top: 4.7rem;
 }
 
+.-top-1\/2 {
+  top: -50%;
+}
+
+.-bottom-5 {
+  bottom: -1.25rem;
+}
+
+.bottom-5 {
+  bottom: 1.25rem;
+}
+
+.-bottom-2 {
+  bottom: -0.5rem;
+}
+
+.-bottom-3 {
+  bottom: -0.75rem;
+}
+
+.left-\[1rem\] {
+  left: 1rem;
+}
+
+.right-\[1rem\] {
+  right: 1rem;
+}
+
+.bottom-\[5vh\] {
+  bottom: 5vh;
+}
+
+.-bottom-\[5vh\] {
+  bottom: -5vh;
+}
+
+.-bottom-\[10vh\] {
+  bottom: -10vh;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -697,6 +745,10 @@ video {
   z-index: 50;
 }
 
+.z-\[40\] {
+  z-index: 40;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -1050,22 +1102,18 @@ video {
   height: 100vh;
 }
 
+.h-\[3px\] {
+  height: 3px;
+}
+
 .max-h-\[45vh\] {
   max-height: 45vh;
 }
 
-.min-h-\[10vh\] {
-  min-height: 10vh;
-}
-
 .min-h-\[15vh\] {
   min-height: 15vh;
 }
 
-.min-h-\[12vh\] {
-  min-height: 12vh;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -1078,6 +1126,10 @@ video {
   width: 0.5rem;
 }
 
+.w-\[20\%\] {
+  width: 20%;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -1155,6 +1207,10 @@ video {
   width: 100vw;
 }
 
+.w-\[3rem\] {
+  width: 3rem;
+}
+
 .max-w-\[45vw\] {
   max-width: 45vw;
 }
@@ -1320,6 +1376,14 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-tl-full {
+  border-top-left-radius: 9999px;
+}
+
+.rounded-tr-full {
+  border-top-right-radius: 9999px;
+}
+
 .border-\[1px\] {
   border-width: 1px;
 }
@@ -1340,6 +1404,18 @@ video {
   border-width: 5px;
 }
 
+.border-\[12px\] {
+  border-width: 12px;
+}
+
+.border-\[6px\] {
+  border-width: 6px;
+}
+
+.border-\[8px\] {
+  border-width: 8px;
+}
+
 .border-b-\[1px\] {
   border-bottom-width: 1px;
 }
@@ -1414,6 +1490,11 @@ video {
   border-color: rgb(217 217 217 / var(--tw-border-opacity));
 }
 
+.border-bg_primary {
+  --tw-border-opacity: 1;
+  border-color: rgb(15 23 42 / var(--tw-border-opacity));
+}
+
 .border-b-accent_secondary_transparent {
   border-bottom-color: rgba(255, 255, 255, 0.30);
 }
@@ -1584,6 +1665,11 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1619,6 +1705,21 @@ video {
   padding-bottom: 0.30rem;
 }
 
+.px-\[1\.50rem\] {
+  padding-left: 1.50rem;
+  padding-right: 1.50rem;
+}
+
+.px-\[1\.30rem\] {
+  padding-left: 1.30rem;
+  padding-right: 1.30rem;
+}
+
+.px-\[1\.35rem\] {
+  padding-left: 1.35rem;
+  padding-right: 1.35rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1900,6 +2001,132 @@ video {
   hostname: port;
 }
 
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:top-0::before {
+  content: var(--tw-content);
+  top: 0px;
+}
+
+.before\:-left-10::before {
+  content: var(--tw-content);
+  left: -2.5rem;
+}
+
+.before\:-left-5::before {
+  content: var(--tw-content);
+  left: -1.25rem;
+}
+
+.before\:top-1\/2::before {
+  content: var(--tw-content);
+  top: 50%;
+}
+
+.before\:-left-7::before {
+  content: var(--tw-content);
+  left: -1.75rem;
+}
+
+.before\:-left-6::before {
+  content: var(--tw-content);
+  left: -1.5rem;
+}
+
+.before\:h-\[20px\]::before {
+  content: var(--tw-content);
+  height: 20px;
+}
+
+.before\:w-\[20px\]::before {
+  content: var(--tw-content);
+  width: 20px;
+}
+
+.before\:rounded-tr-full::before {
+  content: var(--tw-content);
+  border-top-right-radius: 9999px;
+}
+
+.before\:bg-bg_primary::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
+.before\:bg-accent_primary::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
+}
+
+.before\:bg-\[transparent\]::before {
+  content: var(--tw-content);
+  background-color: transparent;
+}
+
+.before\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
+  --tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:content-\[\'\'\]::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.after\:absolute::after {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.after\:-right-6::after {
+  content: var(--tw-content);
+  right: -1.5rem;
+}
+
+.after\:top-1\/2::after {
+  content: var(--tw-content);
+  top: 50%;
+}
+
+.after\:h-\[20px\]::after {
+  content: var(--tw-content);
+  height: 20px;
+}
+
+.after\:w-\[20px\]::after {
+  content: var(--tw-content);
+  width: 20px;
+}
+
+.after\:rounded-tl-full::after {
+  content: var(--tw-content);
+  border-top-left-radius: 9999px;
+}
+
+.after\:bg-\[transparent\]::after {
+  content: var(--tw-content);
+  background-color: transparent;
+}
+
+.after\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::after {
+  content: var(--tw-content);
+  --tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
+  --tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.after\:content-\[\'\'\]::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
 .last\:mb-3:last-child {
   margin-bottom: 0.75rem;
 }