Skip to content

Fix: Prevent infinite loop in PrimaryMenu mobile view #297

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
colinmurphy merged 1 commit into from
Feb 24, 2025
Merged

Fix: Prevent infinite loop in PrimaryMenu mobile view #297

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
173 changes: 85 additions & 88 deletions src/components/primary-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,100 @@
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { forwardRef } from "react";
import Link from "@/components/link";
import { classNames } from "@/utils/strings";
import { useState, useCallback } from "react";
import CustomLink from "./link";

const navItemClass =
"text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1";
export default function PrimaryMenu() {
const [isMenuOpen, setIsMenuOpen] = useState(false);

const CustomLink = forwardRef((props, reference) => {
return (
<li>
<Link {...props} ref={reference} noDefaultStyles />
</li>
);
});
// Use useCallback to memoize the toggle handler
const handleMenuToggle = useCallback(() => {
setIsMenuOpen((previous) => !previous);
}, []);

const navItemClass =
"text-gray-200 hover:text-white transition-colors duration-200";

export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
return (
<nav className={classNames("flex items-center space-x-4", className)}>
<ul className="hidden flex-row space-x-4 pl-4 md:flex">
<li key="docs" className={navItemClass}>
<Link
className="block px-1"
href="/docs/"
noDefaultStyles
activeClassName="text-purple-500"
>
Docs
</Link>
</li>
<li key="blog" className={navItemClass}>
<Link
className="block px-1"
href="/blog/"
noDefaultStyles
activeClassName="text-purple-500"
>
Blog
</Link>
</li>
<li key="showcase" className={navItemClass}>
<Link
className="block px-1"
href="/showcase/"
noDefaultStyles
activeClassName="text-purple-500"
>
Showcase
</Link>
</li>
</ul>
<nav className="flex items-center gap-8">
<div className="hidden items-center gap-8 md:flex">
<CustomLink
className={navItemClass}
noDefaultStyles
href="/docs/"
activeClassName="text-purple-500"
>
Docs
</CustomLink>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/blog/"
activeClassName="text-purple-500"
>
Blog
</CustomLink>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/showcase/"
activeClassName="text-purple-500"
>
Showcase
</CustomLink>
</div>

<Menu>
<MenuButton
className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden"
onClick={() => setIsMenuOpen(!isMenuOpen)}
onClick={handleMenuToggle}
>
<span className="sr-only hidden group-data-open:block">
Open main nav
<span className="sr-only">
{isMenuOpen ? "Close menu" : "Open menu"}
</span>
<XMarkIcon className="hidden size-6 group-data-open:block" />
<span className="sr-only group-data-open:hidden">Open main nav</span>
<Bars3Icon className="size-6 group-data-open:hidden" />
{isMenuOpen ? (
<XMarkIcon className="size-6" />
) : (
<Bars3Icon className="size-6" />
)}
</MenuButton>
<MenuItems
as="ul"
transition
className="container-blur-bg absolute top-[84.5px] -left-4 flex w-full origin-top flex-col items-center justify-around gap-4 border-b-[.5px] border-gray-400 bg-gray-900/80 py-4 text-lg transition duration-200 ease-out focus-within:outline-hidden data-closed:-translate-y-10 data-closed:opacity-0 md:hidden"
>
<MenuItem
as={CustomLink}
key="docs"
className={navItemClass}
noDefaultStyles
href="/docs/"
activeClassName="text-purple-500"
>
Docs
</MenuItem>
<MenuItem
as={CustomLink}
key="blog"
className={navItemClass}
noDefaultStyles
href="/blog/"
activeClassName="text-purple-500"
>
Blog
</MenuItem>
<MenuItem
as={CustomLink}
key="showcase"
className={navItemClass}
noDefaultStyles
href="/showcase/"
activeClassName="text-purple-500"

{isMenuOpen && (
<MenuItems
static
className="absolute top-[84.5px] -left-4 flex w-full flex-col items-center justify-around gap-4 border-b-[.5px] border-gray-400 bg-gray-900/80 py-4 text-lg"
>
Showcase
</MenuItem>
</MenuItems>
<MenuItem>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/docs/"
activeClassName="text-purple-500"
>
Docs
</CustomLink>
</MenuItem>
<MenuItem>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/blog/"
activeClassName="text-purple-500"
>
Blog
</CustomLink>
</MenuItem>
<MenuItem>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/showcase/"
activeClassName="text-purple-500"
>
Showcase
</CustomLink>
</MenuItem>
</MenuItems>
)}
</Menu>
</nav>
);
Expand Down