dalborgo commented 5 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[X] I am running the latest version
[X] I checked the documentation and found no answer
[X] I checked to make sure that this issue has not already been filed
[X] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

View the background-image in the Sidebar like the "Light Bootstrap Dashboard PRO React"

Current Behavior

The background-image is not visible

Failure Information (for bugs)

I can't set the _sidebar-and-main-panel.scss correctly to add this feature.

Steps to Reproduce

I added the code with the image. I can see the image in the "browser devtools" but I don't know how change the scss to show it.

Sidebar.jsx:

<div
        className="sidebar"
        data-color={this.props.bgColor}
        data-active-color={this.props.activeColor}
        data-image={image}
      > 
<div className="sidebar-background" style={bgImage}></div>

Context

Device: Laptop
Operating System: Win10
Browser and Version: Firefox 64

einazare commented 5 years ago

Hello again, @dalborgo ,

Sorry for this late response. It was a bit of a struggle to achieve your desired effect. You will need to add the following scss/css code in your project:

.sidebar .sidebar-background:after{
  display: none;
}
.sidebar[data-image]:after{
  opacity: 0.77;
}

Best, Manu