Second nav-sidebar in sidebar-custom with same behavior as main-sidebar

[thomasjoscht]

Hey,

I'd like to set a settings button in "sidebar-custom" area (layout-fixed) - like described in docs. This button should behave like a normal nav-item inclusive shrink in collapsed state (sidebar-collapse). I've tried to insert a new nav-sidebar element, but it does not work for collapsing. Has anyone a simple fix? Or it is necessary to copy all CSS stuff of main-sidebar?

<div class="sidebar-custom">
    <ul class="nav nav-pills nav-sidebar nav-child-indent nav-flat nav-collapse-hide-child">
        <li class="nav-item">
            <a class="nav-link " href="/Settings">
                <i class="nav-icon fa-solid fa-cogs"></i>
                <p>Einstellungen</p>
            </a>
        </li>
    </ul>
</div>

Workaround

Currently I'm using a hacki workaround which does not use sidebar-custom. Instead I'm inserting in "sidebar" a sidebar-footer with position: absolute. This works but has few drawbacks and it's clearly not the intended way. But it works ;-)

<!-- Footer -->
<!-- NOTE: For enabling you must also add sidebar-with-footer to main-sidebar -->
<div class="sidebar-footer">
    <ul class="nav nav-pills nav-sidebar nav-flat flex-column border-top">
        <li class="nav-item">
            <a class="nav-link " href="/Settings">
                <i class="nav-icon fa-solid fa-cogs"></i>
                <p>Einstellungen</p>
            </a>
        </li>
    </ul>
</div>

...


.sidebar-with-footer .sidebar {
    height: calc(100% - (3.5rem + 2.6rem))!important;
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    background-color: #222d32;
    height: 2.3rem;
}

Thx for your help.

Regards
Thomas

AdminLTE v3.2.0