From 23e042d441f5da352489b3d1002b1a5447f955dc Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Mon, 1 Apr 2024 23:57:33 +0530
Subject: [PATCH] (feat): implemented basic animated mobile navmenu

---
 htdocs/assets/_floatingbar.php     |  12 +-
 htdocs/assets/_header.php          |  46 +++----
 htdocs/assets/_preloader.php       |   2 +-
 htdocs/assets/extra-style.css      | 145 ++++++++++++++++++++
 htdocs/assets/js/navmenu-config.js |  77 +++++++++++
 htdocs/assets/style.css            | 207 +++++------------------------
 htdocs/blog.php                    |   1 +
 htdocs/contact.php                 |   1 +
 htdocs/dmca.php                    |   1 +
 htdocs/error/404.php               |   1 +
 htdocs/home.php                    |   1 +
 htdocs/policy.php                  |   1 +
 htdocs/projects.php                |   1 +
 htdocs/terms.php                   |   1 +
 14 files changed, 292 insertions(+), 205 deletions(-)
 create mode 100644 htdocs/assets/js/navmenu-config.js

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index ea2b881..8d35f59 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -12,9 +12,9 @@ function isNavPageActive($pageName, $pageRoute) {
 }
 ?>
 
-<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="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-[80] 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">
+<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-[90] flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll no-scrollbar hidden">
     <div id="defresults" class="defresults w-full flex flex-col justify-start px-2 mt-1">
         <p class="text-xs text-accent_three mt-3 mb-2 mx-1">PAGE NAVIGATION</p>
         <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg" onclick="location.href='<?php echo $basePath ?>'">
