when I login to site as a dealer user
https://doosan-nao--devpro1.sandbox.my.site.com/dealernetnextgen/login
sanchita.deshpande@doosan.com.dealer
Test1234

OCMS Content Pages
DNETHomeMasterPage
DNETMaster
Home
components
ocms_i_CustomHeader 
ocms_DNETCustomMenu.cls

ocms_t_DNETHomeLayout
ocms_i_CustomHeader <Adding the panel here >
<div >
<cms:Panel panelName="userProfileSettings" panelWidth="100%" panelHeight="100px" panelLimit="1"/>
</div>
ocms_DNETCustomMenu.cls

generateNodeHTML method

if(node.styleClass == 'user-name'){
html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getName() + 
'<b class="caret"></b></a>';   
}





/**
* @Description : ocms_DNETCustomMenu is a custom content template to display the navigation menu options
* @author :     Revathy Haridas
* @date : 31/05/2024
*/
global class ocms_DNETCustomMenu extends cms.MenuController {
    global ocms_DNETCustomMenu() {}

    global ocms_DNETCustomMenu(cms.GenerateContent gc) {
        super(gc);
    }

    global override String getHTML() {
        return getCustomTopMenu();
    }

    @TestVisible
    private List<cms.MenuNode> orderedRootNodes {
        get {
            if (orderedRootNodes == null) {
                orderedRootNodes = this.getOrderedRootNodes();
            }
            return orderedRootNodes;
        } set;
    }
    
    global String getCustomTopMenu() {
        String html = '<ul class="nav">';
        system.debug('nodes '+orderedRootNodes);
    
        Integer cnt = 0; 
        for(cms.MenuNode mn: orderedRootNodes) {
            ++cnt; 
            if(mn != null) {
                html += this.generateNodeHTML(mn, cnt == 1, cnt == orderedRootNodes.size());
            }
        }
        
        html += '</ul>';
            
        return html;
    }

    public String generateNodeHTML(cms.MenuNode node, Boolean isFirst, Boolean isLast) {
        String html = ''; 

        if (node.children != null && node.children.size() > 0) {
            System.debug('node.children >>>>>>>>'+node.children);
            System.debug('node.styleClass >>>>>>>> '+node.styleClass);
            if(node.styleClass == 'user-name'){
                html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
                html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getName()+
                    '<b class="caret"></b></a>';   
            }
            html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
            html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + node.getMenuItemName() + 
                    '<b class="caret"></b></a>';
        } else {
            html += '<li class="' + (node.active ? 'active' : '') + '">';
            html += '<a href="' + (node.targetPage == null ? '#' : node.targetPage) + '"';
            html += ' onclick="'+node.javascript+'" target="'+node.target+'">';
            html += node.getMenuItemName(); 
            html += '</a>';
        }

        if(node.children != null) {
            if(node.children.size() > 0) {
                Integer cnt = 0;    
                String menuItemName = node.getMenuItemName();
                System.debug('menuItemName >>>>>>>'+menuItemName);
                if(menuItemName != 'User Name'){
                html += '<ul class="dropdown-menu dropdown-menu-'+cnt+'" role="menu" aria-labelledby="dropdownMenu" id='+menuItemName+'>';
                html += '<li class="back-nav"><button id=back-'+menuItemName+' type="button" class="back-'+menuItemName+'">Back</button></li>';
                html += '<li>'+menuItemName+'</li>';
                }    
                for(cms.MenuNode c: node.getOrderedChildren()) {
                    cnt++;
                    if(c != null) {
                        if(c.styleClass == 'user-email'){
                            html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
                            html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getUserEmail() + 
                                '<b class="caret"></b></a>';   
                        }
                        html += this.generateNodeHTML(c, cnt==1, cnt==node.children.size()); 
                    }
                }
                html += '</ul>';
                     
            }
        }

        html += '</li>';

        if (node.level == 0) {
            html += '<li class="divider-vertical"></li>';
        }       

        return html; 
    }
}




















