How to achieve this WordPress menu?

I'm stuck for days trying to get my mobile menu working like this (look at submenu behaviour, not the CSS/popup):

The gif shows it working, but that's just some nasty hardcoded JavaScript so I could show you guys what I need. At the moment my menu walker looks like this:

class Rima_Mobile_Walker extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 ){

        $classes = "menu-item nav-id-" . $item->ID;
        $classes .= $item->menu_item_parent ? "parent-nav-id-" . $item->menu_item_parent : "";

        switch ($depth) {
            case 0:
                $classes .= $args->walker->has_children ? " has-submenu" : "";
                break;
            case 1:
                $classes = "has-parent";
                $classes .= $args->walker->has_children ? " has-subsubmenu" : "";
                break;
            default:
                $classes = "has-parent";
                $classes .= $args->walker->has_children ? " has-subsubmenu" : "";
                break;
        }

        $output .= sprintf(
            
        "\n%s<li class='%s'><a href='%s'><h2>%s</h2></a>\n",
        
        $awo, $classes, $item->url, $item->title );
    }

    function start_lvl( &$output, $depth = 0, $args= NULL ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "\n$indent<ul class=\"pl-0 d-none\" role=\"menu\">\n";
    }
}

This returns the following HTML:

<ul id="menu-hoofdmenu" class="list-unstyled">
   <li style="opacity:0.7" class="go-back d-none">
      <a href="#">
         <h2>.. Vorige</h2>
      </a>
   </li>
   <li class="menu-item nav-id-39">
      <a href="http://testwp.test/">
         <h2>Home</h2>
      </a>
   </li>
   <li class="menu-item nav-id-10">
      <a href="http://testwp.test/over-ons/">
         <h2>Over ons</h2>
      </a>
   </li>
   <li class="menu-item nav-id-470 has-submenu">
      <a href="http://testwp.test/onze-vacatures/">
         <h2>Vacatures</h2>
      </a>
      <ul class="pl-0 d-none" role="menu">
         <li class="has-parent has-subsubmenu">
            <a href="#">
               <h2>Productiewerk (Sub lvl 1)</h2>
            </a>
            <ul class="pl-0 d-none" role="menu">
               <li class="has-parent">
                  <a href="#">
                     <h2>Gezichtsbehandelingen (Sub lvl 2)</h2>
                  </a>
               </li>
               <li class="has-parent">
                  <a href="#">
                     <h2>Rugbehandelingen (Sub lvl 2)</h2>
                  </a>
               </li>
            </ul>
         </li>
         <li class="has-parent">
            <a href="#">
               <h2>Schoonmaak (Sub lvl 1)</h2>
            </a>
         </li>
         <li class="has-parent">
            <a href="#">
               <h2>Bloemengroothandel (Sub lvl 1)</h2>
            </a>
         </li>
      </ul>
   </li>
   <li class="menu-item nav-id-465">
      <a href="http://testwp.test/contact/">
         <h2>Contact</h2>
      </a>
   </li>
</ul>

I don't want this to be a 'pls help me' post but I really appreciate to be helped out.