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

src/components/Layout/MobileMenu/index.tsx

@@ -167,27 +167,29 @@ const MobileMenu = () => {
       </Transition>
       <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">
-          {filteredLinks.slice(0, 4).map((link) => {
+          {filteredLinks
-            const isActive =
+            .slice(0, filteredLinks.length === 5 ? 5 : 4)
-              router.pathname.match(link.activeRegExp) && !isOpen;
+            .map((link) => {
-            return (
+              const isActive =
-              <Link key={`mobile-menu-link-${link.href}`} href={link.href}>
+                router.pathname.match(link.activeRegExp) && !isOpen;
-                <a
+              return (
-                  className={`flex flex-col items-center space-y-1 ${
+                <Link key={`mobile-menu-link-${link.href}`} href={link.href}>
-                    isActive ? 'text-indigo-500' : ''
+                  <a
-                  }`}
+                    className={`flex flex-col items-center space-y-1 ${
-                >
+                      isActive ? 'text-indigo-500' : ''
-                  {cloneElement(
+                    }`}
-                    isActive ? link.svgIconSelected : link.svgIcon,
+                  >
-                    {
+                    {cloneElement(
-                      className: 'h-6 w-6',
+                      isActive ? link.svgIconSelected : link.svgIcon,
-                    }
+                      {
-                  )}
+                        className: 'h-6 w-6',
-                </a>
+                      }
-              </Link>
+                    )}
-            );
+                  </a>
-          })}
+                </Link>
-          {filteredLinks.length > 4 && (
+              );
+            })}
+          {filteredLinks.length > 4 && filteredLinks.length !== 5 && (
             <button
               className={`flex flex-col items-center space-y-1 ${
                 isOpen ? 'text-indigo-500' : ''