CODEWITHSUNDEEP
laravellaravel-5laravel-blade
Ying
Ying

Reputation: 1422

Make active class for parent and subs in Laravel

I have menu like this:

<li class="treeview">
        <a href="#"><i class="fa fa-comment"></i> <span>Comments</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
            <li><a href="http://blog.dev/member/comments">All Comments</a></li>
            <li><a href="http://blog.dev/member/comments?q=me">My Comments</a></li>
            <li><a href="http://blog.dev/member/comments?q=approved">Approved</a></li>
            <li><a href="http://blog.dev/member/comments?q=disapproved">Disapproved</a></li>
        </ul>
    </li>

All i want is when i click on submenu for example "My comments" menu, the Comments menu and My Comments active will have a class like this 

    <li class="active"><a href="#"><i class="fa fa-comment"></i> <span>Comments</span></a></li>
    <li class="active active-sub"><a href="http://blog.dev/member/comments?q=me">My Comments</a></li>

so how can i make this can be happen? Thanks

Upvotes: 0

Views: 2360

Answers (4)

plmrlnsnts
plmrlnsnts

Reputation: 1684

You may try using this package https://www.hieule.info/products/laravel-active-version-3-released, it provides helper methods to check if the current route does match with your condition.

Supposed that your routes are named comments.index, comments.my_comments, etc.

<li class="{{ active_class(if_route('comments.*')) }}">
     <a href="#"><i class="fa fa-comment"></i> 
     <span>Comments</span></a>
</li>

Upvotes: 0

Mohammad Nurul Huda Rimon
Mohammad Nurul Huda Rimon

Reputation: 2535

Try this:

<li class="treeview {{ (request()->is('member/comments')) ? 'active':''  }}">
    <a href="#"><i class="fa fa-comment"></i> <span>Comments</span>
        <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
        </span>
    </a>
    <ul class="treeview-menu">
        <li class="{{ (request()->is('member/comments') && (request('q') == '')) ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments">All Comments</a>
        </li>
        <li class="{{ (request('q') == 'me') ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments?q=me">My Comments</a>
        </li>
        <li class="{{ (request('q') == 'approved') ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments?q=approved">Approved</a>
        </li>
        <li class="{{ (request('q') == 'disapproved') ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments?q=disapproved">Disapproved</a>
        </li>
    </ul>
</li>

Upvotes: 2

user7986752
user7986752

Reputation:

Use is method with if clause;

{{Request::is('sample-url') ? 'class="active"' : ''}}

(Check url, if there is 'sample-url' in url then return class="active", is not return empty.. )

Upvotes: 0

Jendrusha
Jendrusha

Reputation: 11

You can use is() method on Request object which accepts pattern to check. For example <li class="{{ request()->is('comments*') ? 'active' : '' }}">. It means if somewhere in uri 'comments' word exists then 'active' class will be added. Of course you can be more specific and you can ommit wildcard.

Upvotes: 1

Related Questions