@gabrielcsapo this looks great!
Perhaps in the top nav we could use tabs instead of buttons?
I also think the "logo" could fit in there, either on the left side of the tabs or above them in its own row (this would take more vertical space, though).
This is identical to what https://getmdl.io/ has.

@miguelcobain glad to hear!

Right now we are using LinkTo in the top nav instead of buttons. I was trying to use tabs but the problem is that they do not deal with subrouting correctly. So if you have tab that routes to component and then you are on component.autocomplete it doesn't select it as active.

I was trying to work with the logo but it doesn't seem like it fits as the vertical space is too much and the logo itself I tried to convert from image + text to just an image and it still feels out of place.

@miguelcobain I updated the progress picture for one of the component pages!

Right now we are using LinkTo in the top nav instead of buttons. I was trying to use tabs but the problem is that they do not deal with subrouting correctly. So if you have tab that routes to component and then you are on component.autocomplete it doesn't select it as active.

There is a way to have an is-active helper that you can use like @isSelected={{is-active "components"}} on the paper tab. This helper will return true whenever "components" or any child route is active.

I used to have my own helper, but I just found ember-router-helpers: https://github.com/rwjblue/ember-router-helpers

Regarding the logo, I guess we need to find an alternative.

@Subtletree That wouldn't work because we want the tab to be active for all components, not just a specific one.

@Subtletree That wouldn't work because we want the tab to be active for all components, not just a specific one.

Good point! In that case another option would be a helper selected=(tab-route currentRouteName) that does return currentRouteName.split('.')[0].

Since all the tabs are top level routes.

@miguelcobain I updated, would you be able to review?

@miguelcobain 👋 would you let me know if anything needs to be changed?

@gabrielcsapo I updated the PR so that it uses paper-tabs for the main nav.

I still feel that there are some things off.

• For some reason clicking on the TOC now redirects to index. This is probably related to the anchor tag pointing to a url with #, which ember interprets as a route since it is using locationType 'hash' for some reason?

• The toast example doesn't open any toast.

• I feel like the text pages should have a max-width and be centered. Otherwise they take all the page and be aligned left (especially weird in theme and addons pages, without a sidenav)

• we need to have some kind of logo, even if really simple.

I'll try to work more on this.

@miguelcobain just getting back to this as work is less busy. will fix the issues you described, will ping you in discord about the logo!

@miguelcobain update the text pages so that they are centered and not oddly left aligned.

I have fixed all outstanding issues except for the logo. @miguelcobain

@miguelcobain any updates on how we should fix the logo suggestion?

@miguelcobain if I rebase this and get it running would you be interested in merging it?

Hey @gabrielcsapo 👋 I'm mostly taking over maintenance of this project at the moment, I haven't had a chance to look at all of the open Issues and PRs yet but I would love to discuss this in more detail with you if you have the time? Are you on the Ember Community Discord? I'm real_ate#4200 on there if you want to reach out and we might arrange a call?