Navigating to SideDrawer


#1

Hi,

I want to navigate to a SideDrawer component after a login page. That is, the login page is a usual Page. And when the user will log in, he should land in the SideDrawer page. Just like the nativescript side drawer template. I’ve tried to navigate using general navigation method, but it is not working. Any kind of help will be appreciated. Thanks.


#2

The latest {N} example uses SideDrawer as app root so it becomes the host for all pages within it. Make sure you choose the right frame when navigating from login.

Learn more about changes in 4.x with frames - https://www.nativescript.org/blog/structuring-your-pages-sidedrawers-and-tabviews-with-nativescript-4.0

If still not able to identify your issue, try to create a playground example and share.


#3

My query is related on same topic. Nativescript 4 and RadSideDrawer as a root element.

I had done as given in documentation, It is working also. In my app I have some menus for guest user and some additional menus for the Login Users

After Login I want the menu list for login user should be loaded and In Header Section of SideDrawer User Name and profile picture should be loaded.

Can anybody can help me how I can do that?

I am new to the forum, I found same topic related to my issue. So I posted here, If it is not ok, then can anybody please guide for the process?


#4

Thank you. I’ll look through the article. As a workaround, I am using the Login form as one of the Page under SideDrawer. And on the login screen, I’ve disabled the swipe gesture that reveals the drawer.


#5

I did that on one of my application. For loading menus for logged in user, I had to restart the application programmatically. And before restarting, the application saved a boolean settings “isLoggedIn” to true. You also can try that. Check nativescript’s application settings documentation. And let me know if there is any better solution.


#6

hi,

Thanks for your reply.

Can you please give idea or reference about how to restart the application programmatically?


#7

Please have a look here:

https://github.com/NathanaelA/nativescript-master-technology


#8

Hi @sowrensen, i’m trying to navigate to a SideDrawer component after login as well. I have tried to place the login page within the navigation as well.

Here’s some of my login code:

function signIn() {
    user.login()
        .catch(function(error) {
            console.log(error);
            dialogsModule.alert({
            message: "Unfortunately we could not find your account.",
            okButtonText: "OK"
            });
            return Promise.reject();
            })
        .then(function() {
             frameModule.topmost().navigate({
                moduleName: "home/home-page",
                transition: {
                    name: "fade"
                }
            });
    });
}

Do you mind sharing how do you handle the navigation after login? Thanks.


#9

I am just switching the Frame in SideDrawer content page.

<Frame defaultPage="{{ isLoggedIn ? 'home/home-page' : 'login/login-page' }}"></Frame>

And I am also not showing the Login page to the drawer content. Not sure if it is that much efficient way to do this, but it is working fine.


#10

Thanks for the reply. I will try it.