How to call .click() when retuning to index.html from another page

Question

I'm building a portfolio site and have a sliding nav on index.html which contains a group of projects with links leading to other work.html pages once an element is clicked on the nav in the header.

What I want to do is when returning from a work.html page to the index.html page, is auto open the sliding nav automatically.

Thanks a lot if you can help!

document.querySelector(".work").click()

works with opening the sliding nav, but I don't know how to only run this when returning from one of the projects or work.html pages

this is the nav on the index.html and work.html pages

<ul class="nav-list">
    <li class="nav-item">
        <a class="nav-link work" href=# onclick="openNav();showButton()">work</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="...">experience</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="..." rel="noopener noreferrer" target="_blank">blog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">about</a>
    </li>
</ul>

When returning to index.html '.work' will automatically open

Answer 1

Try below.

window.addEventListener('load', (event) => {
    if (document.referrer.indexOf('work') > -1) {
    //Perform required operation
  }
});

document.referrer gives the previous URL.

Answer 2

If you are using React try putting the function in componentDidUpdate(). If you are using only JS no framework, try keeping a list so you know from where the user is coming on to your index page. Use window.location for that. Might not be the best approach, but play with it see what happens