Menu is stuck in Backpack admin panels

[lieto-dk]

I use

    "backpack/crud": "^6.7.45
    "backpack/pro": "^2.2.30",
    "backpack/theme-coreuiv2": "^1.2.7",
    "backpack/theme-tabler": "^1.2.7",

The issue is that the last used menu is stuck

So when i enter the admin panel it shows up if i click on the top level and make it disappear it comes back when i refresh the page with F5.
If i click into a list or form the menu will be visisble on top of the list/form.

Any suggestions on what to do to fix the issue. I have already reset all cookies for the site.

[backpack-ai-bot[bot]]

Based on the information provided in the knowledge sources, it appears that you're experiencing an issue with the menu behavior in Backpack v6 using the Tabler theme. This issue seems similar to a bug that was reported and fixed in an earlier version of the Tabler theme. Here are some suggestions to address your problem:

1. Update your packages:
   Make sure you have the latest versions of the Backpack packages installed. You can do this by running:

   composer update backpack/crud backpack/pro backpack/theme-tabler
   

2. Clear cache:
   As mentioned in the Upgrade Guide, clear your application's cache:

   php artisan config:clear
   php artisan cache:clear
   php artisan view:clear
   

3. Hard reload your browser:
   Do a hard-reload in your browser (Cmd+Shift+R or Ctrl+Shift+F5) to purge the browser cache.

4. Check your menu implementation:
   Ensure that you're using the correct menu implementation for the Tabler theme. The menu structure should look something like this:

   <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="true">
           <i class="nav-icon la la-group d-block d-lg-none d-xl-block"></i> Menu Item
       </a>
       <div class="dropdown-menu" data-bs-popper="static">
           <a class="dropdown-item" href="{{ backpack_url('item1') }}">
               <i class="nav-icon la la-item1"></i>Item 1
           </a>
           <a class="dropdown-item" href="{{ backpack_url('item2') }}">
               <i class="nav-icon la la-item2"></i>Item 2
           </a>
       </div>
   </li>

5. Check for JavaScript conflicts:
   Make sure there are no JavaScript conflicts on your page that might be interfering with the menu functionality.

If the issue persists after trying these steps, it might be a new bug that hasn't been reported yet. In that case, you may want to consider:

1. Temporarily switching to the CoreUIv2 theme to see if the issue is specific to the Tabler theme.
2. Reporting the issue on the Backpack GitHub repository with a detailed description of the problem and steps to reproduce it.

Remember to always back up your project before making significant changes or updates.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): [Bug] Multi-level menu error
Github Issue (closed): [Bug] Multi level menus not consistent across themes & inconsistent behaviour.
Github Issue (closed): [Bug] Loss of user management support area
Github Issue (closed): Strange behavior of drop-down menu elements
Themes|CoreUIv2 Theme
Github Issue (closed): Active menu is wrong
Github Issue (closed): [Bug] Upgrade BackPack v5 to v6
Github Issue (closed): [Bug] Dropdown doesn't expand when child menu item is active
Github Issue (closed): [Bug] In Brand new installation with v6 the sidebar menu collapse function doesn't work
Github Issue (closed): Sidebar doesn't open
Github Issue (closed): Install & test Backpack v6 - report all bugs and quirks we find
Upgrade Guide|Cache

[jcastroa87]

Hello @lieto-dk

Did you see any error in console?
Can you share the content of your menu_items.blade.php to replicate in my side.

Cheers.

[lieto-dk]

