fix(ui): show 5 icons when possible on mobile menu (#3298)

This commit is contained in:
Ryan Cohen
2023-01-29 16:27:09 +09:00
committed by GitHub
parent 9d10e6a88c
commit 7040da1334

View File

@@ -167,7 +167,9 @@ const MobileMenu = () => {
</Transition> </Transition>
<div className="padding-bottom-safe border-t border-gray-600 bg-gray-800 bg-opacity-90 backdrop-blur"> <div className="padding-bottom-safe border-t border-gray-600 bg-gray-800 bg-opacity-90 backdrop-blur">
<div className="flex h-full items-center justify-between px-6 py-4 text-gray-100"> <div className="flex h-full items-center justify-between px-6 py-4 text-gray-100">
{filteredLinks.slice(0, 4).map((link) => { {filteredLinks
.slice(0, filteredLinks.length === 5 ? 5 : 4)
.map((link) => {
const isActive = const isActive =
router.pathname.match(link.activeRegExp) && !isOpen; router.pathname.match(link.activeRegExp) && !isOpen;
return ( return (
@@ -187,7 +189,7 @@ const MobileMenu = () => {
</Link> </Link>
); );
})} })}
{filteredLinks.length > 4 && ( {filteredLinks.length > 4 && filteredLinks.length !== 5 && (
<button <button
className={`flex flex-col items-center space-y-1 ${ className={`flex flex-col items-center space-y-1 ${
isOpen ? 'text-indigo-500' : '' isOpen ? 'text-indigo-500' : ''