display flex not working when resizing the screen

If screen width is less than 800px then I want to hide my navigation links and a fas fa bar button will show up . Clicking on that button I will make navigation links display : grid (or none alternatively) . The problem is -- After that if I am resizing my screen to greater than 800px width , navigation links are not changing to display : flex.

@media only screen and (max-width: 800px) {
    body {
      background-color: lightblue;
    }
    nav ul{
        display: none;
    }
    .nav-toggle{
        display: inline-block;
    }
   }
 @media only screen and (min-width: 800px) {
        body {
            background-color: black;
          }
        nav ul{
            display: flex;
        }
    }

in Js file , I have this

let navToggle = document.getElementsByClassName("nav-toggle")[0];
let navLinks = document.getElementsByClassName("links")[0];
navToggle.addEventListener('click',showlinks);
function showlinks(){
    if(navLinks.style.display == "grid")
    navLinks.style.display = "none";
  else
    if(navLinks.style.display = "none")
    navLinks.style.display = "grid";

}