How to remove sidebar and header from Webpage (iframe) card

[waggy]

Hi, I am fairly new to home assistant, and I am trying to tidy up the left menu bar by moving some of the items that would normally show up there into a combined dashboard. I created a new “Admin Utilities” dashboard, and have added multiple panel (1 card) views with a webpage iframe card that points to each item I would like to include. The problem that I am running into is that often the cards load the home assistant left sidebar and top header into the iframe itself, thereby showing a duplicate sidebar and header (see attached image).

For add-ons that use ingress such as Terminal & SSH, Z-Wave JS UI, etc. I orignally directed the iframe card to “/hassio/ingress/[add on]”, for example “/hassio/ingress/core_ssh”. This causes the duplicate sidebar and header issue. I eventually stumbled my way into finding that if I opened the Web UI for each add on, I could right click in my browser and select “This Frame” > “Show Only This Frame” to get a url that doesn’t include the Home Assistant sidebar or header. I can now direct the iframe card to a url like “/api/hassio_ingress/[ingress key]/” and I get a clean view of those add-ons.

The problem I am having is sidebar items that do not use ingress such as default Home Assistant items like History, Logbook, as well as custom items like HACS or Browser Mod. Creating a lovelace card that directs to “/logbook” or “/history” or “/hacs” or “/browser-mod” includes the sidebar and header.

I have tried using Kiosk Mode from HACS, and was unsuccessful. Kiosk Mode only seems to affect dashboards that I have created myself, not default panels or panels added through other means. So when I point a webpage card to my Music dashboard at “/dashboard-music/0?kiosk” then the sidebar and header are hidden. When I instead point to “/logbook?kiosk” the sidebar and header are back.

I have also tried using card-mod to hide the sidebar and header elements, but to say that I am way out of my element with CSS is beyond an understatement. By playing around with my browser’s inspector, I found that setting ha-sidebar to “display: none;” makes the sidebar disappear but leaves a space on the left side where the sidebar would have been. If instead under home-assistant-main I set --mdc-drawer-width to 0 instead of its default value of “calc(256px + env(safe-area-inset-left))” seems to hide the sidebar how I would like and expands the rest of the page to fill as I would expect. That’s great except I have no idea how to use card-mod to modify --mdc-drawer-width, everything I have tried hasn’t taken effect as I would expect when I add it to the webpage card. I also feel like I am very likely barking up the wrong tree and that there might be some other way to get a clean view of these panels, but I don’t know if there is some equivalent to “/api/hassio_ingress/[key]” but for these other views.

I’m currently running Home Assistant on an old x86 laptop.

[waggy]

For anyone who might stumble upon this in the future, I still haven’t found a solution like I would prefer, but here’s a few workarounds that I have implemented.

I’ve created a dashboard called “Home Assistant Utilities” where I have put most of the admin things that I want occasional access to but don’t need cluttering up the sidebar. The first view on this dashboard has a stack of buttons to navigate elsewhere fairly easily.

For Logbook, History, HACS, and Browser Mod, I created buttons that navigate to the appropriate page (e.g. the Logbook button navigates to “/logbook”). This opens up the logbook page fullscreen, rather than as an iframe on the utilities dashboard. The biggest downside is that I lose a back button or top menu bar to navigate between view easily. For example, to get to logbook, I click Home Assistant Utilities > Logbook. Then to navigate from that screen to History I have to click first on Home Assistant Utilities again, and then on History. It’s more clicking than I would prefer, but it’s better than sorting through a long list on the sidebar every time.

For the Add-ons, I created a view as I previously mentioned, using “/api/hassio_ingress/[ingress key]/”, and then added a button on the first view that navigates to that view. The only downside that I have run into is that when opening one of these views in a new browser, I need to do an initial authentication, otherwise I get an error like “401: Unauthorized”. My workaround is to create a hold-action that navigates to “/hassio/addon/[add-on]” for the appropriate add-on. So for example, Terminal navigates to “/hassio/addon/core_ssh/info”. From that page, I can click “Open Web UI” to authenticate the first time. After that, the view I created works just fine. It’s a little inconvenient the first time, but it has been very helpful as I have been building out my Z-Wave network to be able to pull up the view within the dashboard rather than navigating to the add-on info page every time. I know I could show Z-Wave JS UI in my sidebar to theoretically be even faster, but I found it was overall slower navigating around when I had a cluttered sidebar, especially once I had enough menu items that I would have to scroll within the sidebar to see all the menu items. This current iteration of my setup fits in both my browser and on mobile without having to scroll to see all the menu items.

Finally, to clean up the sidebar, I used Browser Mod to create a Sidebar Order on a per-user basis that automatically hides all of the dashboards I don’t want.

Here’s a screenshot of my current setup:

I’m still open to making further changes if anyone has solutions to either my initial dream for this setup that fixes the iframe issues, or if there’s an easy fix to the occasional authentication issue I run into. I mostly wanted to provide some ideas for anyone who might stumble upon this in the future looking to set up their Home Assistant in a similar way.