Skip to content

Commit f038c59

Browse files
ishanBahugunakasya
andauthored
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>
1 parent 9107a41 commit f038c59

File tree

2 files changed

+34
-1
lines changed

2 files changed

+34
-1
lines changed

frontend/src/components/Header.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { faHeart as faSolidHeart } from '@fortawesome/free-solid-svg-icons'
66
import { faStar as faSolidStar } from '@fortawesome/free-solid-svg-icons'
77
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
88
import { Button } from '@heroui/button'
9+
import { useIsMobile } from 'hooks/useIsMobile'
910
import Image from 'next/image'
1011
import Link from 'next/link'
1112
import { usePathname } from 'next/navigation'
@@ -19,6 +20,7 @@ import UserMenu from 'components/UserMenu'
1920

2021
export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthEnabled: boolean }) {
2122
const pathname = usePathname()
23+
const isMobile = useIsMobile()
2224
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
2325
const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen)
2426

@@ -128,7 +130,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
128130
text="Sponsor"
129131
className="hidden"
130132
/>
131-
<UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />
133+
{!isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
132134
<ModeToggle />
133135
<div className="md:hidden">
134136
<Button
@@ -224,6 +226,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
224226
</div>
225227

226228
<div className="flex flex-col gap-y-2">
229+
{isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
227230
<NavButton
228231
href="https://github.com/OWASP/Nest"
229232
defaultIcon={faRegularStar}

frontend/src/hooks/useIsMobile.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useEffect, useState } from 'react'
2+
import { desktopViewMinWidth } from 'utils/constants'
3+
4+
export const useIsMobile = () => {
5+
const [isMobile, setIsMobile] = useState(false)
6+
7+
useEffect(() => {
8+
// check whether the browser supports matchMedia API
9+
if (typeof window.matchMedia !== 'function') return
10+
11+
const mediaQuery = window.matchMedia(`(max-width: ${desktopViewMinWidth - 1}px)`)
12+
13+
const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
14+
setIsMobile(e.matches)
15+
}
16+
17+
handleChange(mediaQuery)
18+
19+
if (mediaQuery.addEventListener) {
20+
mediaQuery.addEventListener('change', handleChange)
21+
return () => mediaQuery.removeEventListener('change', handleChange)
22+
} else {
23+
// Safari browser < 14 fallback
24+
mediaQuery.addListener(handleChange)
25+
return () => mediaQuery.removeListener(handleChange)
26+
}
27+
}, [])
28+
29+
return isMobile
30+
}

0 commit comments

Comments
 (0)