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

Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion src/components/docs-layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function DocumentPage({ children, metadata }) {
/>
<Disclosure
as="div"
className="sticky top-[84px] z-10 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-xs md:hidden"
className="sticky top-[84px] z-5 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-xs md:hidden"
>
<DisclosureButton className="group flex items-center rounded-md px-2 py-1.5 text-white/70 hover:text-white">
<ChevronDownIcon className="relative z-20 hidden h-4 w-4 group-data-open:inline" />
Expand Down
187 changes: 94 additions & 93 deletions src/components/primary-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,106 @@
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import {
Popover,
PopoverButton,
PopoverPanel,
CloseButton,
} 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>
<CloseButton as={Link} {...props} ref={reference} noDefaultStyles />
</li>
);
});

<Menu>
<MenuButton
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>
<Popover>
<PopoverButton
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" />
)}
</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"
<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" />
</PopoverButton>
<PopoverPanel
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"
>
<CustomLink
key="docs"
className={navItemClass}
noDefaultStyles
href="/docs/"
activeClassName="text-purple-500"
>
Docs
</CustomLink>
<CustomLink
key="blog"
className={navItemClass}
noDefaultStyles
href="/blog/"
activeClassName="text-purple-500"
>
Blog
</CustomLink>
<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>
)}
</Menu>
Showcase
</CustomLink>
</PopoverPanel>
</Popover>
</nav>
);
}