JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    
    <div class="logo">[logo]</div>    
    
    <div class="menu"><b>[MENU]</b></div>
        <a href="#contact" class="nav">contact</a>
        <a href="#crew" class="nav">crew</a>
        <a href="#about" class="nav">about</a>
            
   </div>

CSS

#header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    right: 0;
    color: black;
    background: grey;
    padding: 30px;
    z-index: 10;
    
    transition: height 500ms, width 500ms, padding 500ms;
}

.nav {
    display: block;
    float: right;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    color: black;
    padding: 5px;
    margin: 5px;
}

.nav:hover {
    outline: 1px solid black;
}

.logo {
    float: left;
}

.menu {
    display: block;
    float: right;
    margin: -3px;
    cursor: pointer;
}

/* HEADER TINY */

#header.tiny {
    position: fixed;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    padding: 5px;
}

#header.tiny .nav, #header.tiny .logo {
    display: none;
}

JavaScript

$(document).ready(function(){
    $('.menu').click(function () {
        $('#header').toggleClass('tiny');
    });
});