• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<div class="search">
    <div class="icon"></div>
    <div class="form">
        <form>
            <input type="text" name="" placeholder="What are you  looking for ?">
        </form>
    </div>
</div>

CSS

body
{
    margin:0;
    padding:0;
    font-family:verdana;
}
.search
{
    position:absolute;
    top:0;
    right:0;
    width:80px;
    height:80px;
    background:#670090;
    transition:.5s;
}
.search .icon
{
    width:80px;
    height:80px;
    line-height:80px;
    font-size:30px;
    color:#fff;
    text-align:center;
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
}
.search .icon:before
{
    content:'\\f002';
    font-family:fontAwesome;
    
}
.search.active .icon:before
{
    content:'\\f00d';
    font-family:fontAwesome;
    
}
.search.active
{
    width:100vw;
    height:100vh;
}
.form
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:none;
}
.form input
{
    background:transparent;
    color:#fff;
    border:none;
    border-bottom:4px solid #fff;
    outline:none;
    font-size:40px;
    padding:10px 0;
}
.search.active .form
{
    display:block;
}
.form input::placeholder
{
    color:#fff;
}

JS

$(document).ready(function(){
    $('.icon').click(function(){
        $('.search').toggleClass('active')
    });
});

/*
    All the credits :
    https://www.youtube.com/watch?v=nV4v2YWB7ak&list=PL5e68lK9hEzfYBtW1uMfuZlonslYkr8Dy&index=1
*/