Skip to content

fix: adjust navbar breakpoints to lg to prevent overflow #3272 #3324

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kasya merged 6 commits into from
Jan 17, 2026
+62 −57
Merged

fix: adjust navbar breakpoints to lg to prevent overflow #3272 #3324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
73c025a
fix: adjust navbar breakpoints to lg to prevent overflow #3272
harshita8120 Jan 13, 2026
ce00d23
Merge remote-tracking branch 'upstream/main' into fix/medium-screen-n…
harshita8120 Jan 13, 2026
1846885
fix: synchronize JS breakpoint constant and test mocks with lg breakp…
harshita8120 Jan 13, 2026
f61e6ef
fixed the issue of sponsor and star buttons showing twice on medium s…
harshita8120 Jan 16, 2026
e58c81c
changed comments
harshita8120 Jan 16, 2026
e482e48
Update header buttons for small and mid screen sizes
kasya Jan 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 34 additions & 31 deletions frontend/__tests__/unit/pages/Header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,30 +104,25 @@ jest.mock('components/UserMenu', () => {
})

// Mock constants
jest.mock('utils/constants', () => ({
desktopViewMinWidth: 768,
headerLinks: [
{
text: 'Home',
href: '/',
},
{
text: 'About',
href: '/about',
},
{
text: 'Services',
submenu: [
{ text: 'Web Development', href: '/services/web' },
{ text: 'Mobile Development', href: '/services/mobile' },
],
},
{
text: 'Contact',
href: '/contact',
},
],
}))
jest.mock('utils/constants', () => {
const actual = jest.requireActual('utils/constants')
return {
...actual,
desktopViewMinWidth: 768,
headerLinks: [
{ text: 'Home', href: '/' },
{ text: 'About', href: '/about' },
{
text: 'Services',
submenu: [
{ text: 'Web Development', href: '/services/web' },
{ text: 'Mobile Development', href: '/services/mobile' },
],
},
{ text: 'Contact', href: '/contact' },
],
}
})

