JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascript Basics</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
</head>

<body>
    <nav class="navbar">
        <div class="navbar_header">
            <img src="logo.svg" class="navbar_logo" alt="" />
            <div class="navbar_btn">
                <div class="bar bar1"></div>
                <div class="bar bar2"></div>
                <div class="bar bar3"></div>
            </div>
        </div>
        <ul class="navbar_links">
            <li>
                <a href="#" class="navbar_single-link">
                    <i class="fas fa-home">home</i>
                </a>
            </li>
            <li>
                <a href="#" class="navbar_single-link">
                    <i class="fab fa-html5">html5</i>
                </a>
            </li>
            <li>
                <a href="#" class="navbar_single-link">
                    <i class="fab fa-css3">css</i>
                </a>
            </li>
            <li>
                <a href="#" class="navbar_single-link">
                    <i class="fab fa-js">javascript</i>
                </a>
            </li>
        </ul>
    </nav>
    <div class="img-bcg"></div>
    <script src="app.js"></script>
</body>

</html>

CSS

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

.navbar_header {
    background-color: #545454;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 0.3rem solid #6baa75;
}

.navbar_btn {
    border: 5px solid #6baa75;
    align-self: center;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 30px;
    height: 5px;
    margin: 0.5rem;
    background-color: #6baa75;
    transition: all 2s ease;
}

.change .bar1 {
    transform: rotate(-45deg) translate(-10px, 10px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-7px, -8px);
}

.navbar_links {
    list-style: none;
    transition: all 2s ease;
    height: 0;
    overflow: hidden;
}

.navbar_collapse {
    height: 240px;
}

.navbar_single-link {
    display: block;
    background-color: #69747c;
    padding: 1rem;
    font-size: 1.5rem;
    text-decoration: none;
    text-transform: capitalize;
    color: #6baa75;
    transition: all 1s ease;
    cursor: pointer;
}

.navbar_single-link:hover {
    padding-left: 1.5rem;
    background-color: #545454;
}

.img-bcg {
    height: calc(100vh -77.8px);
    background: url("https://unsplash.com/photos/Q0mDOn9gWk8") center/cover no-repeat;
}

JavaScript

const navbarBtn = document.querySelector(".navbar_btn");
const navbarLinks = document.querySelector(".navbar_links");

navbarBtn.addEventListener("click", function() {
    let value = navbarLinks.classList.contains("navbar_collapse");

    if (value) {
        navbarLinks.classList.remove("navbar_collapse");
        navbarBtn.classList.remove("change");
    } else {
        navbarLinks.classList.add("navbar_collapse");
        navbarBtn.classList.add("change");
    }
});

const navHeader = document.querySelector(".navbar_header");
console.log(navHeader.getBoundingClientRect());