Customize OctoberCMS sidebar navigation for your plugin

_sidebar.htm

<!-- New sidebar wrapper -->
<div style="background: steelblue;" class="layout-cell sidenav-tree" 
   data-control="sidenav-tree" data-search-input="#settings-search-input">
    <div class="layout">
        <div class="layout-row min-size">
            <?= $this->makePartial('$/author/plugin-name/partials/_sidebar_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('$/author/plugin-name/partials/_sidebar_menu.htm') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

_sidebar_menu.htm

<!-- Sidebar menu -->
<?php
    $sideMenuItems = BackendMenu::listSideMenuItems();
    if ($sideMenuItems):
        $collapsedGroups = explode('|',
    isset($_COOKIE['sidenav_treegroupStatus']) ? $_COOKIE['sidenav_treegroupStatus'] : null);
    $categories = [];
    foreach ($sideMenuItems as $sideItemCode => $item){
        if(!property_exists($item, 'group'))
            $item->group = 'default';
        if(!property_exists($item, 'keywords'))
            $item->keywords = '';
        if(!property_exists($item, 'description'))
            $item->description = '';
        $categories[$item->group][$sideItemCode] = $item;
    }
?>        
    <ul class="top-level">
    <?php foreach ($categories as $category => $items):
            $collapsed = in_array($category, $collapsedGroups);
    ?>
        <li data-group-code="<?= e($category) ?>"
            <?= $collapsed ? 'data-status="collapsed"' : null ?>
        >
            <div class="group">
                <h3><?= e(trans($category)) ?></h3>
            </div>
            <ul>
            <?php foreach ($items as $item): ?>
                <li class="<?= BackendMenu::isSideMenuItemActive($item) ? 'active' : null ?>"
                    data-keywords="<?= e(trans($item->keywords)) ?>">
                    <a href="<?= $item->url ?>">
                        <i class="sidebar-menu-item <?= $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>
<?php endif; ?>

_sidebar_menu_toolbar.htm

<!-- Search form on top of sidebar -->
<div class="layout control-toolbar">
    <div class="layout-cell">
        <div class="relative toolbar-item loading-indicator-container size-input-text">
            <input placeholder="<?= e(trans('system::lang.settings.search')) ?>" type="text" name="search" value="" 
                class="form-control icon search"
                id="settings-search-input"
                autocomplete="off"
                data-track-input
                data-load-indicator
                data-load-indicator-opaque
            />
        </div>
    </div>
</div>

Plugin.php

<?php namespace Author\PluginName;

use System\Classes\PluginBase;
use Backend\Facades\BackendMenu;
class Plugin extends PluginBase
{

    public function register() {
        BackendMenu::registerContextSidenavPartial('Author.PluginName',
            'sidebar-menu',
            '$/author/plugin-name/partials/_sidebar.htm');
    }

}