JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="body-wrapper">
        <header class="header">
            <div class="header-inner">
                <div class="header-left">
                    <h1 class="logo"><a href="#"><img alt="" class="header-logo" src="/img/top-header-logo.png"></a></h1>
                    <nav class="nav drawer-nav">
                        <ul class="header-list">
                            <li class="header-item">
                                <a href="./Room/room.html">お部屋</a>
                            </li><!-- /.header-item -->
                            <li class="header-item">
                                <a href="./Menu/menu.html">お料理</a>
                            </li><!-- /.header-item -->
                            <li class="header-item">
                                <a href="./Onsen/onsen.html">温泉</a>
                            </li><!-- /.header-item -->
                        </ul><!-- /.header-list -->
                    </nav><!-- /.nav -->
                </div>
                <div class="header-right">
                    <div class="header-link" id="js-modal">
                        <a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
                         宿泊予約</a>
                    </div><!-- /.header-link -->
                    <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
                </div><!-- /.header-right -->
            </div><!-- /.header-inner -->
        </header><!-- /.header -->
        <div class="overlay"></div><!-- /.overlay -->
    </div>
</body>
</html>

CSS

/* general */
html{
    font-size: 62.5%;
    
}

body{
    font-size: 1.6rem;
    color: $word-color;
    min-width: 100vw;

}

img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
section{
    @include tb {
        margin-top: 60px;
    }
    @include sp{
        margin-top: 60px;
    }
}

.inner{
    max-width: 1180px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    @include tb {
        padding: 0 25px;
    }
    @include sp {
        padding: 0 15px;
    }
}

/* header */
.header{
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    max-height: 80px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;

    @include tb {
        position: fixed;
        top: 0;
        padding: 15px 20px;

    }
    @include sp {
        position: fixed;
        top: 0;
        padding: 8px 10px;
        max-height: 60px;

    }

    &-inner{
        max-width: 1880px;
        width: 100%;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin: 0 auto;
        box-sizing: border-box;
        -webkit-box-sizing:  border-box;

    }


    &-left{
        display: flex;
        justify-content: left;
        align-items: center;

        h1{
            display: block;
            @include sp{
                width: 100px;
            }
            .logo{
                img{
                    display: block;
                    max-width: 130px;
                    width: 100%;
                    // width: calc(400/1920*100%);
                    height: 130px;
                    // height: calc(40/80*100%);
                    margin: 20px 120px 20px 20px ;
                    // z-index: 9999;
                    @include tb{

                    }


                }

            }
        }  
            .nav{
               ...

JavaScript

//hamburger作成
$(function(){
//humburger関数


  $(".humburger").on('click', function(){
    //const nav=$('.nav')
    //humberger
    /* $(this).toggleClass("_active");
    $(".line").toggleClass("_open"); */

    //nav
    //$("nav").addClass("nav-open");
    //$(".drawer-nav").toggleClass("_active");

if($("this").hasClass('_active')){
  $(this).removeClass('_active');
  $(".line").removeClass('_open');

  $(".nav").removeClass("nav-open");
  // $(".drawer-nav").removeClass('_active');
 
  $('.overlay').removeClass('_open');
}else{
      $(this).addClass('_active');
      $('.line').addClass('_open');

      $(".nav").addClass("nav-open");
      $('.drawer-nav').addClass('_open');
      $('.overlay').addClass('_open');
    }
  });

  $('.overlay').on('click',function(){
    if($(this).hasClass('_open')){

      $(this).removeClass('_open');
      $('.humburger').removeClass('_active');
      $('.line').removeClass('_open');
     
      $(".nav").removeClass('nav-open');   
      // $('.drawer-nav').removeClass('_active');
    }
  });
});