From ab7cfc60419f6de188937b2194340b1b1af75036 Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Fri, 19 May 2023 19:37:56 -0400
Subject: [PATCH] Hotfix (#334)

* style(NavLinks.jsx): add 'as="div"' to Menu.Item components
refactor(Nav.jsx): remove unused code and add isMobile function to check if user is on mobile device

* conditionally render menuitem with search

---------

Co-authored-by: stunt_pilot <twitchstuntpilot@gmail.com>
---
 client/src/components/Nav/NavLinks.jsx | 16 ++++----
 client/src/components/Nav/index.jsx    | 52 ++++++++++++++++----------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/client/src/components/Nav/NavLinks.jsx b/client/src/components/Nav/NavLinks.jsx
index b1bcf50848..bea98093cd 100644
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@@ -69,10 +69,12 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
-                <Menu.Item>
-                  {!!isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
-                </Menu.Item>
-                <Menu.Item>
+                {isSearchEnabled && (
+                  <Menu.Item>
+                    <SearchBar clearSearch={clearSearch} />
+                  </Menu.Item>
+                )}
+                <Menu.Item as="div">
                   <NavLink
                     className={cn(
                       'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
@@ -84,10 +86,10 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                   />
                 </Menu.Item>
                 <div className="my-1.5 h-px bg-white/20" role="none" />
-                <Menu.Item>
+                <Menu.Item as="div">
                   <DarkMode />
                 </Menu.Item>
-                <Menu.Item>
+                <Menu.Item as="div">
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
                     svg={() => <TrashIcon />}
@@ -96,7 +98,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                   />
                 </Menu.Item>
                 <div className="my-1.5 h-px bg-white/20" role="none" />
-                <Menu.Item>
+                <Menu.Item as="div">
                   <Logout />
                 </Menu.Item>
               </Menu.Items>
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index ac3ff9dc7a..177acd0175 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -13,25 +13,25 @@ import { useAuthContext } from '~/hooks/AuthContext';
 import { ThemeContext } from '~/hooks/ThemeContext';
 import { cn } from '~/utils/';
 
-import resolveConfig from 'tailwindcss/resolveConfig';
-const tailwindConfig = import('../../../tailwind.config.cjs');
-const fullConfig = resolveConfig(tailwindConfig);
+// import resolveConfig from 'tailwindcss/resolveConfig';
+// const tailwindConfig = import('../../../tailwind.config.cjs');
+// const fullConfig = resolveConfig(tailwindConfig);
 
-export const getBreakpointValue = (value) =>
-  +fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
+// export const getBreakpointValue = (value) =>
+//   +fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
 
-export const getCurrentBreakpoint = () => {
-  let currentBreakpoint;
-  let biggestBreakpointValue = 0;
-  for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
-    const breakpointValue = getBreakpointValue(breakpoint);
-    if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
-      biggestBreakpointValue = breakpointValue;
-      currentBreakpoint = breakpoint;
-    }
-  }
-  return currentBreakpoint;
-};
+// export const getCurrentBreakpoint = () => {
+//   let currentBreakpoint;
+//   let biggestBreakpointValue = 0;
+//   for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
+//     const breakpointValue = getBreakpointValue(breakpoint);
+//     if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
+//       biggestBreakpointValue = breakpointValue;
+//       currentBreakpoint = breakpoint;
+//     }
+//   }
+//   return currentBreakpoint;
+// };
 
 export default function Nav({ navVisible, setNavVisible }) {
   const [isHovering, setIsHovering] = useState(false);
@@ -146,9 +146,23 @@ export default function Nav({ navVisible, setNavVisible }) {
     setNavVisible((prev) => !prev);
   };
 
+  // useEffect(() => {
+  //   let currentBreakpoint = getCurrentBreakpoint();
+  //   if (currentBreakpoint === 'sm') {
+  //     setNavVisible(false);
+  //   } else {
+  //     setNavVisible(true);
+  //   }
+  // }, [conversationId, setNavVisible]);
+
+  const isMobile = () => {
+    const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
+    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+    return mobileRegex.test(userAgent);
+  };
+
   useEffect(() => {
-    let currentBreakpoint = getCurrentBreakpoint();
-    if (currentBreakpoint === 'sm') {
+    if (isMobile()) {
       setNavVisible(false);
     } else {
       setNavVisible(true);