Dual Resize Column

Dual resize column is a custom element that adds a drag handle that allows the resizing of any two panels (expanding one and contracting the other)

Use the code bellow to implement:

<template>
    <!-- Both panels must be inside this tag -->
    <dual-resize-column>
        <div slot="resizable-element">
            <!-- Left panel -->
            <panel-group header-title="page.sidebar.documentation_trees" collapse-group="collapse-group-tree" header-class="bg-indigo-300" panel-group-class="">
                <fancy-tree max-height="400px" options.bind="treeOptions"></fancy-tree>
            </panel-group>
        </div>
        <div slot="side-element">
            <!-- Right panel -->
            <panel-group header-title.bind="headerTitle" collapse-group="collapse-group-listing" panel-group-class="">
                <datatable schema.bind="datatable" listing-id.bind="listingId" filter-model.bind="filterModel"></datatable>
            </panel-group>
        </div>
    </dual-resize-column>

    <!-- Other stuff on the page (that does not resize) -->
    <new-record route.bind="newRecordRoute"></new-record>

</template>