fix: fixed animations in navbar (#415)

This pull request makes a small UI improvement to the navigation buttons
in the `ImageHeader` component. The change enhances the user experience
by allowing button labels to expand smoothly when hovered, making longer
labels more readable.

- UI enhancement:
* Updated the navigation button labels in `image-header.tsx` to truncate
long labels by default and smoothly expand their width on hover for
better readability.

Author: ArnavSharma005

components/image-header.tsx

@@ -83,10 +83,17 @@ export default function ImageHeader({
               <li key={index}>
                 <Button
                   asChild
-                  className="rounded-full px-4 py-2 text-shade-dark transition-colors duration-300"
+                  className="group rounded-full px-4 py-2 text-shade-dark transition-colors duration-300"
                   variant="ghost"
                 >
-                  <Link href={href}>{label}</Link>
+                  <Link href={href}>
+                    <span
+                      className="block max-w-[10rem] truncate transition-all duration-300 ease-in-out group-hover:max-w-[20rem]"
+                      style={{ minWidth: '0' }}
+                    >
+                      {label}
+                    </span>
+                  </Link>
                 </Button>
               </li>
             ))}