I am using shoelace library buttons on my menu bar and below is my code to highlight a specific menu when selected:

<sl-button
                    slot="trigger"
                    variant="text"
                    size="large"
                    caret
                    class=${classMap({
                        'nav-button': true,
                        current__route: this.route === '/mysite/root/',
                        nav__open: this.about,
                    })}
                    ><a class="link" href="/mysite/root/">About</a></sl-button>
<sl-menu>
                    <sl-menu-item value="/mysite/root/firstpage/"
                        ><a href="/mysite/root/firstpage/"
                            >First Page</a
                        ></sl-menu-item
                    >
                    <sl-menu-item value="/mysite/root/secondpage/">
                        <a href="/mysite/root/secondpage/"
                            >Second Page</a
                        >
                    </sl-menu-item>
</sl-menu>

According to the code above, when I click on the "About" menu the class is assigned. However, I would like to highlight the "About" menu when "First Page" or "Second Page" menu items are clicked. for that I have to compare the URL routes at:

current__route: this.route === '/mysite/root/' 

Can someone guide on how to use wildcard to search for URL or using 'in' class to check for multiple URL routes? I tried the below option and it didn't work:

current__route: this.route in ['/mysite/root/','/mysite/root/firstpage/','/mysite/root/secondpage/']

any help?