merhaba arkadaşlar,

Alt menü sorunsuzca açılmakta ancak menüde ki başka bir başlığa tıklayınca kapanmıyor, açık kalıyor nasıl çözebilirim?

teşekkürler.

  <nav class="navbar navbar-expand-lg navbar-light bg-primary fixed-top" id="sideNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
      <span class="d-block d-lg-none">MENU</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

		<ul id="my-nav" class="navbar-nav">

			  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">HOME</a></li>
			  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">ABOUT US</a></li>         
	   		  <li class="nav-item drop">
                    <a class="nav-link collapsed" href="#submenu4" data-toggle="collapse" >Projects</a>
                    <div class="collapse" id="submenu4" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">
                            <li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
							<li class="nav-item"><a class="nav-link js-scroll-trigger py-0" href="#">■</a></li>
                        </ul>
                    </div>
                </li>
			   <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">CONTACT US</a></li>
            </ul>
    </div>
  </nav>

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 800;
  letter-spacing: 0.05rem;
}

#sideNav .navbar-toggler:focus {
  outline-color: #d48a6e;
}

@media (min-width: 992px) {
  #sideNav {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 80vh;
  }
  #sideNav .navbar-brand {
    display: flex;
    margin: auto auto 0;
    padding: 0.5rem;
  }
  #sideNav .navbar-brand .img-profile {
    max-width: 10rem;
    max-height: 10rem;
    border: 0.5rem solid rgba(255, 255, 255, 0.2);
  }
  #sideNav .navbar-collapse {
    display: flex;
    align-items: flex-start;
    flex-grow: 0;
    width: 100%;
    margin-bottom: auto;
  }
  #sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  #sideNav .navbar-collapse .navbar-nav .nav-item {
    display: block;
  }
  #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
    display: block;
  }
}