Responsive navbar does not appear when changing window size

Question

I’m doing a full header with grid. The problem is I made a hamburger menu. So I made this function to click it appear and click again it hide. However if I enlarge the window(resize) after clicking on the icon to hide, it remains hidden( Nav does not appear). I want this function command not to work when increasing the window. Or go back to display:grid;

function icondisplay() {
    var iconmenu = document.querySelector('#menuicon i');
    var header = document.querySelector('header');
    var nav = document.querySelector('nav');
    if ((header.style.gridTemplateRows == '1fr 2fr') || (nav.style.display == 'grid')) {
        header.style.gridTemplateRows = '';
        nav.style.display = 'none';
    }
    else {
        header.style.gridTemplateRows = '1fr 2fr';
        nav.style.display = 'grid';
    }

}

@media screen and (max-width: 480px){
 nav{
    display: none;
    grid-row: 2/3;
    grid-column: 1/3;
     margin: 0;
 }
 header{
    grid-template-columns:50% auto;
    justify-items: center;
 }
 ul{ 
    grid-template-columns: 1fr;
    grid-template-rows:repeat(4,1fr);
    grid-row-gap: 50px;
}
#menuicon{
    display: grid;
    align-content: center;
}

        <header>
            <div id="logo">
                <img src="img/coin.gif" alt="">
            </div>
            <div id="menuicon"><i onclick="icondisplay(this)" class="fas fa-bars fa-3x"></i></div>
            <nav>
                <ul>
                    <li>Início</li>
                    <li>Produtos</li>
                    <li>Contato</li>
                    <li>Sobre</li>
                </ul>
            </nav>
        </header>

Answer 1

I did it ! I searched a lot and saw that I could use resize ! Here the hiccup.

window.onresize = function () {
    if (window.innerWidth > 480) {
        nav.style.display = 'grid';
        header.style.gridTemplateRows = '';
    }
    else { nav.style.display = 'none'; 
    header.style.gridTemplateRows = ''; }

};