JSFiddle - React, Tailwind, and code Playground

by nilsbh12

HTML

<header>
            <div class = 'logo'>
                Logo
            </div>

            <nav>
                <div class = 'burger'>
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="line3"></div>
                </div>

                <ul class = 'nav-links'>
                    <li><a href = '#'>Link-1</a></li>
                    <li><a href = '#'>Link-2</a></li>
                    <li><a href = '#'>Link-3</a></li>
                    <li><a href = '#'>Link-4</a></li>
                </ul>
            </nav>
        </header>

SCSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

header {
    height: 100px;
    width: 100%;
    background: coral;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid white;

    .logo {
        font-family: 'Prompt-ExtraLight';
        color: #fff;
        font-size: 1.5rem;
        padding-left: 1rem;
    }

    nav {
        .burger {
            cursor: pointer;
            padding-right: 1rem;
            position: relative;
            z-index: 1;
            
            div {
                width: 30px;
                height: 3px;
                background: #fff;
                margin: 5px;
                transition: .3s all ease;
            }
        }

        ul {
            height: 100vh;
            width: 100%;
            background: coral;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            transform: translateX(100%);
            transition: transform 0.3s ease-in;

            li {
                list-style-type: none;
                font-size: 1.5rem;
                font-family: 'Prompt-ExtraLight';
                padding: 1rem 2rem;
                width: 12rem;
                height: auto;
                transition: .2s all ease-in;

                a {
                    text-decoration: none;
                    color: #fff;
                }
                
                &:hover {
                    background: #005a34;
                    transform: translateX(10%);
                }
            }
        }

        .nav-links-active {
            transform: translateX(0);
        }

        .toggle .line1 {
            transform: rotate(-45deg) translate(-5px,6px);
        }

        .toggle .line2 {
            opacity: 0;
        }

       ...

JavaScript

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-links-active');

        burger.classList.toggle('toggle');
    });
};

navSlide();