Alt Text Welcome to part-14 of the series. In the last part we created menu for the Mobile view and in this part we will add functionality to it, to show the left or the right sidebar.

After a bit of research on the internet, i found this article which i will follow to create the menu.

The CSS-in-JS library of styled component is very much required for this part, so we will stop the development server and npm install it.

    npm install --save styled-components

Next, we will create the Burger and Menu folders in components and the following files.

Burger and MenuBurger and Menu

Next, in the Burger.js file put the below content. It is used to show three horizontal lines, which forms our hamburger menu. We are also getting two props in this component.

Burger.jsBurger.js

Put the below styles in Burger.styled.js file. Here, we are hiding it at larger screen. We are also using open props for some transition, when it is clicked.

    import styled from 'styled-components';

    export const StyledBurger = styled.button`

        position: absolute;
        top: 10%;
        left: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 2rem;
        height: 2rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 200;

    &:focus {
            outline: none;
        }

    div {
            width: 2rem;
            height: 0.25rem;
            background: # 0A0A0A;
            border-radius: 10px;
            transition: all 0.3s linear;
            position: relative;
            transform-origin: 1px;
            :first-child {
                transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
                }

    :nth-child(2) {
                opacity: ${({ open }) => open ? '0' : '1'};
                transform: ${({ open }) => open ? 'translateX(20px)' : 'translateX(0)'};
            }

    :nth-child(3) {
                transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
            }

    [@media](http://twitter.com/media) (min-width: 992px) {
                display:none;
            }
    }
    
`;

    export default StyledBurger;

Next, let’s update our Menu.js file. First, write the import statement followed by the GraphQL query, which we are going to use to show the only component now in our left menu ie TagList.

Menu.jsMenu.js

Next, we will use a styled component StyledMenu which will be open when the props open is true. We are using the component TagList inside it.

Menu.jsMenu.js

Next, let’s update the styles in Menu.styled.js. Here, we are again using the open props to show the menu.

Menu.styled.jsMenu.styled.js

We also needs to update the below in taglist.module.css as it was not showing good on smaller scrrens.

taglist.module.csstaglist.module.css

Next, let’s update our index.js file to show these two component. First, let’s import them at the top.

index.jsindex.js

Then we will first add a new state variable and it’s function by useState hooks. After that we replace our logo button with the Burger and Menu component.

index.jsindex.js

Now, in the mobile view we will get the hamburger menu which will show the Menu on click.

MenuMenu

This completes part-14 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.