Move DiscussionListPane out of DiscussionPage

[w-4]

Feature Request

By doing so we can increase rendering performance, so the DiscussionListPane doesn't need to fully rerender when switching discussions.

Describe the solution you'd like I suggest we put it inside an AppNavigation component, where we also render the mobile top header conditionally. We could return an ItemList so people can also extend and add custom Navigation components like a mobile bottom navigation.

export default class AppNavigation extends Component {
  view() {
    const isMobile = app.screen === 'phone';

    return [
      isMobile && <AppTopNav />,
      <AppSideNav />,
    ];
  }
}

export default class AppTopNav extends Component {
  view() {
    return (
      <div id="app-top-navigation" className="App-top-navigation" style={style}>
        {Navigation.component({ className: 'App-backControl', drawer: true })}
      </div>
    );
  }
}

export default class AppSideNav extends Component {
  view() {
    const isMobile = app.screen === 'phone';
    const isDiscussionPage = app.current.matches(DiscussionPage);

    return (
      <div id="app-side-navigation" className="App-side-navigation">
        {isDiscussionPage && !isMobile && <DiscussionListPane state={app.discussions} />}
      </div>
    );
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep the amount of open issues to a manageable minimum. In any case, thanks for taking an interest in this software and contributing by opening the issue in the first place!