=======================================================================================



global class ocms_DNETCustomMenu extends cms.MenuController {
    global ocms_DNETCustomMenu() {}
    
    global ocms_DNETCustomMenu(cms.GenerateContent gc) {
        super(gc);
    }
    
    global override String getHTML() {
        return getCustomTopMenu();
    }
    
    @TestVisible
    private List<cms.MenuNode> orderedRootNodes {
        get {
            if (orderedRootNodes == null) {
                orderedRootNodes = this.getOrderedRootNodes();
            }
            return orderedRootNodes;
        } set;
    }
    
    global String getCustomTopMenu() {
        String html = '<ul class="nav">';
        system.debug('nodes '+orderedRootNodes);
        
        Integer cnt = 0; 
        for(cms.MenuNode mn: orderedRootNodes) {
            ++cnt; 
            if(mn != null) {
                html += this.generateNodeHTML(mn, cnt == 1, cnt == orderedRootNodes.size());
            }
        }
        
        html += '</ul>';
        
        return html;
    }
    
    public String generateNodeHTML(cms.MenuNode node, Boolean isFirst, Boolean isLast) {
        String html = ''; 
        
        if (node.children != null && node.children.size() > 0) {
            System.debug('node.children >>>>>>>>'+node.children);
            System.debug('node.styleClass >>>>>>>> '+node.styleClass);
            if(node.styleClass == 'user-name'){
                html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
                html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getName()+
                    '<b class="caret"></b></a>';   
            }
            html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
            html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + node.getMenuItemName() + 
                '<b class="caret"></b></a>';
        } else {
            html += '<li class="' + (node.active ? 'active' : '') + '">';
            html += '<a href="' + (node.targetPage == null ? '#' : node.targetPage) + '"';
            html += ' onclick="'+node.javascript+'" target="'+node.target+'">';
            html += node.getMenuItemName(); 
            html += '</a>';
        }
        
        if(node.children != null) {
            if(node.children.size() > 0) {
                Integer cnt = 0;    
                String menuItemName = node.getMenuItemName();
                System.debug('menuItemName >>>>>>>'+menuItemName);
                if(menuItemName != 'User Name'){
                    html += '<ul class="dropdown-menu dropdown-menu-'+cnt+'" role="menu" aria-labelledby="dropdownMenu" id='+menuItemName+'>';
                    html += '<li class="back-nav"><button id=back-'+menuItemName+' type="button" class="back-'+menuItemName+'">Back</button></li>';
                    html += '<li>'+menuItemName+'</li>';
                }
                for(cms.MenuNode c: node.getOrderedChildren()) {
                    cnt++;
                    if(c != null) {
                        if(c.styleClass == 'user-email'){
                            html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
                            html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getUserEmail() + 
                                '<b class="caret"></b></a>';   
                        }
                        if(c.styleClass == 'global-preference'){
                            html += '<li class="fa fa-gear">Gear Icon</li>';
                        }
                        if(c.styleClass == 'sign-out'){
                            html += '<li class="signouticon">Signout Icon</li>';
                        }
                        html += this.generateNodeHTML(c, cnt==1, cnt==node.children.size()); 
                    }
                }
                html += '</ul>';
                
            }
        }
        
        html += '</li>';
        
        if (node.level == 0) {
            html += '<li class="divider-vertical"></li>';
        }       
        
        return html; 
    }
}

















