Why is my Panel doing this?

[Lake_Country_GIS]

I have been working on refining my custom widget and would like it to function similarly to that of the Jewelry Box theme in that there is a side panel that can be minimized and maximized by a small tab. 

For whatever reason the map shifts and takes my panel with it separating it from the sidebar? How do I anchor my panel to my sidebar? This is a custom theme I created for my project.

define(['dojo/_base/declare',
     'dijit/_TemplatedMixin',
     'dojo/text!./Panel.html',
     'dojo/topic',
     'jimu/BaseWidgetPanel'
],
function(declare, _TemplatedMixin, template, topic, BaseWidgetPanel) {

  return declare([BaseWidgetPanel, _TemplatedMixin], {
    baseClass: 'jimu-panel jimu-border-panel',

    templateString: template,

    
     postCreate: function(){
        this.inherited(arguments);
        this.maxWidth = this.position.width;
        console.log('max Width: ', this.maxWidth);
        console.log('postCreate Panel');
        console.log('left: ', this.position.left);
    },

    startup: function(){
        this.inherited(arguments);
        console.log('startup Panel');
    },

    onOpen: function(){
         this.inherited(arguments);
         console.log('onOpen');
    },

    setPosition: function(position){
        this.inherited(arguments);
        topic.publish('changeMapPosition', {left: this.position.left + this.position.width});
    },

    onMaximize: function() {
        html.addClass(this.barNode, 'max');
        html.removeClass(this.barNode, 'min');

        this.position.left = 0;
        this.setPosition(this.position);
        this.inherited(arguments);
    },

    onMinimize: function() {
        html.removeClass(this.barNode, 'max');
        html.addClass(this.barNode, 'min');

        //on minimize, we can't set width/height = 0 to minimize because we use border-box model
        //and the content height/width can't be nagative
        //go here for more information: http://dev.w3.org/csswg/css-ui/#box-sizing
        this.position.left = 0 - this.position.width;
        this.setPosition(this.position);
        this.inherited(arguments);
    },

    _onBarClick: function() {
         console.log('windowState', this.windowState);
         if (this.windowState === 'maximized') {
          this.panelManager.minimizePanel(this);
        } else {
          this.panelManager.maximizePanel(this);
        }
      }


  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

HTML:

<div>
  <div class="jimu-container" data-dojo-attach-point="containerNode">
  </div>
  <div class="bar" data-dojo-attach-point="barNode" data-dojo-attach-event="onclick:_onBarClick"></div>
</div>‍‍‍‍‍

CSS:

.jimu-border-panel{
  overflow: visible;
}
.jimu-border-panel>.jimu-container{
  width: 100%;
  height: 100%;
  position: relative;
}
.jimu-border-panel>.bar{
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0px;
  width: 24px;
  height: 60px;
}
.jimu-rtl .jimu-border-panel>.bar{
  left: -24px;
  right: auto;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* for IE8 */
  transform: rotate(180deg);
}
.jimu-border-panel>.bar.max{
  background-image: url(images/close_default.png);
}
.jimu-border-panel>.bar.max:hover{
  background-image: url(images/close_hover.png);
}
.jimu-border-panel>.bar.min{
  background-image: url(images/open_default.png);
}
.jimu-border-panel>.bar.min:hover{
  background-image: url(images/open_hover.png);
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any ideas would be very helpful.

Thanks!