Merge pull request #1044 from PlanB-Network/resource-menu-adjustments

fix(resource menu): minor adjustments
PlanB-Network · Jan 8, 2025 · 3d2a977 · 3d2a977
2 parents ea7042a + 3a4eb09
commit 3d2a977
Showing 1 changed file with 41 additions and 32 deletions.
diff --git a/apps/web/src/routes/_content/resources/-components/category-tabs.tsx b/apps/web/src/routes/_content/resources/-components/category-tabs.tsx
@@ -14,43 +14,52 @@ export const CategoryTabs = ({ resourceActiveCategory }: CategoryTabsProps) => {
   const { t } = useTranslation();
 
   return (
-    <nav className="md:flex flex-wrap w-full justify-center items-center md:gap-6 lg:gap-8 xl:gap-10 md:px-5 mb-10 hidden">
-      {RESOURCES_CATEGORIES.map((resourceCategory) => (
-        <Link
-          key={resourceCategory.name}
-          to={`/resources/${resourceCategory.name}`}
-          onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>
-            resourceCategory.unreleased && event.preventDefault()
-          }
-          className={cn(
-            'group',
-            resourceCategory.unreleased
-              ? 'cursor-not-allowed opacity-50'
-              : resourceCategory.name === resourceActiveCategory
-                ? 'scale-125 filter-newOrange1'
-                : '',
-          )}
-        >
-          <div className="flex justify-center items-center p-2 lg:p-4 border border-white rounded-xl">
-            <img
-              src={resourceCategory.image}
-              alt={resourceCategory.name}
-              className="filter-white max-w-7 lg:max-w-9"
-            />
-            <span
+    <nav className="md:flex flex-wrap w-full justify-center items-center md:gap-6 lg:gap-8 xl:gap-10 md:px-5 mb-14 hidden">
+      {RESOURCES_CATEGORIES.map((resourceCategory) => {
+        const categoryTitle = capitalizeFirstWord(
+          t(`resources.${resourceCategory.name}.title`),
+        );
+
+        return (
+          <Link
+            key={resourceCategory.name}
+            to={`/resources/${resourceCategory.name}`}
+            onClick={(event: React.MouseEvent<HTMLAnchorElement>) =>
+              resourceCategory.unreleased && event.preventDefault()
+            }
+            className={cn(
+              'group relative',
+              resourceCategory.unreleased
+                ? 'cursor-not-allowed opacity-50'
+                : resourceCategory.name === resourceActiveCategory &&
+                    'filter-newOrange1',
+            )}
+          >
+            <div
               className={cn(
-                'text-white opacity-0 max-lg:text-sm font-medium leading-[1.43] tracking-[0.17px] max-w-0 inline-flex whitespace-nowrap transition-[max-width_opacity] overflow-hidden ease-in-out duration-700',
-                resourceCategory.name !== resourceActiveCategory &&
-                  'group-hover:max-w-96 group-hover:opacity-100 group-hover:ml-3 lg:group-hover:ml-4 group-focus:max-w-96 group-focus:opacity-100 group-focus:ml-3 lg:group-focus:ml-4',
+                'flex justify-center items-center p-2 lg:p-2.5 border border-white rounded-xl',
+                resourceCategory.name === resourceActiveCategory && 'scale-125',
               )}
             >
-              {capitalizeFirstWord(
-                t(`resources.${resourceCategory.name}.title`),
+              <img
+                src={resourceCategory.image}
+                alt={resourceCategory.name}
+                className="filter-white max-w-[25px]"
+              />
+            </div>
+            <span
+              className={cn(
+                'absolute left-1/2 -translate-x-1/2 body-14px text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 w-[100px] text-center',
+                resourceCategory.name === resourceActiveCategory
+                  ? 'top-16'
+                  : 'top-14',
               )}
+            >
+              {categoryTitle}
             </span>
-          </div>
-        </Link>
-      ))}
+          </Link>
+        );
+      })}
     </nav>
   );
 };