Some links not showing when the navbar collapse in mobile bootstrap 5

See more:

CSS

HTML

PHP

i have navbar with some links on the left , logo on the center and other links on the right and working fine on big screens but when i see it on mobile version after i click the toggle button the links on the right not showing
the left links are on ul tag like this

<ul  class="nav navbar-nav me-auto left"></ul>

the right links are on ul tag like this

<ul class="nav navbar-nav ms-auto right"></ul>

and all of them are under this div

<div class="collapse navbar-collapse " id="navbarTogglerDemo03"></div>

What I have tried:

<nav id="navb" class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class=" top-bar"></span>
            <span class="middle-bar"></span>
            <span class=" bottom-bar"></span>
            </button>
            
            <a class="navbar-brand" href="">
                <img src= "{{asset('images/black.png')}}" alt="" /> 
            </a>
            
            <div class="collapse navbar-collapse " id="navbarTogglerDemo03">
                <ul  class="nav navbar-nav me-auto left">
                    <li class="nav-item ">
                        <a class="nav-link" href="">Home</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="">About Us</a>
                    </li>
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"  id="navbarDropdown"             role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Products
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            @foreach($categories as $category)                                
                            <li class="dropdown-submenu">
                                <a class="dropdown-item dropdown-toggle" href="#">{{$category->name}}</a>
                                                
                                <ul class="dropdown-menu">
                                    @foreach($subcategories as $subcategory)
                                        @if($subcategory->category_id == $category->id)
                                            <li class="d-block">
                                            <a class="dropdown-item" href="">
                                            {{$subcategory->name}}</a></li>
                                        @endif
                                    @endforeach
                                </ul>
                            </li>
                            @endforeach
                        </ul>           
                    </li>

                    <li class="nav-item ">
                        <a class="nav-link" href="">Contact Us</a>
                    </li>          
                </ul>

                <ul class="nav navbar-nav ms-auto right">
                    @if(Auth::check())
                        @if(Auth::user()->admin==1)
                        <li class="nav-item">
                            <a class="nav-link" href="">Products</a>
                        </li>
                                    
                        <li class="nav-item">
                            <a class="nav-link" href="">Categories</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="">SubCategories</a>
                        </li>
                         
                        <li class="nav-item">
                            <a class="nav-link" href="">logout</a>
                        </li>
                        @endif 
                    @endif    
                </ul>
            </div>
                    
                
        </div>
    </nav>

.navbar a.navbar-brand {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  
}

@media screen and (max-width: 850px) {
  .navbar a.navbar-brand {
    margin-top: 5px;
    vertical-align: top;
  }
.navbar .navbar-nav {
    margin-top: 40px;
    height: 100vh;
  }
}

but when i remove the second ul tag for the right links

<ul class="nav navbar-nav ms-auto right"></ul>

and add the links with the other left links in the first ul tag above them >>

<ul  class="nav navbar-nav me-auto left"></ul>

they appear in the navbar when it collapse idon't know why.
but i want the other links to be on the right