website shelf menu gets stuck on a page where first nav item has sub headings

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

If you go to the guides page right now, you will find that while the content displayed is that of the guides/index.md page, the shelf on the left is already auto-expanded to show the link heading children of the first shelf item.

However, clicking any of those links or the nav item itself does nothing. The only way to access the content is to click the downward facing carrot, which is not very intuitive.

Details

It is likely due to this logic, which auto expands the first selected item automatically, but I don't think it checks to see if it's on a top level / index.md route, e.g. /guides/ to know if it should expand or not.

  expandRoute(path) {
    // find list item containing current window.location.pathname
    let routeShelfListIndex = this.shelfList.findIndex(list => {
      return list.item.link.indexOf(path) >= 0;
    });

    if (routeShelfListIndex > -1) {
      this.shelfList[routeShelfListIndex].selected = true;
      this.selectedIndex = routeShelfListIndex;
      // force re-render
      this.requestUpdate();
    }
  }

This gets called during onConnectedCallback so will happen each time. This isn't an issue for other pages because so far the guides page is the only page that has linkHeadings for it's first shelf child.

[thescientist13]

One thing I notice is that the shelf is always firing the connectedCallback event, even if clicking shelf items within a single top level page. (e.g. just selecting the items from the left without changing the header navigation).

I wonder if this is related to the multiple fetch calls we're seeing?

[hutchgrant]

I have an explanation for why connectedCallback is called multiple times.

It has to do with the routing.

connectedCallback: Invoked when a component is added to the document’s DOM.

lit-element docs

When I click the netlify route, the component is readded to the dom, which calls the connectedCallback again for the entire tree.

page-template 
 |-------- header
 |-------- shelf
 |-------- wc-md-component
 |--------- footer

Entire thing is reloaded every single route change after we download the html file and hydrate the application. It's not checking state to see if the needed data already exists on client.

[hutchgrant]

Currently, we're set to query graphql on connectedCallback and instead it should be conditionally, in our case we really only need to fetch a new menu when the main category changes(docs -> getting-started, etc). We're also not managing the state correctly here as the query data is lost each time a route changes.

[thescientist13]

Also noticing this bug, where if you go to a page and return, it's shelf items will not expand / collapse after an initial expand / collapse

Steps

1. Go to website (www.greenwoodjs.io)
2. Go to any page with expandable side nav items, like About (from header)
3. Go to Docs page (from header)
4. Go back to About page (from header)
5. Expand How It Works
6. Collapse How It Works
7. Expand How It Works

Expected

User could keep expanding / collapsing

Actual

Section no longer expands / collapses

[hutchgrant]

I can't replicate this, are you missing a step here?

[thescientist13]

Created a video and posted to the Slack channel. I think it's mainly around the carrot's themselves, for some reaosn.

[thescientist13]

Linking to #112 (comment) since this is more related to CSS / UX, and not any bug per se.