Why in bootstrap 4.1 left aside menu icon to dropdown items is not on valid place?

113 views Asked by At

I have a left aside menu with submenus in laravel 5.7 / blade/ Bootstrap 4.1 app and if some element of submenu is opened I want to keep open parent menu item. I tried to keep it ny current control name as :

<?php $manage_storage= ($current_controller_name == 'ClientsController'); ?>

<div class="sidebar-header">
    @if(isset($app_name))<h3>{{ $app_name }}</h3>@endif
</div>

<ul class="list-unstyled components">

    <li>
        <a href="#users_submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Manage Users</a>
        <ul class="collapse list-unstyled" id="users_submenu">
            <li>
                <a href="#">Manage Departments</a>
            </li>
            <li>
                <a href="#">Manage Users</a>
            </li>
        </ul>
    </li>


    <li>
        <a href="#manage_storage_submenu" data-toggle="@if($manage_storage) dropdown @else collapse @endif" aria-expanded="@if($manage_storage) true @else false @endif" class="@if($manage_storage) @else dropdown-toggle @endif">Manage Storage</a>
        <ul class="collapse list-unstyled @if($manage_storage) show @endif" id="manage_storage_submenu">
            <li class=" @if($current_controller_name == 'ClientsController') active @endif ">
                <a href="{{ url('admin/clients') }}">Manage Clients</a>
            </li>
            <li>
                <a href="#">Manage Locations</a>
            </li>

            <li class=" @if($current_controller_name == 'WarehousesController') active @endif ">
                <a href="{{ url('admin/warehouses') }}" >Manage Warehouses</a>
            </li>

        </ul>
    </li>

So if clients page is opened, then Manage Storage menu must be opened.

But it does not work as I expected: Please, open : http://demo2.nilov-sergey-demo-apps.tk/admin/warehouses/2/edit It is under credentials [email protected] 111111

look at http://demo2.nilov-sergey-demo-apps.tk/admin/dashboard and http://demo2.nilov-sergey-demo-apps.tk/admin/clients pages for the first page (when Manage Storage is not opened) icon to dropdown submenu items is in other place of the page: on the second page( when Manage Storage is opened ) I do not see the icon to dropdown submenu items.

How to fix it ?

UPDATED BLOCK # 1 Setting

<li style="position: relative;">

Icon is on its proper place, but “Manage Storage” is not clickable. I tried and did not find any difference with “Manage Users” menu item, which has no php code in itself and works ok. What is wrong?

UPDATED BLOCK # 2: I checked my html generated code under https://validator.w3.org and got error :

Error: Bad value  false  for attribute aria-expanded on element a.
From line 96, column 4; to line 96, column 112

ive;">↩         <a href="#manage_storage_submenu" data-toggle=" collapse " aria-expanded=" false " class=" dropdown-toggle "><span 

I think that the error is called by space in aria-expanded= definition, as I had blade source :

    <a href="#manage_storage_submenu" data-toggle="@if($manage_storage) dropdown @else collapse @endif" aria-expanded="@if($manage_storage) true @else false @endif" class="@if(!$manage_storage) dropdown-toggle @endif"><span style="text-decoration: underline">Manage Storage</span></a>

But if I remove space in aria-expanded= definition I got blade syntax error. Could it raise my problems? Which is the valid way here?

Thanks!

0

There are 0 answers