From 982e80fef089386c25ea729c0eef07f3e2f588fd Mon Sep 17 00:00:00 2001
From: eric <erotush77@gmail.com>
Date: Wed, 23 Oct 2024 15:14:16 +0300
Subject: [PATCH] Fixed Mobile menu

---
 components/HeaderLayout.js       | 40 ++++++++++++++++----------------
 pages/facilities/[id].js         |  3 ++-
 pages/public/facilities/index.js |  2 +-
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/components/HeaderLayout.js b/components/HeaderLayout.js
index 1038732..b20646f 100644
--- a/components/HeaderLayout.js
+++ b/components/HeaderLayout.js
@@ -304,7 +304,7 @@ export default function HeaderLayout({
               {/* Mobile Nav Bar */}
 
               <div style={{ backgroundColor: '#1651b6' }} className='w-full bg-gray-300 top-[94px] md:top-[95px] fixed z-10 max-h-min flex items-center justify-between md:items-start md:items-between p-3 md:p-0'>
-                <button className='md:hidden relative' onClick={() => setIsMobileMenu(!isMobileMenu)}>
+                <button className='md:hidden relative' onClick={() => {setIsMobileMenu(!isMobileMenu)}}>
                   {
                     !isMobileMenu &&
                     <MenuIcon className='w-6 aspect-square text-gray-100' />
@@ -326,39 +326,39 @@ export default function HeaderLayout({
                         <ul style={{ backgroundColor: '#1651b6' }} className='list-none w-full flex flex-col rounded items-center  justify-between '>
 
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/dashboard'>Dashboard</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/facilities\/.+/.test(currentPath) || /\/facilities/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85 text-gray-100 '}  ${currentPath == "/public/facilities" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/facilities\/.+/.test(currentPath) || /\/facilities/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85 text-gray-100 '}  ${currentPath == "/public/facilities" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href={`${userID !== 6 && isLoggedIn ? '/facilities' : '/public/facilities'}`}>Facilities</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/community-units\/.+/.test(currentPath) || /\/community-units/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-r-2 border-b-gray-50 bg-blue-700/85 text-gray-100'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/community-units\/.+/.test(currentPath) || /\/community-units/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-r-2 border-b-gray-50 bg-blue-700/85 text-gray-100'}`}>
                             <Link href={`${userID !== 6 && isLoggedIn ? '/community-units' : '/public/chu'}`}>Community Units</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/user\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/user\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/user'>Users</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/system_setup'><span>System Setup</span></Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/reports'>Reports</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/admin_offices\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/admin_offices\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/admin_offices'>Admin Offices</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-center justify-center text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/documentation" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/documentation" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                                                   <Link target="_blank" href='https://kmhfr-docs.vercel.app'>Documentation</Link>
                                                 </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/downloads" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex w-full text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/downloads" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/downloads'>Downloads</Link>
                           </li>
                         </ul>
@@ -366,44 +366,44 @@ export default function HeaderLayout({
 
                       {
                         (groupID == 5 || // National Administrators
-                        groupsID == 11) && // Data Cleaning National
+                        groupID == 11) && // Data Cleaning National
                         isLoggedIn &&
                         <ul style={{ backgroundColor: '#1651b6' }} className='list-none w-full flex flex-col rounded items-center justify-between '>
 
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/dashboard'>Dashboard</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/facilities\/.+/.test(currentPath) || /\/facilities/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85 text-gray-100 '}  ${currentPath == "/public/facilities" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/facilities\/.+/.test(currentPath) || /\/facilities/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85 text-gray-100 '}  ${currentPath == "/public/facilities" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href={`${userID !== 6 && isLoggedIn ? '/facilities' : '/public/facilities'}`}>Facilities</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/community-units\/.+/.test(currentPath) || /\/community-units/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}  ${currentPath == "/public/chu" && 'border-r-2 border-b-gray-50 bg-blue-700/85 text-gray-100'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/community-units\/.+/.test(currentPath) || /\/community-units/.test(currentPath)) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}  ${currentPath == "/public/chu" && 'border-r-2 border-b-gray-50 bg-blue-700/85 text-gray-100'}`}>
                             <Link href={`${userID !== 6 && isLoggedIn ? '/community-units' : '/public/chu'}`}>Community Units</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/user\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/user\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/user'>Users</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/system_setup'><span>System Setup</span></Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/reports'>Reports</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/admin_offices\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${/\/admin_offices\/*/.test(currentPath) && 'border-r-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/admin_offices'>Admin Offices</Link>
                           </li>
 
-                          <li className={`text-lg h-[60px] flex text-center justify-center text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/documentation" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-center w-full justify-center text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/documentation" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                                                   <Link target="_blank"  href='https://kmhfr-docs.vercel.app'>Documentation</Link>
                                                 </li>
 
-                          <li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/downloads" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                          <li className={`text-lg h-[60px] flex text-nowrap w-full items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/downloads" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                             <Link href='/downloads'>Downloads</Link>
                           </li>
                         </ul>
diff --git a/pages/facilities/[id].js b/pages/facilities/[id].js
index 3d9ab17..33e93b1 100644
--- a/pages/facilities/[id].js
+++ b/pages/facilities/[id].js
@@ -908,7 +908,8 @@ console.log("[DEBUG::Query ID]: ", {
             'Authorization': `Bearer ${token}`,
             'Accept-Language': 'en-US,en;q=0.5',
             'Cache-Control': 'no-cache, no-store, max-age=0',
-            'Connection': 'keep-alive'
+            'Connection': 'keep-alive',
+            'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0'
           },
         })
           .then((r) => r.json())
diff --git a/pages/public/facilities/index.js b/pages/public/facilities/index.js
index 9eea9da..203da8e 100644
--- a/pages/public/facilities/index.js
+++ b/pages/public/facilities/index.js
@@ -250,7 +250,7 @@ function Home(props) {
 								{/* Bread Crumbs */}
 
 								
-								<div className={"col-span-5 rounded flex justify-between w-full bg-gray-50  text-black p-4 md:divide-x md:divide-gray-200z items-center border-l-8 " + (true ? "border-gray-600" : "border-red-600")}>
+								<div className={"col-span-5 rounded flex-col md:flex justify-between w-full bg-gray-50  text-black p-4 md:divide-x md:divide-gray-200z items-center border-l-8 " + (true ? "border-gray-600" : "border-red-600")}>
 									<h2 className='flex items-center text-xl font-bold text-black capitalize gap-2'>
 										{'Facilities'}
 									</h2>