Infinite category tree that opens sideways with php

i am trying to make a menu that can be opened side by side like here.
https://prnt.sc/tztg24JdoLyB

For this, I followed a way

if ( ! function_exists('buildHomePageTreeMenu')){
    function buildHomePageTreeMenu($object, $currentParent, $url, $active ='', $currLevel = 0, $prevLevel = -1) {
        foreach ($object as $category) {
            if ($currentParent == $category->parent_id) {

                if ($currLevel > $prevLevel) {
                    if($category->parent_id != null){
                        echo "<ul class='navbar-nav u-header__navbar-nav' id='category-". $category->parent_id ."'>"; 
                    }else{
                        echo "<ul class='navbar-nav u-header__navbar-nav'>";
                    }
                }
                    
                if ($currLevel == $prevLevel) echo "</li>";

                if($category->child_category->count() > 0){
                    echo '<li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-position="left">
                
                    <a id="basicMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">'. $category->translation->name .'</a>';
                    
                                    
                }else{
                    echo '<li class="nav-item u-header__nav-item" data-event="hover" data-position="left">
                    <a class="nav-link u-header__nav-link font-weight-bold" href="'.filter_url($url ."/". $category->slug).'">'. $category->translation->name .'</a>';
                }

                if ($currLevel > $prevLevel) { 
                   $prevLevel = $currLevel; 
                }

                $currLevel++; 
                buildTreeCollapse ($object, $category->id, $url, $active,  $currLevel, $prevLevel);
                $currLevel--;   
            }
         }
        if ($currLevel == $prevLevel) echo "</li> </ul>";
    }
}

There are main categories and subcategories, but I can’t see the other category titles and the titles under them.

menu html code

<ul class="navbar-nav u-header__navbar-nav">
        <li class="nav-item hs-has-mega-menu u-header__nav-item"
            data-event="hover"
            data-animation-in="slideInUp"
            data-animation-out="fadeOut"
            data-position="left">
            <a id="basicMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Computers & Accessories</a>

            <div class="hs-mega-menu vmm-tfw u-header__sub-menu" aria-labelledby="basicMegaMenu">
                <div class="vmm-bg">
                    <img class="img-fluid" src="../../assets/img/500X400/img1.png" alt="Image Description">
                </div>
                
                <div class="row u-header__mega-menu-wrapper">
                    <div class="col mb-3 mb-sm-0">
                        <span class="u-header__sub-menu-title">Computers & Accessories</span>
                        <ul class="u-header__sub-menu-nav-group mb-3">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="#">All Computers & Accessories</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Laptops, Desktops & Monitors</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Printers & Ink</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Networking & Internet Devices</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Computer Accessories</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Software</a></li>
                            <li>
                                <a class="nav-link u-header__sub-menu-nav-link u-nav-divider border-top pt-2 flex-column align-items-start" href="#">
                                    <div class="">All Electronics</div>
                                    <div class="u-nav-subtext font-size-11 text-gray-30">Discover more products</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>

I would appreciate it if you could help me to get an image like the example I gave.