Navigation menu on the left side with close and open button in ASP.NET Core razor pages application

Question

I am using razor pages for my application. I tried to move the navigation menu from top to left side. I followed the steps mentioned in this link how to create sidebar menu in b

Answer 1

1. the simple-sidebar.css can be found on [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site . See the comment of the answer you posted above .

2. Simply download the lib and copy thesimple-sidebar.css to wwwroot/lib/simple-sidebar/css/simple-sidebar.css .

and now you could add a link in you layout:

simple-sidebar is a dead simple css lib which only requires your html structure in a conventional way.

    

        

            Home
            Pinpad
        
    




    
    

        三
        

            

                Home
            
            

                Pinpad
            
        
    

    
    

        

            @RenderBody()
        
        

    

and add a style to show nav button and left side :

At last , to toggle the sidebar , bind a function to handle the event :

$(document).ready(function () {
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
});

Here's a screenshot:

Here's the complete code list:

    
    
    
        
        
        
    
        
        
            
            
        
        
            
            
        
        
    
    
        

            

                

                    Home
                    Pinpad
                
            
        
        

            

                三
                

                    

                        Home
                    
                    

                        Pinpad
                    
                
            
    
            

                

                    @RenderBody()
                
                

            
        
    
        
            
            
            
        
        
            
            
            
        
        
    
        @RenderSection("Scripts", required: false)