googlearchive / app-drawer-template

Application template that demonstrates the PRPL pattern
28 stars 22 forks source link

Using paper-menu and paper-item instead of iron-selector+self-styled links #30

Closed mercmobily closed 8 years ago

mercmobily commented 8 years ago

Wouldn't my-app.html be nicer if this:

    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="/view1">View One</a>
      <a name="view2" href="/view2">View Two</a>
      <a name="view3" href="/view3">View Three</a>
    </iron-selector>

Became this:

<paper-menu selected="{{page}}" attr-for-selected="name">
      <paper-item name="view1">View One</paper-item>
      <paper-item name="view2">View Two</paper-item>
      <paper-item name="view3">View Three</paper-item>
    </paper-menu>

...? The only drawback I can think of is that we don't get to show that app-location actually intercepts the page change and updates the location without triggering a page reload.

atomikolex commented 8 years ago

Aren't the anchor links there for SEO reasons?

mercmobily commented 8 years ago

Ah, good point. I guess it's impossible to conciliate the two things, right? (keep the links, and still use paper-menu...)

mercmobily commented 8 years ago

This works:

<paper-menu selected="[[page]]" attr-for-selected="name">
      <paper-item name="view1"><a href="/view1">View One</a></paper-item>
      <paper-item name="view2"><a href="/view2">View Two</a></paper-item>
      <paper-item name="view3"><a href="/view3">View Three</a></paper-item>
    </paper-menu>

But it does require some CSS for the link itself....

  a.item {
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    display: inline-block;
    text-decoration: none;
    color: black;
    padding-left: 10px;
    padding-top: 12px;
  }
  a:visited {
    text-decoration: none;
    color: black;
  }

So I guess that's why...?

atomikolex commented 8 years ago

Guess they're always trying to keep it as simple as possible and guide people in the right direction.