JSFiddle - React, Tailwind, and code Playground

by IvanGrishov

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;
    margin: 0;
    padding: 0;
    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;
    
    /* изменил */
    
    padding: 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%;
...

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');
})