navbar broken when I try to use with other component. any fix ?

[rainstormza]

I try to move navbar from main-panel "app.component" to component that I just create.
I create "admin component" and I want to use navbar for "admin component"

problem is .. when I resize for mobile and click toggle and click to another path in admin component
example : localhost/admin/test1 and clock to localhost/admin/test2
toggle didn't show close menu when I open it on the right side
I have to double click then toggle close happen and I can't click on the content to close sidebar for mobile

thanks for help :)

[alexandru-paduraru]

@rainstormza thank you for using our product. Are you using HTML version or Angular version?

Best,
Alex

[rainstormza]

html5
angular 2 2.3.1

now it's work

I have to create two children path first
/admin
/frontend

[alexandru-paduraru]

@rainstormza that's great! did you find also a solution for the mobile nav opening?

[rainstormza]

@alexandru-paduraru of course
I just move initMenu.js in component admin , it work well

but I still can't find a way to solve (click) function when resize to mobile and use that function in mobile nav

I think you should find a way to move html tag , not re-generate it by jquery function

[alexandru-paduraru]

@rainstormza can you please send a link to your app?

[alexandru-paduraru]

You can also try to call this code on the resize event from Angular (don't know if this event exist) or you can try to call it from jQuery (it has the resize event)

$toggle = $('.navbar-toggle');

            $toggle.click(function (){

                if(mobile_menu_visible == 1) {
                    $('html').removeClass('nav-open');

                    $('.close-layer').remove();
                    setTimeout(function(){
                        $toggle.removeClass('toggled');
                    }, 400);

                    mobile_menu_visible = 0;
                } else {
                    setTimeout(function(){
                        $toggle.addClass('toggled');
                    }, 430);

                    main_panel_height = $('.main-panel')[0].scrollHeight;
                    $layer = $('<div class="close-layer"></div>');
                    $layer.css('height',main_panel_height + 'px');
                    $layer.appendTo(".main-panel");


                    setTimeout(function(){
                        $layer.addClass('visible');
                    }, 100);

                    $layer.click(function() {
                        $('html').removeClass('nav-open');
                        mobile_menu_visible = 0;

                        $layer.removeClass('visible');

                         setTimeout(function(){
                            $layer.remove();
                            $toggle.removeClass('toggled');

                         }, 400);
                    });

                    $('html').addClass('nav-open');
                    mobile_menu_visible = 1;

                }
            });

Hope this helps.

[rainstormza]

It doesn't work
actually you can try this on your angular 2 paper dashboard

in your "navbar.component.ts" create function like this

test() {
alert('test');
}

and in your "navbar.component.html" bind function like this

           <li>
                <a (click)="test()"> <!-- this -->
                    <i class="ti-settings"></i>
                    <p>Settings</p>
                </a>
            </li>

and resize chrome to mobile mode and try to click setting button it won't work
but when you open chrome with normal mode and click , it works , alert box happened

like I said , we have to find the way that not use jQuery to re-generate those html