Navigating through pages with custom html elements

Hey everyone, first post here hoping to get some help. I am creating a fairly complex (for Streamlit) app, which include authentication through a custom google oAuth component I found, as well as multiple pages, custom html elements, and various community created components. The relevant ones here are the authentication component I mentioned before, along with the switch page element from the streamlit extras component. The switch_page one is working great as it allows navigation through buttons without resetting the session state. The problem I am running into is that I have custom html cards via st.markdown like the below:

        body = f"""
        <a class='card-button' href={link} target='_self'>
            <img src={img} alt={title} height='20'>
            <div>
                <h4>{title}</h4>
                <p>{desc}</p>
            </div>
        </a>
        """
        st.markdown(body, True)

These are functioning, but clicking the card follows a link, https://localhost:8501/page for example, but it resets the session state. I’m hoping to find a way to call the switch_page function when the card is clicked instead or something similar. Has anyone tried anything similar and found a workaround? I have played around with a cookies component which works fine locally but starts acting out with authentication when I put it on a server. Thanks in advance!

Does this help?

How did you manage to use html nav and save the session state!