Pessoal, eu estou tentando criar um menu que ao clicar no link se abre um collapse logo abaixo com outros links, eu precisava fazer com que o mesmo botão e abra ele também feche mas infelizmente não estou conseguindo

para exemplo eu quero fazer a mesma coisa que é feito hoje no botao amarelo de busca do site da alura mesmo que fica no topo

meu código é

html

<li class="nav-item">
     <a class="nav-link mr-1" style="cursor: pointer;">
         requerimentos
    </a>
</li>

<div class="text-center options" id="mySidebar">
            <a href="{{ route('amostra.index') }}" class="mr-2">amostra</a>
            <a href="{{ route('funcionario.index') }}" class="mr-2">funcionário</a>
            <a href="{{ route('layout.index') }}" class="mr-2">layout</a>
            <a href="{{ route('reposicao.index') }}" class="mr-2">reposição</a>
            <a href="{{ route('frete.index') }}">frete</a>
</div>

css

.options{
                height: 0;
                width: 100%;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: #6c757d !important;
                overflow-x: hidden;
                transition: 0.5s;  
                display: flex;
                align-items: flex-end;  
                justify-content: center;
            }
            .options a {
                text-decoration: none;
                font-size: 25px;
                color: #f1f1f1;
                display: inline;
                transition: 0.3s;
            }
            .options a:hover {
                color: #818181;
            }
`