Always Keep Active Userview Menu in Sidebar in View

Introduction

When your Joget application’s userview contains many categories and menus, navigating through the sidebar can become cumbersome. By default, upon clicking on any UI menu, the sidebar will default to the top position. So, if the currently active UI menu is at the bottom region of the sidebar, it requires scrolling to get to it, making it challenging to access menus at the bottom quickly. This guide will show you how to automatically scroll the sidebar to keep the active menu in view, enhancing the user experience.

How does it work?

This solution involves adding custom JavaScript to your userview configuration. The script identifies the active menu item and automatically scrolls the sidebar to keep it visible, preventing users from having to scroll through the sidebar to find the active menu manually.

To implement this, follow these steps:

1. Go to the UI Builder. 
2. Click Settings.
3. Within the settings menu, go to the Theme tab.
4. Click the Advanced tab.
5. Scroll down to the Custom JavaScript field.
6. Paste the following code:
   

   $(function() {
       setTimeout(
         function()
         {
           var yOffset = $("li.active").position().top;
           $("#sidebar").mCustomScrollbar("scrollTo", yOffset);
         }, 200);
   });

7. Save your changes.
8. Preview the userview to see the automatic scrolling in action.

This script uses the mCustomScrollbar function to scroll the sidebar to the position of the active menu item.