Move Sign in button from Header to Side nav when on small devices. (#2231)

* moved the signin button to nav bar on small screens and added useIsMobile custom hook

* moved the signin button to nav bar on small screens and added useIsMobile custom hook

* fixed useIsMobile hook to support all browsers

* made the useIsMobile hook compatible with old browsers

* fixed error

---------

Co-authored-by: Kate Golovanova <kate@kgthreads.com>

Author: ishanBahuguna

frontend/src/components/Header.tsx

@@ -6,6 +6,7 @@ import { faHeart as faSolidHeart } from '@fortawesome/free-solid-svg-icons'
 import { faStar as faSolidStar } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
+import { useIsMobile } from 'hooks/useIsMobile'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -19,6 +20,7 @@ import UserMenu from 'components/UserMenu'
 
 export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthEnabled: boolean }) {
   const pathname = usePathname()
+  const isMobile = useIsMobile()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen)
 
@@ -128,7 +130,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
             text="Sponsor"
             className="hidden"
           />
-          <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />
+          {!isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
           <ModeToggle />
           <div className="md:hidden">
             <Button
@@ -224,6 +226,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
           </div>
 
           <div className="flex flex-col gap-y-2">
+            {isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
             <NavButton
               href="https://github.com/OWASP/Nest"
               defaultIcon={faRegularStar}

frontend/src/hooks/useIsMobile.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+import { desktopViewMinWidth } from 'utils/constants'
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    // check whether the browser supports matchMedia API
+    if (typeof window.matchMedia !== 'function') return
+
+    const mediaQuery = window.matchMedia(`(max-width: ${desktopViewMinWidth - 1}px)`)
+
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsMobile(e.matches)
+    }
+
+    handleChange(mediaQuery)
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange)
+      return () => mediaQuery.removeEventListener('change', handleChange)
+    } else {
+      // Safari browser < 14 fallback
+      mediaQuery.addListener(handleChange)
+      return () => mediaQuery.removeListener(handleChange)
+    }
+  }, [])
+
+  return isMobile
+}