How to integrate a themeforest theme in Blazor web assembly?

Question

I am creating a new Blazor web assembly pwa app. I have bought a theme from themeforest and trying to integrate it in my Blazor web assembly app. I am using visual studio and .net core 3.1.202. I was able to get the layout UI to work but my side navigation is not working. I am unable to collapse or expand any menu option or even clicking on the hamburger icon doesn't work. I couldn't figure out what I have missed. There are no errors in the console window of the browser. Hence, I request help in this matter. Thanks in advance.

This is what my index.razor page looks like:

This is my wwwroot folder:

Screenshot of console window:

This is my index.html






    
    

    Light Sidebar Layout | Porto Admin - Responsive HTML5 Template
    
    
    

    
    

    
    

    
    
    

    
    
    
    

    
    
    
    
    

    
    
    


    
    
    

    
    
    

    
    





    Loading...

    
        An unhandled error has occurred.
        Reload

My MainLayout.razor

@inherits LayoutComponentBase


    
    
        
            
                
            
            
                
            
        

        
        
            

            
                
                    
                        
                    
                    
                        John Doe Junior
                        Administrator
                    

                    
                

                
                    
                        
                        
                             My Profile
                        
                        
                             Lock Screen
                        
                        
                             Logout
                        
                    
                
            
        
        
    
    

    
        

        
            
                Light Sidebar Layout

                
                    
                        
                            
                                
                            
                        
                        Layouts
                        Light Sidebar
                    

                    
                
            

            
            @Body

My NavMenu.razor





    
        Navigation
    
    
        
    



    
        

            
                
                    
                        
                        Dashboard
                    
                
                
                    
                        
                        eCommerce
                    
                    
                        
                            
                                Dashboard
                            
                        
                        
                            
                                Products List
                            
                        
                        
                            
                                Products Form
                            
                        
                        
                            
                                Categories List
                            
                        
                        
                            
                                Category Form
                            
                        
                        
                            
                                Coupons List
                            
                        
                        
                            
                                Coupons Form
                            
                        
                        
                            
                                Orders List
                            
                        
                        
                            
                                Orders Detail
                            
                        
                        
                            
                                Customers List
                            
                        
                        
                            
                                Customers Form
                            
                        
                    
                
                
                    
                        182
                        
                        Mailbox
                    
                
                
                    
                        
                        Layouts
                    
                    
                        
                            
                                Landing Page
                            
                        
                        
                            
                                Default
                            
                        
                        
                            
                                Modern
                            
                        
                        
                            
                                Boxed
                            
                            
                                
                                    
                                        Static Header
                                    
                                
                                
                                    
                                        Fixed Header
                                    
                                
                            
                        
                        
                            
                                Horizontal Menu Header
                            
                            
                                
                                    
                                        Pills
                                    
                                
                                
                                    
                                        Stripe
                                    
                                
                                
                                    
                                        Top Line
                                    
                                
                            
                        
                        
                            
                                Dark
                            
                        
                        
                            
                                Dark Header
                            
                        
                        
                            
                                Two Navigations
                            
                        
                        
                            
                                Tab Navigation
                            
                            
                                
                                    
                                        Tab Navigation Dark
                                    
                                
                                
                                    
                                        Tab Navigation Light
                                    
                                
                                
                                    
                                        Tab Navigation Boxed
                                    
                                
                            
                        
                        
                            
                                Light Sidebar
                            
                        
                        
                            
                                Left Sidebar Collapsed
                            
                        
                        
                            
                                Left Sidebar Scroll
                            
                        
                        
                            
                                Left Sidebar Big Icons
                            
                            
                                
                                    
                                        Left Sidebar Big Icons Dark
                                    
                                
                                
                                    
                                        Left Sidebar Big Icons Light
                                    
                                
                            
                        
                        
                            
                                Left Sidebar Panel
                            
                            
                                
                                    
                                        Left Sidebar Panel Dark
                                    
                                
                                
                                    
                                        Left Sidebar Panel Light
                                    
                                
                            
                        
                        
                            
                                Square Borders

user_767502 · Answer

I had the same issue with a theme from themeforest. The problem was, that all event handlers defined in theme js file are not fired by the frontend.

My solution was to find out what css things changes for an event (for example collapse menu) and to write a java script function that does that DOM maniupulation. Then I'm using JS Interopt from Blazor to call that function. Basically I rewrite all needed JS handlers by hand and call it by for example @onclick handlers in razor components.

A lot of work to do, but it works.

UPDATE:

Most of my theme components are triggered by a DOMContentLoaded event, so a simple manual call of this event is enough. I created following JS function in my custom.js file

function triggerThemeJS() {
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
        bubbles: true,
        cancelable: true
    }));
}

and call this with JS Interopt from Blazor Razor page (for example MainLayout):

@inject IJSRuntime javaScript

...

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        await javaScript.InvokeVoidAsync("triggerThemeJS");
    }
}

How to integrate a themeforest theme in Blazor web assembly?

1 Answers