CODEWITHSUNDEEP
menupolymer
master_chef
master_chef

Reputation: 435

Polymer core-collapse inside of core-menu

I'm having trouble getting links in a core-collapse section of a core-menu to open properly. I think this is something really basic, but I'm new to Polymer and just learning the ropes. I probably have extra code in here, but after following the SPA example I wanted to set up something similar without the fancy script based linking. But now when I click on my sub-menus the links for "Teacher Page 2" and "Teacher Page 3" don't work, and the final menu header (the account-balance icon) takes you to 'Teacher Page 2'. Here is my code:

  <body unresolved fullbleed>
   <template is="auto-binding">
    <core-scaffold id="scaffold">
     <nav>
      <core-toolbar><span>Menu</span></core-toolbar>
       <core-menu valueattr="hash" selected="{{route}}">
        <core-item icon="social:school" label="students" onclick="document.querySelector('#smenu').toggle();">
        </core-item>
        <core-collapse id="smenu">
         <paper-item hash="students" noink>
          <core-icon icon="label-outline"></core-icon>
          <a href="#students">Student Page</a>
         </paper-item>
       </core-collapse>   
     <core-item icon="social:people" label="teachers" onclick="document.querySelector('#tmenu').toggle();">
    </core-item>
     <core-collapse id="tmenu">
      <paper-item hash="teachers1" noink>
       <core-icon icon="label-outline"></core-icon>
       <a href="#teachers1">Teacher Page 1</a>
     </paper-item>
    <paper-item hash="teachers2" noink>
     <core-icon icon="label-outline"></core-icon>
     <a href="#teachers2">Teacher Page 2</a>
    </paper-item>
   <paper-item hash="teachers3" noink>
    <core-icon icon="label-outline"></core-icon>
    <a href="#teachers3">Teacher Page 3</a>
   </paper-item>
 </core-collapse>
<core-icon icon="account-balance" label="support"></core-icon>
</core-menu>
</nav>
<!-- flex makes the bar span across the top of the main content area -->
 <core-toolbar tool flex>
  <!-- flex spaces this element and jusifies the icons to the right-side -->
  <div flex>Application</div>
  <core-icon-button icon="refresh"></core-icon-button>
  <core-icon-button icon="add"></core-icon-button>
 </core-toolbar>
<div layout horizontal center-center fit>
 <core-animated-pages  valueattr="hash" selected="{{route}}" transitions="slide-from-right">
  <section hash="students" layout vertical center-center>
   <div>Student Home</div>
  </section>
  <section hash="students2" layout vertical center-center>
   <div>
    Student Page 1
   </div>
  </section>
  <section hash="teachers" layout vertical center-center>
   <div>Teacher Home</div>
  </section>
  <section hash="teachers1" layout vertical center-center>
   <div>Teacher Materials 1</div>
  </section>
  <section hash="teachers2" layout vertical center-center>
   <div>Teacher Materials 2</div>
  </section>
  <section hash="teachers3" layout vertical center-center>
   <div>Teacher Materials 3</div>
  </section>
</core-animated-pages>
</div>
</core-scaffold>
</template>
</body>

Upvotes: 1

Views: 1041

Answers (1)

LostInBrittany
LostInBrittany

Reputation: 1162

Here you have a Plunker working as you intended and based on your code: http://plnkr.co/edit/6MKF2uni2p6g6jlY0uzP?p=preview

I've used <core-submenu> instead of <core-collapse>as it seems the intended way in last iterations of Polymer.

To make the sub-menu selection I had to do some custom method handler. I think there can be a cleaner way, but I didn't find it today :)

Hope it help!

The relevant most part of the code:

<polymer-element name="my-core-menu" attributes="route">
  <template>
    <core-toolbar><span>Menu</span></core-toolbar>
    <h1>Route: {{route}}</h1>
    <core-menu id="menu" on-core-select="{{mainMenuSelected}}">
      <core-submenu icon="social:school" label="Students" hash="students" >
        <core-item icon="label-outline" label="Student Page" on-click="{{menuItemSelected}}"></core-item>        
      </core-submenu>
      <core-submenu icon="social:school" label="Teachers"  hash="teachers" >
        <core-item icon="label-outline" label="Teacher Page 1" hash="teachers1" on-click="{{menuItemSelected}}"></core-item>  
        <core-item icon="label-outline" label="Teacher Page 2" hash="teachers2" on-click="{{menuItemSelected}}"></core-item> 
        <core-item icon="label-outline" label="Teacher Page 3" hash="teachers3" on-click="{{menuItemSelected}}"></core-item>       
      </core-submenu>

      <core-icon icon="account-balance" label="support"></core-icon>
    </core-menu>
  </template>
  <script>
  Polymer("my-core-menu", {
     route: "students",
     mainMenuSelected:function(event, detail, sender) {
      if (detail.isSelected) {
        console.log("tick! "+detail.item.getAttribute("hash"))
        this.route =  detail.item.getAttribute("hash");
      }
     },
     menuItemSelected: function(event, detail, sender) {
      this.route = sender.getAttribute("hash");
     }
  });
</script>
</polymer-element>

Upvotes: 3

Related Questions