menu items file below. It works in my dev setup but not on production site. If i select anything in the menus, that menu is just being stucked over the content of the list or form that i just selected in the menu. Its very strange - have updated to latest backpack, removed cookies, done Ctrl-F5 Where does backpack store information on what menu you had open recently ? And why doesnt it close the meny when you select an element in the dropdown menu ? {{-- This file is used for menu items by any Backpack v6 theme --}} <x-backpack::menu-dropdown title="Dashboard & Data" icon="la la-dashboard"> <x-backpack::menu-dropdown-item title="Marketing Dashboard" icon="la la-dashboard" :link="backpack_url('dashboard')" /> <x-backpack::menu-dropdown-item title="Operations Dashboard" icon="la la-desktop" :link="backpack_url('dashboardoperations')" /> <x-backpack::menu-dropdown-item title="Clickouts Dashboard" icon="la la-mouse" :link="backpack_url('dashboardclickout')" /> <x-backpack::menu-dropdown-item title="Pageviews Dashboard" icon="la la-mouse" :link="backpack_url('dashboardpageview')" /> <x-backpack::menu-dropdown-item title="Clickouts" icon="la la-mouse" :link="backpack_url('clickout')" /> <x-backpack::menu-dropdown-item title="Pageviews" icon="la la-archive" :link="backpack_url('pageview')" /> <x-backpack::menu-dropdown-item title="Timeseries" icon="la la-history" :link="backpack_url('timeserie')" /> <x-backpack::menu-dropdown-item title="Timeserie Values" icon="la la-business-time" :link="backpack_url('timeserievalue')" /> </x-backpack::menu-dropdown> <x-backpack::menu-dropdown title="Site" icon="la la-sitemap"> <x-backpack::menu-dropdown-item title="Contentpages" icon="la la-file" :link="backpack_url('contentpage')" /> <x-backpack::menu-dropdown-item title="Frontposts" icon="la la-id-card" :link="backpack_url('frontpost')" /> <x-backpack::menu-dropdown-item title="Offers" icon="la la-blog" :link="backpack_url('offer')" /> <x-backpack::menu-dropdown-item title="Sites" icon="la la-globe" :link="backpack_url('site')" /> <x-backpack::menu-dropdown-item title="Site Ratings" icon="la la-star-half-alt" :link="backpack_url('siterating')" /> <x-backpack::menu-dropdown-item title="Slugs" icon="la la-sitemap" :link="backpack_url('slug')" /> </x-backpack::menu-dropdown> <x-backpack::menu-dropdown title="Ads & Affiliates" icon="la la-ad"> <x-backpack::menu-dropdown-item title="Ads" icon="la la-ad" :link="backpack_url('ad')" /> <x-backpack::menu-dropdown-item title="Affiliates" icon="la la-coins" :link="backpack_url('affiliate')" /> <x-backpack::menu-dropdown-item title="Crawljobs" icon="la la-spider" :link="backpack_url('crawljob')" /> </x-backpack::menu-dropdown> <x-backpack::menu-dropdown title="SoMe & Catalogs" icon="la la-share-alt"> <x-backpack::menu-dropdown-item title="Socialmedia" icon="la la-facebook" :link="backpack_url('socialmedia')" /> <x-backpack::menu-dropdown-item title="Socialmediaposts (Text)" icon="la la-share-alt-square" :link="backpack_url('socialmediapost')" /> <x-backpack::menu-dropdown-item title="Socialmediaposts (Offers)" icon="la la-share-alt" :link="backpack_url('socialmediapostoffer')" /> <x-backpack::menu-dropdown-item title="Socialmediastories" icon="la la-film" :link="backpack_url('socialmediastory')" /> <x-backpack::menu-dropdown-item title="Catalogs" icon="la la-book" :link="backpack_url('catalog')" /> <x-backpack::menu-dropdown-item title="Seo Keywords" icon="la la-key" :link="backpack_url('seo-keyword')" /> <x-backpack::menu-dropdown-item title="Adwords Templates" icon="la la-ad" :link="backpack_url('adwords-template')" /> <x-backpack::menu-dropdown-item title="Backlinks" icon="la la-link" :link="backpack_url('backlink')" /> <x-backpack::menu-dropdown-item title="Keywords" icon="la la-key" :link="backpack_url('keyword')" /> </x-backpack::menu-dropdown> <x-backpack::menu-dropdown title="Newsletters" icon="la la-newspaper"> <x-backpack::menu-dropdown-item title="Newsletters" icon="la la-envelope" :link="backpack_url('newsletter')" /> <x-backpack::menu-dropdown-item title="Newslettertemplates" icon="la la-wpforms" :link="backpack_url('newslettertemplate')" /> <x-backpack::menu-dropdown-item title="Sendmails" icon="la la-mail-bulk" :link="backpack_url('sendmail')" /> <x-backpack::menu-dropdown-item title="Mailtrackings" icon="la la-envelope-open-text" :link="backpack_url('mailtracking')" /> <x-backpack::menu-dropdown-item title="Subscribers" icon="la la-user-friends" :link="backpack_url('subscriber')" /> </x-backpack::menu-dropdown> <x-backpack::menu-dropdown title="Master Data" icon="la la-database"> <x-backpack::menu-dropdown-item title="Boardtypes" icon="la la-utensils" :link="backpack_url('boardtype')" /> <x-backpack::menu-dropdown-item title="Boardtype Locale" icon="la la-utensils" :link="backpack_url('boardtypelocale')" /> <x-backpack::menu-dropdown-item title="Category" icon="la la-layer-group" :link="backpack_url('category')" /> <x-backpack::menu-dropdown-item title="Category Locale" icon="la la-layer-group" :link="backpack_url('categorylocale')" /> <x-backpack::menu-dropdown-item title="Countries" icon="la la-globe" :link="backpack_url('country')" /> <x-backpack::menu-dropdown-item title="Country Locale" icon="la la-globe" :link="backpack_url('countrylocale')" /> <x-backpack::menu-dropdown-item title="Country Match" icon="la la-equals" :link="backpack_url('countrymatch')" /> <x-backpack::menu-dropdown-item title="Departures" icon="la la-plane-departure" :link="backpack_url('departure')" /> <x-backpack::menu-dropdown-item title="Departure Match" icon="la la-book" :link="backpack_url('departurematch')" /> <x-backpack::menu-dropdown-item title="Destinations" icon="la la-plane-arrival" :link="backpack_url('destination')" /> <x-backpack::menu-dropdown-item title="Destination Locale" icon="la la-plane-arrival" :link="backpack_url('destinationlocale')" /> <x-backpack::menu-dropdown-item title="Destination Match" icon="la la-equals" :link="backpack_url('destinationmatch')" /> <x-backpack::menu-dropdown-item title="FAQs" icon="la la-th-list" :link="backpack_url('faq')" /> <x-backpack::menu-dropdown-item title="FAQ Auto Questions" icon="la la-th-list" :link="backpack_url('faqautoquestion')" /> <x-backpack::menu-dropdown-item title="Ratings" icon="la la-star" :link="backpack_url('rating')" /> <x-backpack::menu-dropdown-item title="Rating Locale" icon="la la-star" :link="backpack_url('ratinglocale')" /> <x-backpack::menu-dropdown-item title="Traveltypes" icon="la la-hotel" :link="backpack_url('traveltype')" /> <x-backpack::menu-dropdown-item title="Traveltype Locale" icon="la la-hotel" :link="backpack_url('traveltypelocale')" /> </x-backpack::menu-dropdown> <x-backpack::menu-dropdown title="Settings & Admin" icon="la la-tools"> <x-backpack::menu-dropdown-item title="Batchjobs" icon="la la-calendar-day" :link="backpack_url('batchjob')" /> <x-backpack::menu-dropdown-item title="Currencies" icon="la la-coins" :link="backpack_url('currency')" /> <x-backpack::menu-dropdown-item title="Failed Schedules" icon="la la-exclamation-triangle" :link="backpack_url('failedschedule')" /> <x-backpack::menu-dropdown-item title="Processed Schedules" icon="la la-clock" :link="backpack_url('processedschedule')" /> <x-backpack::menu-dropdown-item title="Locales" icon="la la-language" :link="backpack_url('locale')" /> <x-backpack::menu-dropdown-item title="Monitors" icon="la la-chart-bar" :link="backpack_url('monitor')" /> <x-backpack::menu-dropdown-item title="Landingpages" icon="la la-file" :link="backpack_url('landingpage')" /> <x-backpack::menu-dropdown-item title="Settings" icon="la la-cog" :link="backpack_url('setting')" /> </x-backpack::menu-dropdown>

