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:
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
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.