Is there a way to set a .style automatically before onClick js function?

I am working on a responsive nav for a website I am building. I am using a transform:translateX css property to align the sidebar, where I use two js functions (show/hideMenu) to change the variable in the css property. The issue I am finding is that when reloading the mobile dimensions in the live server, the sidebar is either visible automatically or shows for a few seconds, which I assume is due to the transition time I have set in css.

A solution I feel may work would be have a value set before the initial showMenu button click upon loading into the page, however I am still in the beginning stages of learning js so I cant think of the syntax to do this correctly. Ive looked at multiple source codes for websites, as well as responsive navbar tutorials on youtube and have yet to find anything that helps. Setting the initial transform:translateX value in css doesnt work. Here is the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.transform = "translateX(0%)";
}
function hideMenu() {
navLinks.style.transform = "translateX(100%)";
}

<!-- language: lang-css -->

.navlinks {
display: flex;
position: absolute;
inset: 0 0 0 50%;
background: hsl(0, 0%, 80%);
z-index: 2;
text-align: left;
transform: translateX(100%);
transition: 0.5s;
}

<!-- language: lang-html -->

<nav class="navbar">
<div class="brand-title">
<h4>Bottoms Up Tiki Tours</h4>
</div>
<div id=navLinks class="navlinks">
<div class="x" onClick="hideMenu()">
<i class="bi bi-x"></i>
</div>
<ul class="navlist">
<li class="active"><a href="#home">Home</a></li>
<li class=><a href="#prices">Prices</a></li>
<li class=><a href="#about">About</a></li>
<li class=><a href="#booking">Booking</a></li>
<li class=><a href="https://www.facebook.com/bottomsuptikitours"><svg 
xmlns="http://www.w3.org/2000/svg" width="13" height="13" 
fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 
16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 
3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h- 
2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 
1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 
1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 
6.75-7.951z"/></svg></a></li>
</ul>
</div>
<div class="burger" onClick="showMenu()">
<i class="bi bi-list"></i>
</div>
</nav>

<!-- end snippet -->

Instead try using css like create button that when hovered on change the css property using transition from, to

I ended up going way over my head and complicating it with JS but it helped with my understanding of JS. I used the aria-expanded states to set attributes upon click. This solved my issue. If anyone has any questions on how to do this feel free to ask.