Skip to content

Instantly share code, notes, and snippets.

@emmabostian emmabostian/index.js
Created Jan 12, 2020

Embed
What would you like to do?
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useSpring } from "react-spring";
import { MenuRight, MenuFull } from "./Menu";
import "./styles.css";
function App() {
const [rightMenuVisible, setRightMenuVisible] = useState(false);
const [fullMenuVisible, setFullMenuVisible] = useState(false);
const rightMenuAnimation = useSpring({
opacity: rightMenuVisible ? 1 : 0,
transform: rightMenuVisible ? `translateX(0)` : `translateX(100%)`
});
const fullMenuAnimation = useSpring({
transform: fullMenuVisible ? `translateY(0)` : `translateY(-100%)`,
opacity: fullMenuVisible ? 1 : 0
});
return (
<div className="App">
<button
className="menu-button"
onClick={() => setRightMenuVisible(!rightMenuVisible)}
>
{rightMenuVisible ? "Close" : "Side Menu"}
</button>
<button
className="menu-button menu-button--full"
onClick={() => setFullMenuVisible(!fullMenuVisible)}
>
{fullMenuVisible ? "Close" : "Full Menu"}
</button>
<MenuRight style={rightMenuAnimation} />
<MenuFull style={fullMenuAnimation} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.