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,24 +81,22 @@ export function FavoriteBar({teams}) {
                     )}
                 </ButtonGroup>
             </div>
-            {isVisible && (
-                <div className="favorite-bar">
-                    <div>
-                        {sortedTeams.map(team => (
-                            <div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
-                                <Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
-                                    <FontAwesomeIcon
-                                        icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
-                                    />
-                                </Button>
-                                <span>
-                                    {team.name}
-                                </span>
-                            </div>
-                        ))}
-                    </div>
+            <div className={`favorite-bar ${isVisible ? 'visible' : ''}`} ref={favoriteBarRef}>
+                <div>
+                    {sortedTeams.map(team => (
+                        <div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
+                            <Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
+                                <FontAwesomeIcon
+                                    icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
+                                />
+                            </Button>
+                            <span>
+                                {team.name}
+                            </span>
+                        </div>
+                    ))}
                 </div>
-            )}
+            </div>
         </div>
     );
-}
+}

public/static/css/tournament.css

@@ -19,7 +19,7 @@
 }
 
 .match:hover {
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
 }
 
 .match:hover > div {
@@ -45,4 +45,14 @@
 
 .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;
+}