pretty good dual panel mode

app/components/breadcrumb.hbs

@@ -4,7 +4,10 @@
       <li class="breadcrumb-item">
           <LinkTo
             @route="authenticated.nodes"
-          @model={{node}}>{{node.title}}</LinkTo>
+            @model={{node.id}}
+            @query={{this.query}}>
+              {{node.title}}
+          </LinkTo>
       </li>
     {{/each}}
   </ol>

app/components/breadcrumb.js

@@ -20,4 +20,13 @@ export default class BreadcrumbComponent extends Component {
     return _nodes.reverse();
   }
 
+  get query() {
+    if (this.args.extranode) {
+      return {
+        extranode_id: this.args.extranode.id
+      }
+    }
+
+    return {};
+  }
 }

app/components/folder.hbs

@@ -2,7 +2,9 @@
     <div class="icon folder"></div>
     <div class="title">
         <LinkTo
-            @route="authenticated.nodes" @model={{@model}}>
+            @route="authenticated.nodes"
+            @model={{@model.id}}
+            @query={{this.query}}>
                 {{@model.title}}
         </LinkTo>
     </div>

app/components/folder.js

+import { A } from '@ember/array';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+
+export default class FolderComponent extends Component {
+
+  get query() {
+    if (this.args.extranode) {
+      return {
+        extranode_id: this.args.extranode.id
+      }
+    }
+
+    return {};
+  }
+}

app/components/panel.hbs

+<div class="panel">
   <div>
     <button class="btn btn-bordered btn-light btn-flat"
     type="button">
@@ -18,8 +19,9 @@
     @onClose={{this.closeNewFolderModal}}
     {{show-when this.show_new_folder_modal}} />
 
-<Breadcrumb @node={{@node}} />
+  <Breadcrumb @node={{@node}} @extranode={{@extranode}} />
 
   {{#each @nodes as |node|}}
-  <Folder @model={{node}} />
+    <Folder @model={{node}} @extranode={{@extranode}} />
   {{/each}}
+</div>
\ No newline at end of file

app/controllers/authenticated/nodes.js

@@ -4,7 +4,5 @@ import { tracked } from "@glimmer/tracking";
 
 
 export default class NodesController extends Controller {
-  queryParams = ['extrapanelc'];
-
-  @tracked extrapanelc = null;
+  queryParams = ['extranode_id'];
 }

app/routes/authenticated/nodes.js

 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { tracked } from "@glimmer/tracking";
+import RSVP from 'rsvp';
 
 
 export default class FolderRoute extends Route {
   @service store;
 
-  queryParams = ['extra'];
-  @tracked extra = null;
+  queryParams = {
+    extranode_id: {
+      refreshModel: true
+    }
+  };
 
+  model(params) {
+    let response, adapter;
 
-  async model(params) {
-    let response, adapter, query_params;
+    adapter = this.store.adapterFor('node');
 
+    if (params.extranode_id) {
+      return RSVP.hash({
+        node: adapter.findNode(params.node_id),
+        extranode: adapter.findNode(params.extranode_id)
+      });
+    }
 
-    query_params = this.paramsFor('authenticated.nodes');
-    console.log(`query_params=${this.query_params}`);
-    console.log(`extra=${this.extra}`);
+    return adapter.findNode(params.node_id);
+  }
 
-    adapter = this.store.adapterFor('node');
+  setupController(controller, model) {
+    let _controller = this.controllerFor('authenticated.nodes');
 
-    return adapter.findNode(params.node_id);
+    if (model.extranode) {
+      _controller.set('dualpanel_mode', true);
+      _controller.set('mainnode', model.node);
+      _controller.set('extranode', model.extranode);
+    } else {
+      _controller.set('dualpanel_mode', false);
+      _controller.set('mainnode', model);
+    }
   }
 }

app/templates/authenticated/nodes.hbs

+<div class="panels d-flex">
   <Panel
-  @node={{@model}}
-  @nodes={{@model.children}} />
+    @node={{this.mainnode}}
+    @nodes={{this.mainnode.children}}
+    @extranode={{this.extranode}} />
 
-{{#if this.extrapanelc}}
-  Extra Panel={{this.extrapanelc}}!
+  {{#if this.extranode}}
+    <Panel
+      @node={{this.extranode}}
+      @nodes={{this.extranode.children}}
+      @mainnode={{this.mainnode}} />
   {{/if}}
+</div>
\ No newline at end of file