==================================================================
/**
* @Description : ocms_DNETCustomMenu is a custom content template to display the navigation menu options
* @author :     Revathy Haridas
* @date : 31/05/2024
*/
global class ocms_DNETCustomMenu extends cms.MenuController {
    global ocms_DNETCustomMenu() {}
    
    global ocms_DNETCustomMenu(cms.GenerateContent gc) {
        super(gc);
    }
    
    global override String getHTML() {
        return getCustomTopMenu();
    }
    
    @TestVisible
    private List<cms.MenuNode> orderedRootNodes {
        get {
            if (orderedRootNodes == null) {
                orderedRootNodes = this.getOrderedRootNodes();
            }
            return orderedRootNodes;
        } set;
    }
    
    global String getCustomTopMenu() {
        String html = '<ul class="nav">';
        system.debug('nodes '+orderedRootNodes);
        
        Integer cnt = 0; 
        for(cms.MenuNode mn: orderedRootNodes) {
            ++cnt; 
            if(mn != null) {
                html += this.generateNodeHTML(mn, cnt == 1, cnt == orderedRootNodes.size());
            }
        }
        
        html += '</ul>';
        
        return html;
    }
    
    public String generateNodeHTML(cms.MenuNode node, Boolean isFirst, Boolean isLast) {
        String html = ''; 
        
        if (node.children != null && node.children.size() > 0) {
            System.debug('node.children >>>>>>>>'+node.children);
            System.debug('node.styleClass >>>>>>>> '+node.styleClass);
            if(node.styleClass == 'user-name'){
                html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
                html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getName()+
                    '<b class="caret"></b></a>';   
            }
            html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
            html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + node.getMenuItemName() + 
                '<b class="caret"></b></a>';
        } else {
            html += '<li class="' + (node.active ? 'active' : '') + '">';
            html += '<a href="' + (node.targetPage == null ? '#' : node.targetPage) + '"';
            html += ' onclick="'+node.javascript+'" target="'+node.target+'">';
            if(node.styleClass == 'global-preference'){
             html += '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"/><circle cx="12" cy="10" r="3"/><circle cx="12" cy="12" r="10"/></svg>';
            }
                       
            html += node.getMenuItemName(); 
            html += '</a>';
        }
        
        if(node.children != null) {
            if(node.children.size() > 0) {
                Integer cnt = 0;    
                String menuItemName = node.getMenuItemName();
                System.debug('menuItemName >>>>>>>'+menuItemName);
                if(menuItemName != 'User Name'){
                    html += '<ul class="dropdown-menu dropdown-menu-'+cnt+'" role="menu" aria-labelledby="dropdownMenu" id='+menuItemName+'>';
                    html += '<li class="back-nav"><button id=back-'+menuItemName+' type="button" class="back-'+menuItemName+'">Back</button></li>';
                    html += '<li>'+menuItemName+'</li>';
                }
                for(cms.MenuNode c: node.getOrderedChildren()) {
                    cnt++;
                    if(c != null) {
                        if(c.styleClass == 'user-email'){
                            html += '<li class="dropdown ' + (node.active ? 'active' : '') + '">';
                            html += '<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">' + UserInfo.getUserEmail() + 
                                '<b class="caret"></b></a>';   
                        }
                       
                        
                            html += this.generateNodeHTML(c, cnt==1, cnt==node.children.size()); 
                        
                    }
                }
                html += '</ul>';
                
            }
        }
        
        html += '</li>';
        
        if (node.level == 0) {
            html += '<li class="divider-vertical"></li>';
        }       
        
        return html; 
    }
}












    <!-- SPF-1121 logic starts for globaluserpreference-->
    <style>
        .dropdown-menu {
        display: none; /* Ensure it's hidden by default */
        position: absolute; /* Adjust based on your layout */
        top: 100%; /* Just below the parent item */
        left: 0;
        z-index: 1000;
        }
        .dropdown-menu.show {
        display: block; /* Show when clicked */
        }
    </style>
    <script>
    function toggleDropdown(element) {
        var dropdownMenu = element.nextElementSibling;
        
        if (dropdownMenu.style.display === "block") {
            dropdownMenu.style.display = "none";
        } else {
            dropdownMenu.style.display = "block";
        }
        
        // Optional: Close other open dropdowns
        var allDropdowns = document.querySelectorAll('.dropdown-menu');
        allDropdowns.forEach(function(menu) {
            if (menu !== dropdownMenu) {
                menu.style.display = 'none';
            }
        });
    }
    </script>
    <!-- SPF-1121 logic ends for globaluserpreference-->