Persistent Navigation

[Mike Wagz]

I am working on a project using biggie. Currently, I've copied the markup for the nav into each template. I would like to make the nav persistent, so it is never actually removed and re-added to the dom. This way, I can animate menu item active states in and out between routes smoothly.

In order to achieve this, I tried moving the markup for the nav into index.html and then editing the dataAdded() method in default.js to select all links in the body instead of just in this.page:

  dataAdded() {

    this.ui = query({ el: this.page })
    
    this.a = $.all('a', config.body)
    
    utils.biggie.addRoutingEL(this.a)
  }

After this change, clicking a link would update the url in my browser, but the view would not update. Do you have any insight into this behavior?

Upon inspection of the bigwheel docs, I found this section about multi-section routes which seems promising. Do you have any experience using this technique?

[Eugene Lee]

I ran into this issue as well, and this is what I did. The author would have a better answer.

The NAV > A markup would be in the index, and then in config.js, I would setup
$nav: domselect.all('nav a'), and then in 'main.js', I would utilize - utils.biggie.addRoutingEL(config.$nav)

Now the a tags in NAV should route normally the your other pages.

[Baptiste Briel]

Hi @mikehwagz,

Yep, as pointed out by @eugjlee (thanks!) you'd need to do that in main.js.
You don't want to do it in dataAdded of default.js because it would be added/removed everytime you'd enter/leave a new section. You just want it to be added once.

What you could do is this:

main.js

import framework from 'framework'
import domselect from 'dom-select'
import utils from 'utils'

utils.biggie.addRoutingEL(domselect.all('nav a'))

framework.init()

Or, if you'd like to have more control, you could create a new class named App such as;

app.js

import framework from 'framework'
import domselect from 'dom-select'
import utils from 'utils'

class App {
    
  constructor(opt = {}) {
  
    this.init()
  }
    
  init() {
    
    this.addEvents()
    framework.init()
  }

  addEvents() {
    
    utils.biggie.addRoutingEL(domselect.all('nav a'))
  }
}

module.exports = App

...and then, initialise it

main.js

import App from './app'

const app = new App()

That way you could do more stuff in that. But... It's basically just the same.
Let me know if things are not clear enough!

Cheers ✌️

[Mike Wagz]

Thanks @eugjlee and @baptistebriel for the quick response. This definitely clears things up!

Cheers.

[Baptiste Briel]

Don't hesitate to re-open if needed!