How can I close my dropdown menu when sveltekit route changes?

I have a <SideBar /> component and onDestroy() doesn't seem to fire on route changes.

I need to close the menu when the route changes otherwise the menu stays open which is a bad UX.

<script>    import { page } from '$app/stores';    import { onDestroy } from 'svelte';    let isMainNavOpen = true;    let isGroupNavOpen = false;    function toggleGroupMenu(e) {        e.preventDefault();        isGroupNavOpen = !isGroupNavOpen;    }    $: currentPath = $page.url.pathname;</script><nav><header class="groups" class:closed={!isGroupNavOpen}><div class="dropdown"><a href="#" class="toggler" on:click|preventDefault={toggleGroupMenu}><img src="/icons/chevron.svg" alt="" border="0" /></a><ul>                    {#each groupMenu as item, i}<li class:active={currentPath === item.path}><a href="/groups/{item.id}"><img                                    class="avatar"                                    src="/icons/avatar.group.png"                                    alt=""                                    border="0"                                />{item.name}</a></li>                    {/each}</ul><a href="/groups" class="button secondary outlined">Explore Groups</a></div></header></nav><style>    nav {        padding: 1.2rem;        flex-grow: 1;        display: flex;        flex-direction: column;    }    nav header {        color: #fff;        display: flex;        flex-direction: column;    }    .groups.closed li:not(:first-child) {        display: none;    }    .groups .toggler {        position: absolute;        top: 2.5rem;        right: 1rem;        margin-left: 1.4rem;    }    .groups .toggler img {        transform: rotate(180deg);    }    .groups.closed .toggler img {        transform: rotate(0deg);    }    .groups ul {        width: 100%;        max-height: 22rem;        overflow-y: auto;        background-color: #060536;        color: #fff;        border-radius: 0.8rem;    }    .groups ul .active {        background-color: #34326d;    }    .groups .dropdown {        width: 100%;        position: absolute;        top: 0;        left: 0;        z-index: 1;        background-color: #060536;    }    header.groups {        padding: 0;        position: relative;        overflow: visible;    }    .groups .avatar {        width: 5rem;        display: block;        margin-right: 1.4rem;    }    .groups li {        display: flex;        justify-content: space-between;        align-items: center;    }    .groups li a {        padding: 1rem;        display: flex;        justify-content: flex-start;        align-items: center;        flex-grow: 1;        color: #fff;        text-decoration: none;        font-weight: 600;        word-break: break-all;    }    .groups .button {        font-weight: 600;        font-size: 1.4rem;        width: 80%;        margin: 1rem auto;    }    .groups.closed .button {        display: none;    }    nav ul {        display: flex;        flex-direction: column;    }    nav ul {        list-style-type: none;        padding: 0;        margin: 0;        flex: 1;    }</style>

I probably also need an underlay where if they click off the menu it closes too.