To create your own module, you must understand how to modify the layout, if this is not the case, go to the Layout section of the documentation.

Once you have mastered the modification of the layout, start by creating a layout that suits you, in this example, we will take the simplest configuration possible :

var options = {
	layout : {
		left: [
			{
            	items: [
					{
						name: 'Views',
                      	container: 'body' /* or any selector */,
						icon: 'menu-dots'
					}
            	]
        	},
		]
    }
}

var instance = new AsukaDesigner('#myId');

Our new menu is already functional, but it is currently opening an empty window, in order to add content to it, the module configuration must be modified by adding the necessary properties :

{
    name: 'Custom module',
    icon: 'bars',
    display: 'modal',
    content: function(el){
        el.innerHTML('My custom module content')
    }
},

The fallback is how the opening of the menu will be handled. You have the choice between different types of fallback: modal, drawer, inline, popover, function.

If you choose the fallback function, no window will be opened and the callback will be used ideally in the case of a function to be executed.

In other cases, the callback will take the container of the open window as a parameter.

Custom module container

You might want to display a module in a particular html element. For that, it will be necessary to define a special block which will have for id “custom” and for target “custom”.

We can then define the different modules that compose them by assigning them a container property “container” which will have the selector of your choice as a value :

var options = {
	layout : {
		left: [
			{
            	items: [
					{
						name: 'Views',
                      	container: 'body' /* or any selector */,
						icon: 'menu-dots',
    					content: function(el){
        					el.innerHTML('My custom module content')
    					}
					}
            	]
        	},
		]
    }
}

var instance = new AsukaDesigner('#myId', options);