Sliding Menu In React

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.


Sliding Menu In React
Demo

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;

Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image