Unfold the main menu on mobile and improve navigation

I have a website with the default Olivero theme. I want when the navigation bar display switches to mobile mode, the menus are automatically expanded. Like in this screenshot :

https://ibb.co/zXbjYLB

style.css :

.site-header {
    z-index: 111;
    position: sticky;
    top: 0;
    border-bottom-width: 0px;
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
}

.primary-nav__menu--level-2 {
    visibility: visible !important;
    max-height: none !important;
    margin-top: 1.6875rem !important;
    opacity: 1 !important;
}

#header-nav {
    display: flex;
    flex-direction: column;
}

#header-nav .menu--main {
    order: 2;
    padding-bottom: 2.25rem;
}

#header-nav .region--secondary-menu {
    margin-top: 0;
    margin-bottom: 1.25rem;
    order: 1;
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header {
    position: relative;
  }
  body:not(.is-always-mobile-nav) .site-header__shadow-active {
    box-shadow: none;
  }
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
    visibility: hidden !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
  }
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
    visibility: visible !important;
    max-height: none !important;
    opacity: 1 !important;
  }
  body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
    display: block;
  }
  body:not(.is-always-mobile-nav) #header-nav {
    flex-direction: initial !important;
  }
  body:not(.is-always-mobile-nav) #header-nav .region--secondary-menu {
    order: initial !important;
  }
  body:not(.is-always-mobile-nav) #header-nav .menu--main {
    order: initial !important;
    padding-bottom: initial !important;
  }
  body:not(.is-always-mobile-nav) .region--secondary-menu {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
  }
}

@media (min-width: 43.75rem) {
  .region--content-below {
    display: block;
  }
  [dir="ltr"] .region--content-below > * {
    margin-right: 0rem;
  }
}

I created a scripts.js file in my Olivero subtheme. I imagine I need to add some code, but no idea what to put.

scripts.js

(function ($, Drupal, window, document) {
  $(document).ready(function () {

    window.addEventListener("scroll", function() {
      if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        document.getElementById("site-header__inner").classList.add('site-header__shadow-active');
      } else {
        document.getElementById("site-header__inner").classList.remove('site-header__shadow-active');
      }
    });

  });
})(jQuery, Drupal, this, this.document);

This code seems to work fine, but I don't know if it's a good practice. The Olivero theme is complicated to customize.

I'm missing an item, currently when the menu is expanded it shows the "+" button

I want it to display the "-" button which would be more logical.

The visitor must be able to unfold or collapse the menu when he clicks on the "+" and "-" button.

Can you help me finish this code? THANKS

Options in the theme configuration would be ideal. Like the Bootstrap theme for Drupal does.

The CSS code above is not the solution, because the visitor cannot fold the menu manually and the "+" and "-" buttons are not consistent.

I made 2 screenshots with the code that changes when the menu and fold and unfold.

The CSS is not correct, so what code should I add to scripts.js to correctly unfold the menus on mobile ?