CODEWITHSUNDEEP
angularsasssidebarnebular
Albin Pettersson
Albin Pettersson

Reputation: 231

Overwrite Nebular theme for one component

I'm using Nebular for my Angular app and currently im trying to figure out how to overwrite theme settings for one component on one page only, having the component used on other places using the original settings.

Example: (nb-sidebar) This is used as the menu sidebar located to the left of the screen. But I have also placed one on the right side, used for a different purpose.

Both of them are currently inheriting the themes values. So i can go into themes.scss and re-size the component but of course it affect both sidebars. I only want to re-size the right hand sided one! I have tried to overwrite this in my own [component].scss with something like:

nb-sidebar,
nb-sidebar > .expanded {
  width: 23rem;
}
nb-sidebar,
nb-sidebar > .collapsed {
  width:0px;
}

And many other variations of above without success.

Other components such as nb-card etc there are no problems to change. There's also no problem to change other features such as background color on the sidebar. But the width... no.

Any suggestions? Regards

Upvotes: 2

Views: 4197

Answers (3)

Arjohn21
Arjohn21

Reputation: 66

Based on the documentation here.

  1. Enable the custom properties on the themes.scss file

$nb-enable-css-custom-properties: true;

  1. Create a css class and access the sidebar theme variable sidebar-width

     .ticketViewSideBar {
   --sidebar-width:22rem;
 }

  2. Then use class on your html nbsidebar component

    <nb-sidebar class="ticketViewSideBar" right="true" > //some code here </nb-sidebar>

Upvotes: 2

opp
opp

Reputation: 1020

I had the exact same problem and finally got it working by adding the following to the styles.css:

.right-sidebar div.main-container.main-container-fixed {
      width: 20vw !important;
}
//adjust the margin as well to keep the sidebar in the viewport
.right-sidebar {
     margin-left: 80vw !important;
 }

Upvotes: 2

ArtemRomanovsky
ArtemRomanovsky

Reputation: 129

Let's assume you have app component with following HTML:

<nb-layout>
  <nb-sidebar>Menu</nb-sidebar>
  ...
  <nb-sidebar class="right-sidebar">...</nb-sidebar>
</nb-layout>

Notice right-sidebar class on the second sidebar. Now you could target only second sidebar via nb-sidebar.right-sidebar selector and style it as you need, for example:

nb-sidebar.right-sidebar {
  width: 100px;
}

Upvotes: 1

Related Questions