How to modify left Sidebar width?

Am I missing something? I’m surprised to be the first to ask this question.

Is there a way to modify the width of the left Sidebar? The wasted real estate is driving me nuts.

2025-01-18 08 50 19

I’m currently using custom-sidebar and card-mod-theme to style the Sidebar.

sidebar-card seemed promising, but unfortunately I found it too unstable.

I have the perfect CSS that I believe would suit my purposes, but (I’d love to be wrong about this) I don’t think even card-mod-theme can inject CSS that high up the element tree.

:host([expanded]) {
    --mdc-drawer-width: calc(200px + env(safe-area-inset-left));
}

Is there a way to inject this with jQuery on page load?

I am open to any suggestions.

Why not asking in card-mod-theme thread ?

That makes sense!

But wait! Amazingly, I think I stumbled my way into a working solution.

I’m loading the following in a js file as a lovelace resource:

  const style = document.createElement('style');
  style.innerHTML = `
    :host([expanded]) {
        --mdc-drawer-width: calc(200px + env(safe-area-inset-left)) !important;
    }
  `;
  document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.appendChild(style);

I’m still testing it, but so far it doesn’t seem to interfere with the narrow (collapesed) Sidebar, nor with the Sidebar in mobile view.

Stable, too!

1 Like

Good mod for people who are not using themes.
(have not tested your solution , will do it in a week)

1 Like

By the way, it should be added not as a dashboard resource, but globally as external module.

1 Like

Thank you for your encouragement and tips!

I’m still tweaking away at getting it to work the way I want it to in desktop vs mobile mode.

But once I am ready to move on I’ll figure out what you mean by ‘external module’. :+1:

Means - by “external_module_url” option in configuration.yaml. Answering from mobile, may spell this option a bit incorrectly, search in docs.
It should be “extra”, not external.

1 Like

I’d say this would be something for the custom-sidebar plugin if it would be an officially supported element.

why not ask in the discussion section of elchininet/custom-sidebar · Discussions · GitHub

Elchininet is a very active developer, and very willing to add these types of options if possible

2 Likes

The more variants we have - the better.

1 Like

opened the discussion for you here Modify sidebar width · elchininet/custom-sidebar · Discussion #299 · GitHub

join in to give it some extra weight :wink:

1 Like