now can display on left side - commander and viewer

app/components/viewer/index.hbs

-<Breadcrumb
-  @node={{@model.document_version.document}}
-  @hint="left" />
+<div class="panel viewer col m-2 p-2">
+  <Breadcrumb
+    @node={{@model.document_version.document}}
+    @extranode={{@extranode}}
+    @hint="left" />
 
-<div class="d-flex">
-  <Viewer::Thumbnails @pages={{@model.pages}} />
-  <Viewer::Pages @pages={{@model.pages}} />
+  <div class="d-flex">
+    <Viewer::Thumbnails @pages={{@model.pages}} />
+    <Viewer::Pages @pages={{@model.pages}} />
+  </div>
 </div>

app/controllers/authenticated/document.js

+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from '@ember/service';
+
+
+export default class DocumentController extends Controller {
+
+  @service currentUser;
+  @tracked extranode_id = null;
+  queryParams = ['extranode_id']
+
+  @action
+  onPanelToggle() {
+
+    if (this.extranode_id) {
+      this.extranode_id = null;
+    } else {
+      // TODO: get home folder ID from this.currentUser;
+      this.extranode_id = 75;
+    }
+  }
+}

app/routes/authenticated/document.js

 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import RSVP from 'rsvp';
 
 
 export default class DocumentRoute extends Route {
   @service store;
 
+  queryParams = {
+    extranode_id: {
+      refreshModel: true
+    }
+  };
+
   async model(params) {
     let doc_adapter,
       page_adapter,
+      node_adapter,
+      extranode,
       document_version,
       pages,
       pages_with_url;
 
+    node_adapter = this.store.adapterFor('node');
     page_adapter = this.store.adapterFor('page');
     doc_adapter = this.store.adapterFor('document');
 
@@ -19,6 +29,17 @@ export default class DocumentRoute extends Route {
     pages = await document_version.pages;
     pages_with_url = await page_adapter.loadBinaryImages(pages);
 
+    if (params.extranode_id) {
+
+      extranode = await node_adapter.findNode(params.extranode_id)
+
+      return {
+        'document_version': document_version,
+        'pages': pages_with_url,
+        'extranode': extranode
+      };
+    }
+
     return {
       'document_version': document_version,
       'pages': pages_with_url
@@ -28,4 +49,21 @@ export default class DocumentRoute extends Route {
   renderTemplate() {
     this.render('authenticated.viewer');
   }
+
+  setupController(controller, model) {
+    let _controller = this.controllerFor('authenticated.document'),
+      _auth_controller = this.controllerFor('authenticated');
+
+    if (model.extranode) {
+      console.log("Document controller setting dualpanel_mode to true");
+      _controller.set('dualpanel_mode', true);
+      _controller.set('extranode', model.extranode);
+    } else {
+      _controller.set('dualpanel_mode', false);
+      _controller.set('extranode', undefined);
+    }
+
+    _controller.set('document_version', model.document_version);
+    _controller.set('pages', model.pages);
+  }
 }

app/templates/authenticated/nodes.hbs

-
-
 <div class="panels d-flex row">
   <Commander
     @node={{this.mainnode}}

app/templates/authenticated/viewer.hbs

-<Viewer @model={{@model}} />
\ No newline at end of file
+<div class="panels d-flex row">
+  <Viewer
+    @model={{@model}}
+    @extranode={{this.extranode}}
+    @onPanelToggle={{this.onPanelToggle}}
+    @dualPanelMode={{this.dualpanel_mode}}
+    @hint="left" />
+
+  {{#if this.dualpanel_mode}}
+    <Commander
+      @node={{this.extranode}}
+      @extranode={{this.mainnode}}
+      @onPanelToggle={{this.onPanelToggle}}
+      @dualPanelMode={{this.dualpanel_mode}}
+      @hint="right" />
+  {{/if}}
+</div>