Skip to content

Instantly share code, notes, and snippets.

@paigen11
Last active April 12, 2020 22:34
Show Gist options
  • Save paigen11/fcb69429a186b1282a060c5669c94f0f to your computer and use it in GitHub Desktop.
Save paigen11/fcb69429a186b1282a060c5669c94f0f to your computer and use it in GitHub Desktop.
Sample JavaScript code of React Transition Group's CSSTransition component in a working demo with an animated navbar
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { NavLink } from 'react-router-dom';
import TmdbIcon from '../../assets/tmdb-power.png';
import './Sidebar.scss';
const Sidebar = () => {
const [expandedLinks, setExpandedLinks] = useState(false);
const toggleLinks = () => {
setExpandedLinks(!expandedLinks);
};
return (
<>
<ul className="sidebar-top">
<div className="sidebar-links">
<li className="sidebar-link bars" onClick={toggleLinks}>
<i className="fa fa-bars" aria-hidden="true" />
</li>
<li
className="sidebar-link-logo"
onClick={() => setExpandedLinks(false)}
>
<NavLink to="/">
<img src={TmdbIcon} alt="logo" />
</NavLink>
</li>
</div>
</ul>
<CSSTransition
in={expandedLinks}
timeout={300}
classNames="visible"
unmountOnExit
>
<div>
<li className="sidebar-link" onClick={() => setExpandedLinks(false)}>
<NavLink to="/nowplaying">Now Playing</NavLink>
</li>
<li className="sidebar-link" onClick={() => setExpandedLinks(false)}>
<NavLink to="/upcoming">Coming Soon</NavLink>
</li>
<li className="sidebar-link" onClick={() => setExpandedLinks(false)}>
<NavLink to="/search">Movie Search</NavLink>
</li>
<li className="sidebar-link" onClick={() => setExpandedLinks(false)}>
<NavLink to="/genres">Genres</NavLink>
</li>
</div>
</CSSTransition>
</>
);
};
export default Sidebar;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment