i created a responsive navbar but i need to know is there any ways to do this simpler than this?

 
```
    document.addEventListener('DOMContentLoaded', () => {
                let clbtn = document.querySelector('#close');
                let exbtn = document.querySelector('#expand');

                clbtn.style.display = 'none';

                exbtn.addEventListener('click', (e) => {

                    let nav = document.querySelector(`.${e.target.dataset.target}`)
                    nav.classList.add('ani')
                    if (nav.classList.contains('cl')) {
                        nav.classList.remove('cl')
                    }
                    if (document.querySelector('ul').classList.contains('ul-ani')) {
                        document.querySelector('ul').classList.remove('ul-ani')
                    }
                    e.target.style.display = 'none';
                    document.querySelector('ul').style.display = 'block'
                    clbtn.style.display = 'block'
                })

                clbtn.addEventListener('click', (e) => {
                    let nav = document.querySelector(`.${e.target.dataset.target}`)

                    nav.classList.remove('ani')
                    let ul = document.querySelector('ul')
                    ul.classList.add('ul-ani')
                    nav.classList.add('cl')
                    e.target.style.display = 'none';
                    exbtn.style.display = 'block'




                })






            })
```

```
            .navbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            li:hover {
                cursor: pointer;
                transform: scale(1.3);
            }

            .nav {
                display: flex;
            }

            ul {
                display: flex;
                list-style-type: none;
            }

            li {
                margin: 10px 20px;
            }

            #close,
            #expand {
                display: none;
            }

            @media (max-width:768px) {
                .navbar {
                    flex-direction: column;

                    width: 100%;
                }

                .logo {
                    width: 100%;
                    align-items: center;
                    text-align: center;
                    background-color: rgb(63, 61, 61);
                    height: 50px;
                    display: flex;
                    justify-content: space-around;
                }

                ul {
                    flex-direction: column;
                    text-align: center;
                    display: none;
                }

                .nav {
                    background-color: rgb(92, 90, 90);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    width: 0%;
                }

                .ani {
                    animation-name: slide;
                    animation-duration: 300ms;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                    transition: 400ms;
                }

                @keyframes slide {
                    from {
                        widows: 0%;
                    }

                    to {
                        width: 100%;
                    }
                }

                #expand,
                #close {
                    display: block;
                }

                .ul-ani {
                    animation-name: fade;
                    animation-fill-mode: forwards;
                    animation-iteration-count: 1;
                    animation-delay: 300ms;
                    transition: 400ms;
                }

                @keyframes fade {
                    from {
                        opacity: 1;
                    }

                    to {
                        opacity: 0;
                        display: none;
                    }
                }

                .cl {
                    animation-name: back;
                    animation-duration: 700ms;
                    animation-iteration-count: 1;
                    animation-fill-mode: forwards;
                    transition: 400ms;
                }

                @keyframes back {
                    from {
                        width: 100%;
                    }

                    to {
                        width: 0%;
                        display: none;
                    }
                }


            }
```

```
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head>

    <body>

        <div class="navbar">
            <div class="logo">
                <h4>LOGO</h4>
                <button id="expand" data-target='nav'>+</button>
                <button id="close" data-target='nav'>-</button>
            </div>
            <div class="nav">
                <ul class="links">
                    <li>Home</li>
                    <li>Profile</li>
                    <li>Events</li>
                    <li>Tickts</li>
                    <li>Explore</li>
                </ul>
            </div>
        </div>



    </body>

    </html>
```