// Mock utility function
jest.mock('utils/utility', () => ({
Expand Down Expand Up @@ -223,8 +218,9 @@ describe('Header Component', () => {
const brandTexts = screen.getAllByText('Nest')
expect(brandTexts.length).toBe(2) // One in desktop header, one in mobile menu

const userMenu = screen.getByTestId('user-menu')
expect(userMenu).toHaveAttribute('data-github-auth', 'true')
const userMenus = screen.getAllByTestId('user-menu')
expect(userMenus.length).toBeGreaterThanOrEqual(1)
expect(userMenus[0]).toHaveAttribute('data-github-auth', 'true')
})

it('renders successfully with GitHub auth disabled', () => {
Expand All @@ -238,8 +234,9 @@ describe('Header Component', () => {
const brandTexts = screen.getAllByText('Nest')
expect(brandTexts.length).toBe(2)

const userMenu = screen.getByTestId('user-menu')
expect(userMenu).toHaveAttribute('data-github-auth', 'false')
const userMenus = screen.getAllByTestId('user-menu')
expect(userMenus.length).toBeGreaterThanOrEqual(1)
expect(userMenus[0]).toHaveAttribute('data-github-auth', 'false')
})
})

Expand Down Expand Up @@ -453,7 +450,9 @@ describe('Header Component', () => {
it('renders UserMenu component', () => {
renderWithSession(<Header isGitHubAuthEnabled />)

expect(screen.getByTestId('user-menu')).toBeInTheDocument()
const userMenus = screen.getAllByTestId('user-menu')
expect(userMenus.length).toBeGreaterThanOrEqual(1)
expect(userMenus[0]).toBeInTheDocument()
})

it('renders ModeToggle component', () => {
Expand Down Expand Up @@ -593,13 +592,17 @@ describe('Header Component', () => {
it('passes isGitHubAuthEnabled prop to UserMenu correctly when true', () => {
renderWithSession(<Header isGitHubAuthEnabled />)

expect(screen.getByTestId('user-menu')).toHaveAttribute('data-github-auth', 'true')
const userMenus = screen.getAllByTestId('user-menu')
expect(userMenus.length).toBeGreaterThanOrEqual(1)
expect(userMenus[0]).toHaveAttribute('data-github-auth', 'true')
})

it('passes isGitHubAuthEnabled prop to UserMenu correctly when false', () => {
renderWithSession(<Header isGitHubAuthEnabled={false} />)

expect(screen.getByTestId('user-menu')).toHaveAttribute('data-github-auth', 'false')
const userMenus = screen.getAllByTestId('user-menu')
expect(userMenus.length).toBeGreaterThanOrEqual(1)
expect(userMenus[0]).toHaveAttribute('data-github-auth', 'false')
})
})

Expand Down
54 changes: 28 additions & 26 deletions frontend/src/components/Header.tsx
View file
Open in desktop
Copy link
Collaborator

@kasya kasya Jan 16, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works good overall 👍🏼

One thing I noticed is that when we are at a 1024 and collaps some of the menus - the buttons are now still showing in the Header until 768 breakpoint. However, we also have them in the menu on the side. This causes Star and Sponsor buttons to show up in both places.

Do you think you can update that?

Image

Copy link
Contributor Author

@harshita8120 harshita8120 Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sure, I'll shortly update this.

Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
'use client'
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'
Expand All @@ -22,7 +21,6 @@ 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)

Expand Down Expand Up @@ -58,7 +56,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE

return (
<header className="bg-owasp-blue fixed inset-x-0 top-0 z-50 w-full shadow-md dark:bg-slate-800">
<div className="flex h-16 w-full items-center px-4 max-md:justify-between" id="navbar-sticky">
<div className="flex h-16 w-full items-center px-4 max-lg:justify-between" id="navbar-sticky">
{/* Logo */}
<Link href="/" onClick={() => setMobileMenuOpen(false)}>
<div className="flex h-full items-center">
Expand All @@ -78,7 +76,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
</div>
</Link>
{/* Desktop Header Links */}
<div className="hidden flex-1 justify-between rounded-lg pl-6 font-medium md:block">
<div className="hidden flex-1 justify-between rounded-lg pl-6 font-medium lg:block">
<div className="flex justify-start pl-6">
{headerLinks
.filter((link) => {
Expand Down Expand Up @@ -107,28 +105,32 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
</div>
</div>
<div className="flex items-center justify-normal gap-4">
<NavButton
href="https://github.com/OWASP/Nest"
defaultIcon={FaRegStar}
hoverIcon={FaSolidStar}
defaultIconColor="#FDCE2D"
hoverIconColor="#FDCE2D"
text="Star"
className="hidden"
/>
<div className="hidden md:flex">
<NavButton
href="https://github.com/OWASP/Nest"
defaultIcon={FaRegStar}
hoverIcon={FaSolidStar}
defaultIconColor="#FDCE2D"
hoverIconColor="#FDCE2D"
text="Star"
/>
</div>

<NavButton
href="https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest"
defaultIcon={FaRegHeart}
hoverIcon={FaSolidHeart}
defaultIconColor="#b55f95"
hoverIconColor="#d9156c"
text="Sponsor"
className="hidden"
/>
{!isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
<div className="hidden md:flex">
<NavButton
href="https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest"
defaultIcon={FaRegHeart}
hoverIcon={FaSolidHeart}
defaultIconColor="#b55f95"
hoverIconColor="#d9156c"
text="Sponsor"
/>
</div>
<div className="hidden md:flex">
<UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />
</div>
<ModeToggle />
<div className="md:hidden">
<div className="lg:hidden">
<Button
onPress={toggleMobileMenu}
className="flex h-11 w-11 items-center justify-center bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus:outline-hidden"
Expand Down Expand Up @@ -211,8 +213,8 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
)}
</div>

<div className="flex flex-col gap-y-2">
{isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
<div className="flex flex-col gap-y-2 md:hidden">
<UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />
<NavButton
href="https://github.com/OWASP/Nest"
defaultIcon={FaRegStar}
Expand Down