Search code examples
laraveladminlte

Laravel backpack dropdown menu issue


I have created a drop down menu with some links. It works correctly on desktop but on mobile there is a strange issue. When I expand the menu, it doesn't push down the other menu below it. However if I reload the page once it does! In other words when I open a page once it doesn't push it down and when I refresh it it does. If I then try refresh it a second time then the issue is back and so on. Check the photos for the exact issue:

Issue is shown

No issue

And here is the relevant (To my understanding) code:

<!-- This file is used to store sidebar items, starting with Backpack\Base 0.9.0 -->
<li><a href="{{ backpack_url('dashboard') }}"><i class="fa fa-dashboard"></i><span>{{ trans('backpack::base.dashboard') }}</span></a></li>
@if (Auth::user()->admin) 
<!-- @if(isset($company) && !Auth::user()->admin)
<li class="treeview active menu-open">
@else -->
<li class="treeview">
<!-- @endif -->
    <a href="#">
    <i class="fa fa-building"></i>
    <span>Välj ett företag</span>
    <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
    </span>
    </a>   
        <ul class="treeview-menu">    
        @foreach($allCompanies as $singleCompany)
  <!--       @if(isset($company) && $singleCompany->id == $company->id)
            <li class="active">
        @else -->
            <li>
       <!--  @endif -->
                <a href="/company/{{ $singleCompany->id }}">{{ $singleCompany->name }}</a>
            </li>
        @endforeach
        </ul>    
</li>
@endif
<!-- @if (Request::is('cp/*'))
<li class="treeview active">
@else -->
<li class="treeview">
<!-- @endif -->
    <a href="#">
    <i class="fa fa-building"></i>
    <span>Kontrollpanelen</span>
    <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
    </span>
    </a>
    <ul class="treeview-menu">
        @if (Auth::user()->admin) 
         <!--    @if (Request::is('cp/addcompanyview'))           
            <li class="active">
            @else -->
            <li>
            <!-- @endif  -->               
            <a class="btn btn-primary btn-block" href="/cp/addcompanyview" role="button">
                Lägg till företag
                </a>
            </li>
     <!--        @if (Request::is('cp/adduserview'))           
            <li class="active">
            @else -->
            <li>
           <!--  @endif  --> 
            <a class="btn btn-primary btn-block" href="/cp/adduserview" role="button">
                Lägg till handläggare
            </a></li>
        <!--     @if (Request::is('cp/user/*') || Request::is('cp/user'))           
            <li class="active">
            @else -->
            <li>
           <!--  @endif  --> 
            <a class="btn btn-primary btn-block" href="/cp/user" role="button">
                Hantera handläggare
            </a></li>
    <!--         @if (Request::is('cp/managecompaniesview'))           
            <li class="active">
            @else -->
            <li>
            <!-- @endif   -->
            <a class="btn btn-primary btn-block" href="/cp/managecompaniesview" role="button">
                Hantera företag
            </a></li>        
        <!-- @endif -->
  <!--       @if (Request::is('cp/manageclientsview'))           
        <li class="active">
        @else  -->
        <li>
     <!--    @endif  --> 
        <a class="btn btn-primary btn-block" href="/cp/manageclientsview" role="button">
              Hantera kunder
        </a></li>   
    </ul>
</li>
@if (Auth::user()->admin)    
<li><a href="{{ url(config('backpack.base.route_prefix', '').'/backup') }}"><i class="fa fa-hdd-o"></i> <span>Backups</span></a></li>
@endif

Solution

  • The issue was indeed JS related and it's an addition of backpack and not AdminLTE.

    This code was causing a session variable to be saved that was "getting forgotten" on the refreshes causing problems with the theme:

    /* Store sidebar state */
    /*         $('.sidebar-toggle').click(function(event) {
              event.preventDefault();
              if (Boolean(sessionStorage.getItem('sidebar-toggle-collapsed'))) {
                sessionStorage.setItem('sidebar-toggle-collapsed', '');
              } else {
                sessionStorage.setItem('sidebar-toggle-collapsed', '1');
              }
            });
    

    I commented it out and the problem is gone.

    PS: This code resides in the layout.blade.php of the backpack default theme.