onokumus / metismenu

A collapsible jQuery menu plugin
https://onokumus.github.io/metismenu/
MIT License
1.96k stars 487 forks source link

MetisMenu highlighting all the links if anchor tag links doesnt end with .html #198

Open cwdabba opened 2 years ago

cwdabba commented 2 years ago

Welcome to the metismenu issues!

Please take a moment to:

Once have reviewed both documents, please delete everything up to and including this line and provide the following details.

Version

_(note the version of metismenu you were using when you experienced the issue (this is required for bug reports)

jQuery v3.6.0 metisMenu v3.0.7

Description

I am using Metis Menu with Laravel but there seems to be an issue with it. If the anchor URL is not ending with .html then its highlighting all the links as shown in the image below

If li > a anchor links don't have a URL ending with .html then highlighting all the links

Screenshot 2021-12-24 at 6 13 22 PM

Following is my PHP Blade code

<div class="vertical-menu">

    <div data-simplebar class="h-100">

        <!--- Sidemenu -->
        <div id="sidebar-menu">
            <!-- Left Menu Start -->
            <ul class="metismenu list-unstyled" id="side-menu">
                <li>
                    <a href="{{ route('dashboard') }}">
                        <i data-feather="command"></i>
                        <span data-key="t-dashboard">Dashboard</span>
                    </a>
                </li>

                <li>
                    <a href="{{ route('usage-analytics') }}">
                        <i data-feather="trending-up"></i>
                        <span data-key="t-usage-analytics">Usage Analytics</span>
                    </a>
                </li>

                <li>
                    <a href="{{ route('earnings') }}">
                        <i data-feather="dollar-sign"></i>
                        <span data-key="t-earnings">Earnings</span>
                    </a>
                </li>

                <li>
                    <a href="{{ route('referral-programs') }}">
                        <i data-feather="link"></i>
                        <span data-key="t-referral-program">Referral Program</span>
                    </a>
                </li>

                <li>
                    <a href="{{ route('video-repositorys') }}">
                        <i data-feather="play-circle"></i>
                        <span data-key="t-video-repository">Video Repository</span>
                    </a>
                </li>

                <li>
                    <a href="{{ route('transactions') }}">
                        <i data-feather="database"></i>
                        <span data-key="t-transaction-details">Transaction Details</span>
                    </a>
                </li>

                <li>
                    <a href="{{ route('buy') }}">
                        <i data-feather="shopping-cart"></i>
                        <span data-key="t-buy">Buy</span>
                    </a>
                </li>

                <li>
                    <a href="javascript: void(0);" class="has-arrow" aria-expanded="false">
                        <i data-feather="settings"></i>
                        <span data-key="t-settings">Settings</span>
                    </a>
                    <ul class="sub-menu" aria-expanded="false">
                        <li>
                            <a href="{{ route('dashboard') }}">
                                <i data-feather="user"></i>
                                <span data-key="t-profile">Profile</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript: void(0);" class="has-arrow" aria-expanded="false">
                                <i data-feather="briefcase"></i>
                                <span data-key="t-payout-details">Payout Details</span>
                            </a>
                            <ul class="sub-menu" aria-expanded="false">
                                <li>
                                    <a href="{{ route('payouts.bank') }}" data-key="t-payout-details">
                                        <i data-feather="credit-card"></i>
                                        <span data-key="t-bank">Bank</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('payouts.metamask') }}" data-key="t-metamask">
                                        <i data-feather="gitlab"></i>
                                        <span data-key="t-metamask">MetaMask</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li>
                            <a href="{{ route('password') }}">
                                <i data-feather="key"></i>
                                <span data-key="t-profile">Password</span>
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="{{ route('auth.logout') }}">
                        <i data-feather="power"></i>
                        <span data-key="t-logout">Logout</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- Sidebar -->
    </div>
</div>

Error message

# please paste any error messages here

metisMenu.js

// Please paste contents of metisMenu.js here, or in a gist.
// Be sure to include any additional comments that might help
// us resolve the issue.