javascript – the way to make a responsive sidebar with submenu

<nav class="sidebar shut">
        <div class="menu">

                <li class="search-box">
                    <i class="bx bx-search icon"></i>
                    <enter kind="textual content" placeholder="Search...">
                </li>

                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="#">
                            <i class="bx bx-news icon" ></i>
                            <span class="textual content nav-text">Announcement</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="#">
                            <i class="bx bx-news icon" ></i>
                            <span class="textual content nav-text">Registration</span>
                        </a>
                    </li>
                </ul>
            </div>
</nav>

heres my js:

const physique = doc.querySelector('physique'),
      sidebar = physique.querySelector('nav'),
      toggle = physique.querySelector(".toggle"),


toggle.addEventListener("click on" , () =>{
    sidebar.classList.toggle("shut");
})

searchBtn.addEventListener("click on" , () =>{
    sidebar.classList.take away("shut");
})

and my css:

.sidebar.shut{
    width: 88px;
}

/* ===== Reusable code - Right here ===== */
.sidebar li{
    top: 50px;
    list-style: none;
    show: flex;
    align-items: heart;
    margin-top: 10px;
}

.sidebar .textual content,
    colour: var(--text-color);
    transition: var(--tran-03);
}
.sidebar .textual content{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.shut .textual content{
    opacity: 0;
}

.sidebar.shut .toggle{
    remodel: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 40px;
}
.sidebar li a{
    list-style: none;
    top: 100%;
    background-color: clear;
    show: flex;
    align-items: heart;
    top: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{
    background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .textual content{
    colour: var(--sidebar-color);
}

.sidebar .menu-bar{
    top: calc(100% - 55px);
    show: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}

I supposed to have two submenus in my registrations menu for
grownup registration and youngster registration
If you hover over my submenu, I needed it to seem on the correct.
Tomorrow, I’ve to current this web site.
I’d be grateful to anybody who might help me.
I’d be grateful to anybody who might help me.