[lieto-dk]

Checked the console only thiis jquery warning Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help https://xhr.spec.whatwg.org/#sync-warning ***@***.***/dist/jquery.min.js?f1b364aee29b>

[jcastroa87]

As I see you are using tabler, the latest version is 1.2.17 you are using an old one, did you try to update it?

Cheers.

[lieto-dk]

I updated to 1.2.17 earlier today - did not fix the issue. Have now forced composer to this version to cehck if it was installed in production and it was.

[jcastroa87]

This error was fixed many versions ago, so look like there is cached version of template displaying, can you try in your production environment this:

php artisan basset:check

Check everything is ok on that's command.

Then try:

php artisan basset:clear
php artisan optimize:clear

Let me know if that's work for you.

If you have any other cache method, please clear too.

Cheers.

[lieto-dk]

I am getting
ERROR Error fetching the file.

│ Backpack Basset failed to check it's working properly.
│
│ This may be due to multiple issues. Please ensure:
│ 1) APP_URL is correctly set in the .env file.
│ 2) Your server is running and accessible at https://lastminutecharter.eu.
│ 3) The public disk is properly configured in config/filesystems.php.
│ Optionally, basset provides a disk named "basset", you can use it instead.
│ 4) The storage symlink exists and is valid (by default: public/storage).
│
│ For more information and solutions, please visit the Backpack Basset FAQ at:
│ https://github.com/laravel-backpack/basset#faq

on one of my production web servers (they are loadbalanced in a forge setup). In dev i get cURL error 7: Failed to connect to lastminutecharter.test port 80: Connection refused (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for http://lastminutecharter.test/storage/basset/vendor/backpack/basset/tests/Helpers/basset-test.js. as this is not accessiblke from the internet.

any suggestions for my setup ?

[jcastroa87]

So the problem is there, you are serving an old version of theme because of cache problem. Did you check instructions to solve this?
When the basset problem is solve, you can try to clear all the cache.

Cheers.

[lieto-dk]

I found the solution.
Basset is actually working in the production environment, but due to the webservers being behind a load balencer the check doesnt work.
What i did was run the php artisan basset:fresh on my webservers - and that refreshed the assets. I have now added this to my deployment script as suggested in https://github.com/Laravel-Backpack/basset. Thx for sending me in the right direction !
/jens

[jcastroa87]

That's great, you find the solution. I will close this issue, but please feel free to re-open or create a new one if needed.

Cheers.