Laravel Bootstrap - Mon header n'affiche que l'élément navbar-brand

Noctissei
PHP Laravel

Bonjour, pour la mise en contexte, j'ai créé mon projet web avec Laravel 10 et directemment installé Laravel Breeze, j'ai ensuite utiliser le CDN de bootstrap avec lequel fonctionnait tout parfaitement dont mon header. Cependant ayant la nécessite de changer les couleurs de bootstrap j'ai décidé de l'installer directemment via NPM.

Tout fonctionne même mes modals bootstrap cependant mon header n'affiche plus que le navbar-brand et pas les nav-item etc... , et je ne comprends pas comment.

Auriez-vous des solutions ou des questions ?

EDIT : Je me suis rendu compte que c'est très certainement un problème avec "collapse" de bootstrap mais je ne comprends toujours pas comment régler le soucis

Ce que j'ai déjà essayé de faire :

  • Copier coller un header d'exemple de bootstrap (qui ne fonctionne pas non plus)
  • Utiliser le CDN JS de bootstrap
  • Aucune erreur en console

Voici mon header :

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="/"> <i class="fas fa-dumbbell" style="color: #ffffff;"></i> Lifting Reminder </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav d-flex justify-content-between w-100 mx-3">
        <div class="d-flex gap-3">
          <li class="nav-item">
            @auth
            <a class="nav-link active" aria-current="page" href="{{route('dashboard')}}">Tableau de bord</a>
            @endauth
          </li>

          <li>
            <a class="nav-link active" aria-current="page" href="{{route('shared')}}">Communauté</a>
          </li>
        </div>

        @auth
          <li class="nav-item dropstart">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              {{Auth::user()->name}}
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="{{route('profile.edit')}}">Profil</a></li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <form class="nav-item" action="{{route('logout')}}" method="post">
                  @csrf
                  <button class="dropdown-item"> Se déconnecter </button>
                </form>
              </li>
            </ul>
          </li>
        @endauth

        @guest
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{{route('login')}}">Connexion</a>
          </li>
        @endguest

    </div>
  </div>
</nav>

Et voici mon app.js : 

import './bootstrap';
import 'bootstrap';
// import 'bootstrap/dist/css/bootstrap.css';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Aucune réponse