styling improvements

[Marius A]

Hi,

Would it be possible please to prefix scss variables with sidebar-menu- ? eg
$primary-color -> $sidebar-menu-primary-color
This way they won't conflict with other components.

Would be good to have this separated as well, with the default value $primary-color, but possible to overwrite:
box-shadow: 3px 0px 0px 0px $primary-color inset; ->
box-shadow: 3px 0px 0px 0px $sidebar-menu-shadow-color inset;

Thank you!

[yaminncco]

What about using the @use rule over @import?

[Marius A]

Interesting idea. I've tried in my app styles.scss

@import "variables";
@use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";

but that gives

[vite] Internal server error: @use rules must be written before any other rules.
  ╷
3 │ @use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/assets/scss/style.scss 3:1  root stylesheet

If I move use at the top, I can't overwrite variables anymore.

Also, I was expecting to overwrite vars like this

vue-sidebar-menu.$primary-color: #ffffff;

but that gives a warning identifier expected.

Now I overwrite with

$primary-color: #ffffff; 

and this works fine. The issue is that $primary-color is very generic instead of being specific to this library.

[yaminncco]

@use "./variables.scss" as variables;
@use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
  $primary-color: variables.$sidebar-menu-primary-color
);

Where $sidebar-menu-primary-color is in variables.scss

[Marius A]

Thank you!

Shall I make a PR with
Would be good to have this separated as well, with the default value $primary-color, but possible to overwrite:

box-shadow: 3px 0px 0px 0px $primary-color inset; 
// to
box-shadow: 3px 0px 0px 0px $shadow-color inset;

[yaminncco]

Added $item-active-line-color in v5.2.0.

[Marius A]

Works great, thank you!