CODEWITHSUNDEEP
aurelia
realnsleo
realnsleo

Reputation: 715

How can I show/hide navigation elements based on a user's state using Aurelia

I am quite new to Aurelia and I am loving every minute of the leaning curve. I am using Aurelia's Skeleton Navigation for es6 apps and I am currently working on a simple app where a user logs in and submits a story after providing certain details. The flow of my app is fairly simple:

Login Screen --> Screen where user provides phone number --> User submit's story

My navigation bar has "Home" and "Submit Story". However, I want to hide the "Submit Story" menu item until after the user has provided his phone number. So basically on phone number submit, if the function returns true I need the menu item to show up.

I think there are two ways to go about this. One is by binding the nav items to a true or false value depending on whether the phone number is submitted, and the other is to dynamically add the route on a successful submission of the phone number. Which one is better to use? And I would greatly appreciate a nudge in the right direction.

I tried assigning a boolean variable to the routes but it gave me mixed results. See the code below (I have included just the related code):

check_phone = false;

configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
        {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'},
        {route: 'story', name: 'story', moduleId: 'story', nav: check_phone, title: 'Submit a Story'}
    ]);
    config.mapUnknownRoutes('/');
    this.router = router;
}

phone_submit() {
    if(success) this.check_phone = true;
}

I also tried dynamically adding the route but it does not work:

configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
        {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'},
    ]);
    config.mapUnknownRoutes('/');
    this.router = router;
}

phone_submit() {
    if(success) 
        this.router.addRoute({route: 'story', name: 'story', moduleId: 'story', nav: true, title: 'Submit a Story'})
        this.router.refreshNavigation();
}

Please assist me in this. Thank you for your time!

Upvotes: 0

Views: 798

Answers (1)

mike gold
mike gold

Reputation: 1611

There is actually a settings property on the route. You can set the settings property to an object in which you can manipulate. You can use this object when you render your route and have the nav bar hide it if it has a particular property.

e.g. {route: user/:id', name: user, moduleId: './Aurelia/users, nav: false, title: 'User', settings: {isShown: true} }

Check my article on linked-in on the topic which explains using the settings property more thoroughly;

https://www.linkedin.com/pulse/routing-aurelia-framework-mike-gold?trk=mp-author-card

Upvotes: 2

Related Questions