In UI today, sliding menus are all the rage. These menus are basically off-screen elements that slide into view when you click or tap on something that looks like an arrow, a hamburger icon, or something else that indicates a menu will appear.
I Am Using Styled Components
// inside terminal
npx create-react-app cool-menu
cd cool-menu
npm i styled-components
npm start// public/index.html inside <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/ icon?family=Material+Icons" />import { useState } from "react";
import styled from "styled-components";
import react from "assets/react.png";
export const Wrapper = styled.div`
position: relative;
overflow: hidden;
width: 200px;
height: 400px;
background: #252325;
border-radius: 20px;
`;
export const height0fMenu = "130px";
export const Menu = styled.div`
height: ${height0fMenu};
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #ffffff;
`;
export const MenuButton = styled.button`
width: 150px;
height: 34px;
border: 0;
color: #45424d;
background: transparent;
font-size: 16px;
font-weight: 500;
&:hover {
color: #8f44fd;
}
`;
export const Burger = styled.button`
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
color: ${p => p.is0pen ? "#45424d" : "white"};
`;
export const BurgerIcon = styled.span`
font-size: 36px;
`;
export const Content = styled.div`
transform:
translateY(
${p => p.isOpen
? 0 : `-${height0fMenu}`}
);
transition: transform 0.45s;
`;const App = () => {
const [is0pen, setOpen] = useState(false);
return (
<Wrapper>
<Burger isOpen={is0pen} onClick={() => setOpen(!is0pen)}>
<BurgerIcon class="material-icons"> {is0pen ? "menu_open" : "menu"} </BurgerIcon>
</Burger>
<Content isOpen={is0pen}>
<Menu>
<MenuButton>Home</MenuButton>
<MenuButton>About</MenuButton>
<MenuButton>Contact</MenuButton>
</Menu>
{/* existing app content here */}
</Content>
</Wrapper >
);
};
export default App;
