How to make a collapsable sidebar with tabpanel in ExtJs 6

Question

I have a vertical tabpanel (sidebar like). Every tab has an icon and a title. I want to add a menu button and make this panel collapsable. When it's collapsed, you only see the icon (like in this example: examples.sencha.com/extjs/6.0.2/examples/admin-dashboard/#dashboard).

Main.js

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype:  'app-main',
    id:     'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
         ...
    ],

    controller: 'main',
    viewModel:  'main',

    ui: 'navigation',

    header: {
        flex:   1,
        height: 30,
        cls:    'main-header',
        layout: {
            type:  'hbox',
            align: 'stretch'
        }
    },

    // sidebar settings
    tabRotation: 0,
    tabPosition: 'left',
    tabBar:      {
        layout: {
            pack: 'center'
        }
    },

    //activeTab: 1,
    items: [
        {
        title:         "tab1",
        xtype:         'tab1x',
        iconCls:       'x-fa fa-file sidebar-tab-icon',
        index:         1
    }
    ...
    ]
});

Answer 1

You'll have to do it partially in js and part in css. Here is a fiddle .