How to create a slide menu with Sencha Ext js 6?
<p>I am trying to create a simple example of admin dasboard with Triton theme. But can't manage how to make it right. So I need a simple example of slide menu for desktop and to change content in a content area. Now my hamburger button is streched and left menu itself is not like that one in triton theme.</p>

<pre><code>Ext.define('KitchenSink.view.Menus', 
{

extend: 'Ext.Container',
xtype: 'app-main',
//controller: 'main',
requires: [
  'Ext.Menu'
],
layout: {
  type: 'card'
},
items: [
  {
     /*xtype: 'toolbar',
     docked: 'top',
     title: 'Slider Menu',*/
     //docked: 'top',
     xtype: 'panel',
     styleHtmlContent: true,
     html: ['&lt;b&gt;Plan'].join(''),

     items: [
        {
           xtype: 'button',
           handler: function() {
              if(Ext.Viewport.getMenus().left.isHidden()){
                 Ext.Viewport.showMenu('left');
              } else {
                 Ext.Viewport.hideMenu('left');
              }
           }
        }
     ]
}],
initialize: function(){
  Ext.Viewport.setMenu(this.createMenu(),{
     side: 'left',
     reveal: true
  });
},
createMenu: function(){
  var menu = Ext.create('Ext.Menu', {
     width: 250,
     scrollable: 'vertical',
     items: [
        {
           xtype: 'button',
           text: 'Option 1',
        },{
           xtype: 'button',
           text: 'Option 2',
        }
     ]
  });
  return menu;
}


});

Ext.application({
name: 'Foo',
mainView: 'KitchenSink.view.Menus'
});
</code></pre>