sidebar-show not working

[davidabadi]

According to the documentation the sidebar should not be visible unless the sidebar-show class is added. Currently I do not have the class added but the sidebar is open for all screen sizes above md. I am trying to add the class sidebar-lg-show in order to only have it open if the screen size is lg or larger but seems to do nothing.

[carlospauluk]

Same here!

[curry684]

The sidebars are completely broken in recent versions. Very disappointing.

[mrholek]

Sidebar behavior will be fixed in next release, probably next week.

[curry684]

Good to hear! Are you aware the sidebar-self-hiding classes are currently also broken?

[mrholek]

@curry684 there was a bug in our docs, I will release updated docs tomorrow.

[curry684]

Looking forward, I just upgraded to 4.1.1 and sidebars are still broken when just copying the constructs from https://coreui.io/demo/4.0, specifically this style is still missing (?) causing .sidebar-fixed sidebars to cover the main content:

html:not([dir="rtl"]) .wrapper {
  padding-left: var(--cui-sidebar-occupy-start,0);
  padding-right: var(--cui-sidebar-occupy-end,0);
}

edit: same for 4.2.0-beta.0

[mrholek]

Can you send me a screenshot?

[curry684]

Not easy as I'm working on an application with highly sensitive information ;) However you can just disable the mentioned style on https://coreui.io/demo/4.0 in the div.wrapper and see what I'm seeing. When I add those lines to my own CSS the sidebars are correctly fixed.

[leonp5]

Also noticed that issue in 4.1.3.

Thanks @curry684 for the workaround 👍

[leonp5]

Did anybody get the sidebar hamburger button toggle to work?
In v. 3.4 my button HTML looks like this:

<button class="c-header-toggler c-class-toggler mfs-3" type="button" data-target="#sidebar"
        data-class="c-sidebar-show" responsive="true">
        <span class="c-header-toggler-icon"></span>
    </button>

In v. 4.1.3 i changed it to this:

<button class="header-toggler" type="button" data-coreui-target="#sidebar"
        data-coreui-class="sidebar-show" responsive="true">
        <x-hybridcms-svg svg="hamburger-menu" viewBox="512 512"></x-hybridcms-svg> <--- Laravel SVG component
    </button>

But the toggling doesn't work anymore.

I want to avoid to write the JS directly in the HTML like it is realised on the demo page.

There the onclick attribute is added to the toggle button:
onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()"

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[d3vpunk]

@mrholek

Can you send me a screenshot?

Screenshot (dashboard of the examples without images)

I think this is the behavior. The toggle button in the navigation is working but the content on the left side is not shifting. I'm using one of the last versions (~4.2)

thx @curry684 - the workaround is working nicely

[jontorrado]

Did anybody get the sidebar hamburger button toggle to work? In v. 3.4 my button HTML looks like this:

<button class="c-header-toggler c-class-toggler mfs-3" type="button" data-target="#sidebar"
        data-class="c-sidebar-show" responsive="true">
        <span class="c-header-toggler-icon"></span>
    </button>

In v. 4.1.3 i changed it to this:

<button class="header-toggler" type="button" data-coreui-target="#sidebar"
        data-coreui-class="sidebar-show" responsive="true">
        <x-hybridcms-svg svg="hamburger-menu" viewBox="512 512"></x-hybridcms-svg> <--- Laravel SVG component
    </button>

But the toggling doesn't work anymore.

I want to avoid to write the JS directly in the HTML like it is realised on the demo page.

There the onclick attribute is added to the toggle button: onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()"

For those having the same problem, if you add CoreUI from a bundler (like Webpack) I've just created a simple JS you can add and it works flawlessly. Remember to add id="header-toggler" to the hamburguer menu icon:

import CoreUI from "@coreui/coreui/dist/js/coreui.bundle";

export default class CoreUI {
  constructor() {
    const headerToggler = document.getElementById("header-toggler");
    headerToggler.addEventListener("click", () => {
      CoreUI.Sidebar.getInstance(document.querySelector("#sidebar")).toggle();
    });
  }
}

Then in your app.js just import and add new CoreUI();.

[yushine]

Anybody here? still have the same error with CoreUI v4.3.2

[bessone]

I'm upgrading a project from 2.x to 4.x and I'm also having the same problem.

The piece of code that solves it, already indicated in the previous comments, I found in the source documentation

coreui/docs/assets/scss/_layout.scss

Lines 1 to 6 in b6f641a

	.wrapper {
	width: 100%;
	@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
	will-change: auto;
	@include transition(padding .15s);
	}

Copying these lines of code into my scss solved the problem.

Strange that it has never been fixed until today.