@@ -104,7 +104,7 @@ function isNavPageActive($pageName, $pageRoute) {
         <div class="spinner border-[4px] border-accent_secondary_transparent border-t-[4px] border-t-accent_primary rounded-[50%] h-[40px] w-[40px] animate-spin"></div>
     </div>
 </div>
-<div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto py-6 fixed inset-x-0 bottom-[20vh] z-40 justify-between flex-col md:flex-row bg-bg_secondary rounded-xl hidden">
+<div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto py-6 fixed inset-x-0 bottom-[20vh] z-[100] justify-between flex-col md:flex-row bg-bg_secondary rounded-xl hidden">
     <div class="shareviaqr w-full md:w-[40%] h-full flex flex-col py-3 px-7">
         <p class="self-start text-xl hidden md:block">Scan to Share</p>
         <div class="bg-bg_primary p-10 md:p-5 rounded-lg my-3">
@@ -137,7 +137,7 @@ function isNavPageActive($pageName, $pageRoute) {
         </div>
     </div>
 </div>
-<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] hidden lg:flex justify-center items-center">
+<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[100] 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>
@@ -147,7 +147,7 @@ function isNavPageActive($pageName, $pageRoute) {
     <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 id="mobile-floating-bar" class="fixed inset-x-0 bottom-[3vh] z-40 flex lg:hidden justify-center items-center">
     <div class="bottomnav w-[90vw] relative flex justify-around items-end">
         <div class="w-full flex justify-around items-center p-3 bg-bg_secondary rounded-tl-xl rounded-bl-xl rounded-tr-2xl shadow-[0px_0px_30px] shadow-bg_primary">
             <span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath ?>'">
@@ -182,7 +182,7 @@ function isNavPageActive($pageName, $pageRoute) {
         </div>
     </div>
 </div>
-<div id="mobile-floating-share" class="fixed right-[1rem] -bottom-[10vh] z-[40] flex lg:hidden justify-center items-center">
+<div id="mobile-floating-share" class="fixed right-[1rem] -bottom-[10vh] z-[100] 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/_header.php b/htdocs/assets/_header.php
index 715ac94..4e337b5 100644
--- a/htdocs/assets/_header.php
+++ b/htdocs/assets/_header.php
@@ -13,7 +13,7 @@ function isPageActive($pageName, $pageRoute) {
 ?>
 
 <nav class="w-full flex justify-between items-center py-5 lg:py-9 px-4 lg:px-[3.5rem]">
-    <div class="logo ml-2 lg:ml-4">
+    <div class="logo ml-2 lg:ml-4 z-[75] lg:z-10">
         <a class="font-cormorant text-4xl font-bold" href="<?php echo $basePath ?>">Subhamoy</a>
         <span class="text-[0.50rem] font-[300] text-accent_primary px-1 py-[0.10rem] rounded-md border-[1px] border-accent_primary ml-1 cursor-pointer" title="This website is still Under Development (Public Beta)">Beta</span>
     </div>
@@ -32,40 +32,44 @@ function isPageActive($pageName, $pageRoute) {
         </a>
         <button class="ml-5 px-3 py-1 border-[2px] border-accent_primary rounded-full hover:rounded-lg hover:shadow-lg hover:shadow-accent_primary_transparent transition transform duration-500" onclick="location.href='<?php echo $basePath . '/contact' ?>'">Let's Talk</button>
     </div>
-    <div class="hamburger flex flex-col justify-center items-center mr-3 mt-1 lg:hidden cursor-pointer" onclick="showNavslider()">
-        <hr class="w-[25px] border-[1px] border-accent_primary mb-1"></hr>
-        <hr class="w-[25px] border-[1px] border-accent_primary mt-1"></hr>
+    <div class="hamburger flex flex-col justify-center items-center mr-3 mt-1 lg:hidden cursor-pointer bg-bg_secondary relative">
+        <span class="flex flex-col justify-center items-center min-h-[20px] z-[75]" onclick="toggleNavSlider()">
+            <hr id="hamline1" class="w-[20px] border-[1px] border-accent_primary mb-1"></hr>
+            <hr id="hamline2" class="w-[20px] border-[1px] border-accent_primary mt-1"></hr>
+        </span>
+        <div id="mobilenavbtncirclemask" class="w-[40px] h-[40px] bg-bg_secondary absolute z-50 rounded-full"></div>
     </div>
-    <div class="slidercontainer hidden flex-col justify-between items-center lg:hidden fixed top-0 left-0 w-screen h-screen overflow-hidden z-50 bg-bg_primary" id="slidercontainer">
+    <div id="slidercontainer" class="slidercontainer hidden flex-col justify-between items-center lg:hidden fixed top-0 left-0 w-screen h-screen overflow-hidden z-[70]">
         <div class="mobilemenuheader w-full flex flex-col">
             <div class="topnavbarumobile flex justify-between items-center py-5 px-4">
-                <a class="font-cormorant text-4xl font-bold ml-2" href="<?php echo $basePath ?>">Subhamoy</a>
-                <div class="hamburgerclose flex flex-col justify-center items-center cursor-pointer mr-3" onclick="closeNavslider()">
-                    <hr class="w-[25px] border-[1px] border-accent_primary rotate-45"></hr>
-                    <hr class="w-[25px] border-[1px] border-accent_primary -rotate-45 -translate-y-[1px]"></hr>
+                <a class="font-cormorant text-4xl font-bold ml-2 text-[transparent]" href="<?php echo $basePath ?>">Subhamoy</a>
+                <div class="hamburgerclose flex flex-col justify-center items-center cursor-pointer mr-3 mt-1">
+                    <hr class="w-[20px] border-[1px] border-accent_primary rotate-45"></hr>
+                    <hr class="w-[20px] border-[1px] border-accent_primary -rotate-45 -translate-y-[1px]"></hr>
+                    <div id="mobilenavbtncircle" class="w-[40px] h-[40px] bg-bg_secondary absolute rounded-full"></div>
                 </div>
             </div>
             <div class="mobilemenu flex flex-col mt-5" id="mobilemenu">
-                <a class="ml-6 mb-4 py-[0.30rem] w-fit relative group" href="<?php echo $basePath ?>">
+                <a id="mobnavitem1" class="mobnavitem ml-6 mb-4 py-[0.30rem] w-fit relative group hidden" href="<?php echo $basePath ?>">
                     Home Page
                     <span class="absolute bottom-0 left-0 h-[2px] bg-accent_primary transition-all duration-300 w-0 <?php echo isPageActive('home.php', '/');?> group-hover:w-full"></span>
                 </a>
-                <a class="ml-6 mb-4 py-[0.30rem] w-fit relative group" href="<?php echo $basePath . '/projects' ?>">
+                <a id="mobnavitem2" class="mobnavitem ml-6 mb-4 py-[0.30rem] w-fit relative group hidden" href="<?php echo $basePath . '/projects' ?>">
                     My Projects
                     <span class="absolute bottom-0 left-0 h-[2px] bg-accent_primary transition-all duration-300 w-0 <?php echo isPageActive('projects.php', '/projects');?> group-hover:w-full"></span>
                 </a>
-                <a class="ml-6 mb-4 py-[0.30rem] w-fit relative group" href="<?php echo $basePath . '/blog' ?>">
+                <a id="mobnavitem3" class="mobnavitem ml-6 mb-4 py-[0.30rem] w-fit relative group hidden" href="<?php echo $basePath . '/blog' ?>">
                     My Blog
                     <span class="absolute bottom-0 left-0 h-[2px] bg-accent_primary transition-all duration-300 w-0 <?php echo isPageActive('blog.php', '/blog');?> group-hover:w-full"></span>
                 </a>
-                <a class="ml-6 mb-4 py-[0.30rem] w-fit relative group" href="<?php echo $basePath . '/contact' ?>">
+                <a id="mobnavitem4" class="mobnavitem ml-6 mb-4 py-[0.30rem] w-fit relative group hidden" href="<?php echo $basePath . '/contact' ?>">
                     Contact Me
                     <span class="absolute bottom-0 left-0 h-[2px] bg-accent_primary transition-all duration-300 w-0 <?php echo isPageActive('contact.php', '/contact');?> group-hover:w-full"></span>
                 </a>
             </div>
         </div>
         <div class="mobilemenufooter w-full flex flex-col mb-20">
-            <button class="mx-6 px-7 py-2 border-[2px] border-accent_primary rounded-lg hover:rounded-lg hover:shadow-lg hover:shadow-accent_primary_transparent transition transform duration-500" onclick="location.href='<?php echo $basePath . '/contact' ?>'">Let's Talk</button>
+            <button id="mobnavmenufooterbtn" class="mx-6 px-7 py-2 border-[2px] border-accent_primary rounded-lg hover:rounded-lg hover:shadow-lg hover:shadow-accent_primary_transparent transition transform duration-500 hidden" onclick="location.href='<?php echo $basePath . '/contact' ?>'">Let's Talk</button>
             <div class="flex justify-center items-center mt-7 text-xl">
                 <?php
 
@@ -75,7 +79,7 @@ function isPageActive($pageName, $pageRoute) {
                     //show all social links
                     while($header_social = $header_socials -> fetch_assoc()) {
                         echo "
-                        <i class='text-accent_primary mx-2 ".$header_social['icon']."' onclick=\"window.open('".$header_social['link']."')\"></i>
+                        <span class='mobnavmenusocials mx-3 z-[75] opacity-0' onclick=\"window.open('".$header_social['link']."')\"><i class='text-accent_primary ".$header_social['icon']."'></i></span>
                         ";
                     }
                 }
@@ -84,16 +88,4 @@ function isPageActive($pageName, $pageRoute) {
             </div>
         </div>
     </div>
-    <script type="text/javascript">
-        function showNavslider(){
-            $('#slidercontainer').removeClass('hidden');
-            $('#slidercontainer').addClass('flex');
-            $('body').addClass("overflow-hidden");
-        }
-        function closeNavslider(){
-            $('#slidercontainer').removeClass('flex');
-            $('#slidercontainer').addClass('hidden');
-            $('body').removeClass("overflow-hidden");
-        }
-    </script>
 </nav>
\ No newline at end of file
diff --git a/htdocs/assets/_preloader.php b/htdocs/assets/_preloader.php
index feae240..95738c9 100644
--- a/htdocs/assets/_preloader.php
+++ b/htdocs/assets/_preloader.php
@@ -1 +1 @@
-<div id="preloader" class="fixed top-0 right-0 h-full w-screen z-[100] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div>
\ No newline at end of file
+<div id="preloader" class="fixed top-0 right-0 h-full w-screen z-[999] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div>
\ No newline at end of file
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index 51d5aa0..5cd6275 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -283,6 +283,151 @@ background: #38BDF8;
     }
 }
 
+/* --- Mobile Navmenu Styling ---*/
+
+.navbtn-circle-popzooom-in {
+    animation: circlePopZoomIn 0.5s ease-in-out;
+    transform: scale(50);
+}
+
+.navbtn-circle-popzooom-out {
+    animation: circlePopZoomOut 0.5s ease-in-out;
+    transform: scale(1);
+}
+
+.navhamline1-to-cross {
+    animation: hamline1ToCross 0.5s ease-in-out;
+    transform: rotate(45deg) translateY(1px);
+}
+
+.navhamline2-to-cross {
+    animation: hamline2ToCross 0.5s ease-in-out;
+    transform: rotate(-45deg) translateY(-1px);
+}
+
+.navhamline1-to-hamline {
+    animation: hamline1ToHamline 0.5s ease-in-out;
+    transform: rotate(0deg) translateY(0px);
+}
+
+.navhamline2-to-hamline {
+    animation: hamline2ToHamline 0.5s ease-in-out;
+    transform: rotate(0deg) translateY(0px);
+}
+
+.navmenu-item-slide-right {
+    animation: navItemSlideRight 0.5s ease-in-out;
+}
+
+.navmenu-item-sliiide-left {
+    animation: navItemSlideRight 0.5s ease-in-out;
+}
+
+.navmenu-button-scale-up {
+    animation: buttonScaleUp 0.5s ease-in-out;
+}
+
+.navmenu-socials-show-up {
+    animation: socialsShowUp 0.3s ease-in-out;
+    opacity: 1;
+}
+
+@keyframes circlePopZoomIn {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(50);
+    }
+}
+
+@keyframes circlePopZoomOut {
+    0% {
+        transform: scale(50);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes hamline1ToCross {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(45deg);
+    }
+}
+
+@keyframes hamline2ToCross {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(-45deg);
+    }
+}
+
+@keyframes hamline1ToHamline {
+    0% {
+        transform: rotate(45deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes hamline2ToHamline {
+    0% {
+        transform: rotate(-45deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes navItemSlideRight {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes navItemSlideLeft {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes buttonScaleUp {
+    0% {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes socialsShowUp {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 /* --- Tooltip Styling --- */
 
 .tippy-box[data-theme~='neosubhamoy'] {
diff --git a/htdocs/assets/js/navmenu-config.js b/htdocs/assets/js/navmenu-config.js
new file mode 100644
index 0000000..157f2f6
--- /dev/null
+++ b/htdocs/assets/js/navmenu-config.js
@@ -0,0 +1,77 @@
+let isMobileNavSliderOpen = false;
+
+function toggleNavSlider(){
+    if(isMobileNavSliderOpen){
+        closeNavslider();
+        isMobileNavSliderOpen = false;
+    }else{
+        showNavslider();
+        isMobileNavSliderOpen = true;
+    }
+}
+
+function showNavslider(){
+    $('#mobilenavbtncircle').removeClass('hidden');
+    $('#mobilenavbtncircle').removeClass('navbtn-circle-popzooom-out')
+    $('#mobilenavbtncircle').addClass('navbtn-circle-popzooom-in')
+    $('#hamline1').removeClass('navhamline1-to-hamline')
+    $('#hamline1').removeClass('mb-1')
+    $('#hamline2').removeClass('navhamline2-to-hamline')
+    $('#hamline2').removeClass('mt-1')
+    $('#hamline1').addClass('navhamline1-to-cross')
+    $('#hamline2').addClass('navhamline2-to-cross')
+    $('#slidercontainer').removeClass('hidden');
+    $('#slidercontainer').addClass('flex');
+    setTimeout(function(){
+        removeClassSequentially(0, $('.mobnavitem'), 'hidden');
+        addClassSequentially(0, $('.mobnavitem'), 'navmenu-item-slide-right');
+        $('#mobnavmenufooterbtn').removeClass('hidden');
+        $('#mobnavmenufooterbtn').addClass('navmenu-button-scale-up');
+        $('.mobnavmenusocials').removeClass('hidden');
+        removeClassSequentially(0, $('.mobnavmenusocials'), 'opacity-0');
+        addClassSequentially(0, $('.mobnavmenusocials'), 'navmenu-socials-show-up');
+    }, 500);
+    $('body').addClass("overflow-hidden");
+}
+function closeNavslider(){
+    $('#mobilenavbtncircle').removeClass('navbtn-circle-popzooom-in')
+    $('#mobilenavbtncircle').addClass('navbtn-circle-popzooom-out')
+    $('#hamline1').removeClass('navhamline1-to-cross')
+    $('#hamline2').removeClass('navhamline2-to-cross')
+    $('#hamline1').addClass('navhamline1-to-hamline')
+    $('#hamline2').addClass('navhamline2-to-hamline')
+    $('#hamline1').addClass('mb-1')
+    $('#hamline2').addClass('mt-1')
+    removeClassSequentially(0, $('.mobnavitem'), 'navmenu-item-slide-right');
+    $('#mobnavmenufooterbtn').addClass('hidden');
+    $('#mobnavmenufooterbtn').removeClass('navmenu-button-scale-up');
+    $('.mobnavitem').addClass('hidden');
+    $('.mobnavmenusocials').addClass('hidden');
+    addClassSequentially(0, $('.mobnavmenusocials'), 'opacity-0');
+    removeClassSequentially(0, $('.mobnavmenusocials'), 'navmenu-socials-show-up');
+    setTimeout(function(){
+        $('#mobilenavbtncircle').removeClass('navbtn-circle-popzooom-out')
+        $('#mobilenavbtncircle').addClass('hidden');
+        $('#slidercontainer').removeClass('flex');
+        $('#slidercontainer').addClass('hidden');
+    }, 500);
+    $('body').removeClass("overflow-hidden");
+}
+
+function addClassSequentially(index, elements, className) {
+    if (index < elements.length) {
+        $(elements[index]).addClass(className);
+        setTimeout(function() {
+            addClassSequentially(index + 1, elements, className);
+        }, 100);
+    }
+}
+
+function removeClassSequentially(index, elements, className) {
+    if (index < elements.length) {
+        $(elements[index]).removeClass(className);
+        setTimeout(function() {
+            removeClassSequentially(index + 1, elements, className);
+        }, 100);
+    }
+}
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index b30bff5..a63c580 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -706,10 +706,6 @@ video {
   z-index: 20;
 }
 
-.z-30 {
-  z-index: 30;
-}
-
 .z-40 {
   z-index: 40;
 }
@@ -722,12 +718,24 @@ video {
   z-index: 100;
 }
 
-.z-\[40\] {
-  z-index: 40;
+.z-\[70\] {
+  z-index: 70;
 }
 
-.z-\[50\] {
-  z-index: 50;
+.z-\[75\] {
+  z-index: 75;
+}
+
+.z-\[80\] {
+  z-index: 80;
+}
+
+.z-\[90\] {
+  z-index: 90;
+}
+
+.z-\[999\] {
+  z-index: 999;
 }
 
 .m-2 {
@@ -1099,6 +1107,10 @@ video {
   min-height: 15vh;
 }
 
+.min-h-\[20px\] {
+  min-height: 20px;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -1119,12 +1131,12 @@ video {
   width: 200px;
 }
 
-.w-\[250px\] {
-  width: 250px;
+.w-\[20px\] {
+  width: 20px;
 }
 
-.w-\[25px\] {
-  width: 25px;
+.w-\[250px\] {
+  width: 250px;
 }
 
 .w-\[27px\] {
@@ -1313,10 +1325,6 @@ video {
   overflow: hidden;
 }
 
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1839,6 +1847,10 @@ video {
   color: rgb(255 29 72 / var(--tw-text-opacity));
 }
 
+.text-\[transparent\] {
+  color: transparent;
+}
+
 .text-accent_four {
   --tw-text-opacity: 1;
   color: rgb(172 203 222 / var(--tw-text-opacity));
@@ -1873,6 +1885,10 @@ video {
   caret-color: #38BDF8;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-20 {
   opacity: 0.2;
 }
@@ -1933,48 +1949,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[0px_5px_30px\] {
-  --tw-shadow: 0px 5px 30px;
-  --tw-shadow-colored: 0px 5px 30px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_10px_20px\] {
-  --tw-shadow: 0px 10px 20px;
-  --tw-shadow-colored: 0px 10px 20px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_1px_20px\] {
-  --tw-shadow: 0px 1px 20px;
-  --tw-shadow-colored: 0px 1px 20px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_30px_20px\] {
-  --tw-shadow: 0px 30px 20px;
-  --tw-shadow-colored: 0px 30px 20px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_30px_30px\] {
-  --tw-shadow: 0px 30px 30px;
-  --tw-shadow-colored: 0px 30px 30px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_40px_10px\] {
-  --tw-shadow: 0px 40px 10px;
-  --tw-shadow-colored: 0px 40px 10px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_40px_50px\] {
-  --tw-shadow: 0px 40px 50px;
-  --tw-shadow-colored: 0px 40px 50px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-accent_primary {
   --tw-shadow-color: #38BDF8;
   --tw-shadow: var(--tw-shadow-colored);
@@ -2073,61 +2047,16 @@ video {
   top: 50%;
 }
 
-.before\:-bottom-\[50px\]::before {
-  content: var(--tw-content);
-  bottom: -50px;
-}
-
-.before\:left-0::before {
-  content: var(--tw-content);
-  left: 0px;
-}
-
 .before\:h-\[40px\]::before {
   content: var(--tw-content);
   height: 40px;
 }
 
-.before\:h-\[50px\]::before {
-  content: var(--tw-content);
-  height: 50px;
-}
-
 .before\:w-\[20px\]::before {
   content: var(--tw-content);
   width: 20px;
 }
 
-.before\:w-\[120px\]::before {
-  content: var(--tw-content);
-  width: 120px;
-}
-
-.before\:w-\[50px\]::before {
-  content: var(--tw-content);
-  width: 50px;
-}
-
-.before\:w-\[70px\]::before {
-  content: var(--tw-content);
-  width: 70px;
-}
-
-.before\:w-\[75px\]::before {
-  content: var(--tw-content);
-  width: 75px;
-}
-
-.before\:w-\[60px\]::before {
-  content: var(--tw-content);
-  width: 60px;
-}
-
-.before\:w-full::before {
-  content: var(--tw-content);
-  width: 100%;
-}
-
 .before\:rounded-tr-full::before {
   content: var(--tw-content);
   border-top-right-radius: 9999px;
@@ -2139,12 +2068,6 @@ video {
   background-color: rgb(30 41 59 / 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\:shadow-\[0px_-10px_0_0_transparent\]::before {
   content: var(--tw-content);
   --tw-shadow: 0px -10px 0 0 transparent;
@@ -2152,68 +2075,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.before\:shadow-\[0px_-50px_30px\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px -50px 30px;
-  --tw-shadow-colored: 0px -50px 30px 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\:shadow-\[0px_50px_30px\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px 50px 30px;
-  --tw-shadow-colored: 0px 50px 30px 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\:shadow-\[0px_-50px_30px_inset\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px -50px 30px inset;
-  --tw-shadow-colored: inset 0px -50px 30px 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\:shadow-\[0px_50px_30px_inset\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px 50px 30px inset;
-  --tw-shadow-colored: inset 0px 50px 30px 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\:shadow-\[0px_0px_30px_inset\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px 0px 30px inset;
-  --tw-shadow-colored: inset 0px 0px 30px 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\:shadow-\[0px_10px_30px_inset\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px 10px 30px inset;
-  --tw-shadow-colored: inset 0px 10px 30px 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\:shadow-\[0px_10px_50px_inset\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px 10px 50px inset;
-  --tw-shadow-colored: inset 0px 10px 50px 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\:shadow-\[0px_5px_50px_inset\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px 5px 50px inset;
-  --tw-shadow-colored: inset 0px 5px 50px 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\:shadow-bg_primary::before {
-  content: var(--tw-content);
-  --tw-shadow-color: #0F172A;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .before\:content-\[\'\'\]::before {
   --tw-content: '';
   content: var(--tw-content);
@@ -2476,6 +2337,10 @@ video {
     top: 8.2rem;
   }
 
+  .lg\:z-10 {
+    z-index: 10;
+  }
+
   .lg\:my-2 {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
diff --git a/htdocs/blog.php b/htdocs/blog.php
index 1a84e30..bc9634c 100644
--- a/htdocs/blog.php
+++ b/htdocs/blog.php
@@ -30,6 +30,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
diff --git a/htdocs/contact.php b/htdocs/contact.php
index df9acd5..5be4314 100644
--- a/htdocs/contact.php
+++ b/htdocs/contact.php
@@ -113,6 +113,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
diff --git a/htdocs/dmca.php b/htdocs/dmca.php
index e82239e..8e3205a 100644
--- a/htdocs/dmca.php
+++ b/htdocs/dmca.php
@@ -58,6 +58,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
diff --git a/htdocs/error/404.php b/htdocs/error/404.php
index bfc7261..0abba0a 100644
--- a/htdocs/error/404.php
+++ b/htdocs/error/404.php
@@ -33,6 +33,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
 </body>
diff --git a/htdocs/home.php b/htdocs/home.php
index b28ea1e..94f7e7f 100644
--- a/htdocs/home.php
+++ b/htdocs/home.php
@@ -220,6 +220,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
diff --git a/htdocs/policy.php b/htdocs/policy.php
index d4bb515..ba7607a 100644
--- a/htdocs/policy.php
+++ b/htdocs/policy.php
@@ -273,6 +273,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
diff --git a/htdocs/projects.php b/htdocs/projects.php
index 9783550..1b4be97 100644
--- a/htdocs/projects.php
+++ b/htdocs/projects.php
@@ -187,6 +187,7 @@ $years = create_project_years_array($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
diff --git a/htdocs/terms.php b/htdocs/terms.php
index 944caec..a5026bd 100644
--- a/htdocs/terms.php
+++ b/htdocs/terms.php
@@ -186,6 +186,7 @@ write_dataset($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>