Sidebar Açılıp Kapanma Sorunu

Merhaba ben responsive bir navbar yapmaya çalışıyorum ama basit bi yerde takıldım. Şöyle bir sorunum var, dışarıdan bir js dosyasından bir script çağırıyorum ve tıklandıgında navbarı display = none dan display = flex e çeviriyor, ancak tıkladığımda display flex olup tekrardan none şeklinde görünmez oluyor Sidebar sebebini anlayamadım.

  <body>
    <nav>
        <ul class="left">
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Makinalarımız</a></li>
            <li><a href="#">E-Katalog</a></li>            
        </ul>
        <img src="img/logo.png">
        <ul class="right">
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Referanslar</a></li>
            <li><a href="#">İletişim</a></li>
            <li onclick=showSidebar()><a href=""><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
        </ul>
        <ul class="sidebar">
            <img src="img/logo.png">
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Makinalarımız</a></li>
            <li><a href="#">E-Katalog</a></li> 
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Referanslar</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
  </body

...


.sidebar
{
    padding-top: 50px;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 250px;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.007);
    display:none;
    flex-direction: column;
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}
.sidebar li
{
    width: 100%;
    padding-top: 20px;
}

function showSidebar()
{
    const sidebar = document.querySelector('.sidebar')
    sidebar.style.display = 'flex'
}

Şu şekilde basit bir kod.

Düzenleme : Şimdi fark ettim svg'nin biraz köşesine tıkladığımızda kod doğru çalışıp görünür yapıyor menüyü diğer türlü tam üstüne tıkladığımda açılıp kapanıyor tarayıcı kaynaklı bir sorun felan mı acaba ?

Sidebar Açılıp Kapanma Sorunu

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (1)