Skip to content

fix: mobile nav issues #310

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
moonmeister merged 5 commits into from
Mar 7, 2025
Merged

fix: mobile nav issues #310

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
10542fb
revert: fran changes
moonmeister Mar 4, 2025
802e1f9
Fix mobile nav width styles
kellenmace Mar 5, 2025
d3fad64
Fix menu z-index issue
kellenmace Mar 6, 2025
8c93d90
refactor: use correct popeover for better keyboard nav and fixing oth…
moonmeister Mar 7, 2025
086cbac
Merge branch 'fix-mobile-nav' of github.com:wpengine/faustjs.org into…
moonmeister Mar 7, 2025
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
177 changes: 88 additions & 89 deletions src/components/primary-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,104 +1,103 @@
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { useState, useCallback } from "react";
import CustomLink from "./link";
import { forwardRef } from "react";
import Link from "@/components/link";
import { classNames } from "@/utils/strings";

export default function PrimaryMenu() {
const [isMenuOpen, setIsMenuOpen] = useState(false);

// Use useCallback to memoize the toggle handler
const handleMenuToggle = useCallback(() => {
setIsMenuOpen((previous) => !previous);
}, []);

const handleMenuItemClick = useCallback(() => {
setIsMenuOpen(false);
}, []);

const navItemClass =
"text-gray-200 hover:text-white transition-colors duration-200";
const navItemClass =
"text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1";

const CustomLink = forwardRef((props, reference) => {
return (
<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>
<li>
<Link {...props} ref={reference} noDefaultStyles />
</li>
);
});

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>
<Menu>
<MenuButton
className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden"
onClick={handleMenuToggle}
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<span className="sr-only">
{isMenuOpen ? "Close menu" : "Open menu"}
<span className="sr-only hidden group-data-open:block">
Open main nav
</span>
{isMenuOpen ? (
<XMarkIcon className="size-6" />
) : (
<Bars3Icon className="size-6" />
)}
<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" />
</MenuButton>

{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"
<MenuItems
as="ul"
transition
className="container-blur-bg absolute top-[84.5px] right-0 left-0 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"
>
<MenuItem onClick={handleMenuItemClick}>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/docs/"
activeClassName="text-purple-500"
>
Docs
</CustomLink>
</MenuItem>
<MenuItem onClick={handleMenuItemClick}>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/blog/"
activeClassName="text-purple-500"
>
Blog
</CustomLink>
</MenuItem>
<MenuItem onClick={handleMenuItemClick}>
<CustomLink
className={navItemClass}
noDefaultStyles
href="/showcase/"
activeClassName="text-purple-500"
>
Showcase
</CustomLink>
</MenuItem>
</MenuItems>
)}
Showcase
</MenuItem>
</MenuItems>
</Menu>
</nav>
);
Expand Down