Animation for favorites

js/components/FavoriteBar.js

@@ -11,6 +11,7 @@ export function FavoriteBar({teams}) {
     const [isLoading, setIsLoading] = useState(true);
     const [isPulsing, setIsPulsing] = useState(false);
     const headingRef = useRef(null);
+    const favoriteBarRef = useRef(null);
 
     useEffect(() => {
         const savedFavorite = localStorage.getItem('favoriteTeam');
@@ -23,6 +24,14 @@ export function FavoriteBar({teams}) {
         setIsLoading(false);
     }, [teams]);
 
+    useEffect(() => {
+        if (isVisible && favoriteBarRef.current) {
+            favoriteBarRef.current.style.maxHeight = `${favoriteBarRef.current.scrollHeight}px`;
+        } else if (favoriteBarRef.current) {
+            favoriteBarRef.current.style.maxHeight = '0';
+        }
+    }, [isVisible]);
+
     const toggleFavorite = team => {
         if (favorite && favorite.id === team.id) {
             setFavorite(null);
@@ -72,8 +81,7 @@ export function FavoriteBar({teams}) {
                     )}
                 </ButtonGroup>
             </div>
-            {isVisible && (
-                <div className="favorite-bar">
+            <div className={`favorite-bar ${isVisible ? 'visible' : ''}`} ref={favoriteBarRef}>
                 <div>
                     {sortedTeams.map(team => (
                         <div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
@@ -89,7 +97,6 @@ export function FavoriteBar({teams}) {
                     ))}
                 </div>
             </div>
-            )}
         </div>
     );
 }

public/static/css/tournament.css

@@ -46,3 +46,13 @@
 .pulse-animation {
     animation: pulse 1s infinite;
 }
+
+.favorite-bar {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.7s ease-in-out;
+}
+
+.favorite-bar.visible {
+    max-height: none;
+}