Nice mobile menu

by Ravshanbek778

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidorenko Blog</title>
    <link rel="stylesheet" href="main_style.css">
</head>
<body>
    <div class="page">
        <div class="header">
            <nav>
                <div class="menu-btn">
                    <div class="line line--1"></div>
                    <div class="line line--2"></div>
                    <div class="line line--3"></div>
                </div>
                <div class = "nav-links">
                    <a href="" class="link">Home</a>
                    <a href="" class="link">Посты</a>
                    <a href="" class="link">Контакты</a>
                    <a href="" class="link">Обо мне</a>
                </div>
            </nav>
            <span class="blog-name">
                Blog by Sidorenko
            </span>
            <div class="theme-switcher"> 
            </div>
        </div>
        <div class="main"></div>
        <div class="footer"></div>

    </div>
    <script src="menu_app.js"></script>
</body>
</html>

CSS

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-regular.woff') format('woff'),
    url('fonts/gilroy-regular.woff2') format('woff2'),
    url('fonts/gilroy-regular.ttf') format('ttf');
}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-bold.woff') format('woff'),
    url('fonts/gilroy-bold.woff2') format('woff2'),
    url('fonts/gilroy-bold.ttf') format('ttf');

    font-weight: 700;
}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-semibold.woff') format('woff'),
    url('fonts/gilroy-semibold.woff2') format('woff2'),
    url('fonts/gilroy-semibold.ttf') format('ttf');

    font-weight: 600;
}
@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-medium.woff') format('woff'),
    url('fonts/gilroy-medium.woff2') format('woff2'),
    url('fonts/gilroy-medium.ttf') format('ttf');

    font-weight: 500;

}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-regularitalic.woff') format('woff'),
    url('fonts/gilroy-regularitalic.woff2') format('woff2'),
    url('fonts/gilroy-regularitalic.ttf') format('ttf');

    font-style: italic;
}

html,body {
    font-size: 15px;
    height: 100vh;
    width: 100%;
}

body{
    font-size: 15px;
    font-family: 'Gilroy', sans-serif;

    line-height: 1.6rem;

    background-color: #fff;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0px;
}

p {
    margin: 0 0 10px;
}

.page {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 5.7rem;
    margin: 0 1rem 0 1rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: row;

    background-color: #fff;
}

nav {
    overflow: hidden;
    position: relative;
    transform:  translateX(-300px);
    height: 40rem;
    width: 20rem;
    transition: all 800ms cubic-bezier(.8, 0, .33, 1);
    border-radius: 0% 0% 100% 50%;
    left: 6.6rem;
    top: 1.5rem;
}

nav.nav-open{
    transform:...

JavaScript

let menuBtn = document.querySelector('.menu-btn');
let nav = document.querySelector('nav');
let lineOne = document.querySelector('nav .menu-btn .line--1');
let lineTwo = document.querySelector('nav .menu-btn .line--2');
let lineThree = document.querySelector('nav .menu-btn .line--3');
let link = document.querySelector('nav .nav-links');

menuBtn.addEventListener('click', ()=>{
    nav.classList.toggle('nav-open');
    lineOne.classList.toggle('line-cross');
    lineTwo.classList.toggle('line-fade-out');
    lineThree.classList.toggle('line-cross');
    link.classList.toggle('fade-in');
})