Laravel SB Admin2 component side bar not working - html

Question

im new to laravel and in my class project i want to take SB Admin2 template and use it on laravel, since i want to learn how is this made, i took the HTML version and made into sidebar, topbar and content components, rigth now im struggling with the side bar i made it dynamic so i can evaluate the role of the user and render the menus according to it, the sample nav-items work fine but my generated code doesn't, i can't see any diference, can someone give me an advice?
SIDEBAR GENERATED CODE
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15">
<img src="http://127.0.0.1:8000/layout/img/rapidsoft_icon.png">
</div>
<div class="sidebar-brand-text mx-3">Rapisoft</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="http://127.0.0.1:8000/dashboard">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<li class="nav-item">
<a class="nav-link" href="/home">
<i class="fas fa-fw fa-chart-area"></i>
<span>Home</span></a>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/pages" data-toggle="collapse" data-target="#2collapsePages"
aria-expanded="true" aria-controls="2collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="2collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/portfolio">Portfolio</a>
<a class="collapse-item" href="/gallery">Gallery</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/our-services">
<i class="fas fa-fw fa-chart-area"></i>
<span>Our Services</span></a>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/about" data-toggle="collapse" data-target="#4collapsePages"
aria-expanded="true" aria-controls="4collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>About</span>
</a>
<div id="4collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/about-team">About Team</a>
<a class="collapse-item" href="/about-clients">About Clients</a>
</div>
</div>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/contact" data-toggle="collapse" data-target="#9collapsePages"
aria-expanded="true" aria-controls="9collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Contact</span>
</a>
<div id="9collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/contact-team">Contact Team</a>
<a class="collapse-item" href="/contact-clients">Contact Clients</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/pqr">
<i class="fas fa-fw fa-chart-area"></i>
<span>PQR</span></a>
</li>
<!--SAMPLE FROM SB ADMIN-->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Paginas</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- PARTE ESTATICA ABAJO -->
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
<!-- Sidebar Message -->
<div class="sidebar-card d-none d-lg-flex">
<img class="sidebar-card-illustration mb-2" src="http://127.0.0.1:8000/layout/img/undraw_rocket.svg"
alt="...">
<p class="text-center mb-2"> Aca van las notas que se deban tener para cada cliente!!!</p>
</div>
</ul>```

Answer 1

I found the problem, this is the code i was using to generate the menu:
#if ($menu->parent_id === 0 && $menu->ChCount() === 0)
<li class="nav-item">
<a class="nav-link" href="/{{$menu->slug}}">
<i class="fas fa-fw fa-chart-area"></i>
<span>{{$menu->menu_title}}</span></a>
</li>
#else
#if ($menu->parent_id === 0 and $menu->ChCount() > 0)
<li class="nav-item">
<a class="nav-link collapsed" href="/{{$menu->slug}}" data-toggle="collapse" data-target="#{{$menu->id}}collapsePages"
aria-expanded="true" aria-controls="{{$menu->id}}collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>{{$menu->menu_title}}</span>
</a>
<div id="{{$menu->id}}collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header"></h6>
#foreach($menu->children as $menu)
<a class="collapse-item" href="/{{$menu->slug}}">{{$menu->menu_title}}</a>
#endforeach
</div>
</div>
</li>
#endif
#endif
i found that the ID wasn't captured so it doesnt aplied any css to it, i changed this:
id="{{$menu->id}}collapsePages" for this id="collapse_id{{$menu->id}}" and problem solved.