Anyone know how to integrate the new collapsible menu, used in System, in plugin.?

Thanks

From looking at the source, modules/system/partials/_system_sidebar.htm, which defines the sidebar, looks like this:

<div class="layout-cell sidenav-tree" data-control="sidenav-tree" data-search-input="#settings-search-input">
    <a class="back-link" href="<?= Backend::url('system/settings') ?>"><i class="icon-angle-left"></i><?= e(trans('system::lang.settings.menu_label')) ?></a>

    <div class="layout">
        <div class="layout-row min-size">
            <?= $this->makePartial('@/modules/system/partials/_settings_menu_toolbar.htm') ?>
        </div>

        <div class="layout-row">
            <div class="layout-cell">
                <div class="layout-relative">

                    <div class="layout-absolute">
                        <div class="control-scrollbar" data-control="scrollbar">
                            <?= $this->makePartial('@/modules/system/partials/_settings_menu.htm') ?>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

With the sidebar itself populated by _settings_menu_items.htm:

<ul class="top-level">
    <?php foreach ($items as $category => $items):
        $collapsed = in_array($category, $collapsedGroups);
    ?>
        <li data-group-code="<?= e($category) ?>" <?= $collapsed ? 'data-status="collapsed"' : null ?>>
            <div class="group">
                <h3><?= e($category) ?></h3>
            </div>

            <ul>
                <?php foreach ($items as $item): ?>
                    <li class="<?= strtolower($item->owner) == $context->owner && strtolower($item->code) == $context->itemCode ? 'active' : false ?>" data-keywords="<?= e(trans($item->keywords)) ?>">
                        <a href="<?= $item->url ?>">
                            <i class="<?= $item->icon ?>"></i>
                            <span class="header"><?= e(trans($item->label)) ?></span>
                            <span class="description"><?= e(trans($item->description)) ?></span>
                        </a>
                    </li>
                <?php endforeach ?>

            </ul>

        </li>
    <?php endforeach ?>
</ul>

Most forms will have a section:

<?php Block::put('form-sidebar') ?>
    <div class="hide-tabs"><?= $this->formRenderSecondaryTabs() ?></div>
<?php Block::endPut() ?>

You could try to make your own partial based on the system menu, and use Block::startBlock('form-sidebar') / Block::endBlock() to override the sidebar. I'm not sure how this would work out or if it's really worth it, though..

I'd recommend you stick with the regular sidebar and leave the fancy special one for the settings area.

Last updated 9 years ago

Thanks I figured out and write this tutorial (http://octobercms.com/forum/post/creating-collapsible-sidenav-menu). I don't know if is the correct way, but works.

(sorry my english)