I have been searching for a solution to hide/unhide sidebar and topbar as I want to design a dashboard. However, while I’m designing I don’t want to loose the option of switching back and forth to different views and all the options or might still keep the bars if I decide. If I use one of the themes for mobile like bubble dark or any other theme or select hide side bar, I can’t get it back.
Can someone please suggest how to toggle hide/unhide bars ?
Hi @ausfas
Have you looked at the HACS component Kiosk Mode?
Whilst this won’t give you a simple toggle, you can easily change the options to show and hide various bits of the UI.
If I use the Kiosk component, how do I pass the following via toggle switch:
kiosk_mode:
entity_settings:
- entity:
input_boolean.hide_sidebar: 'on'
hide_sidebar: true
- entity:
sensor.hide_header: 'on'
hide_header: true
- entity:
input_text.kiosk: 'true'
kiosk: true
On the other hand, how can I pass the followng I’m trying if I can enable or disable the side and top bars that are hidden when Bubble card theme is used on mobile GitHub - Clooos/Bubble: A dark minimalist theme with a mobile first approach for Home Assistant
card-mod-view-yaml: |
hui-sidebar-view:
$: |
.container {
overflow: hidden;
/* padding: 6px; */
}
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
As I said:
I’ve pasted this above the raw configuration:
kiosk_mode:
admin_settings:
entity_settings:
- entity:
input_boolean.hide_sidebar: 'on'
hide_sidebar: true
- entity:
sensor.hide_header: 'on'
hide_header: true
- entity:
input_text.kiosk: 'true'
kiosk: true
and have created the toggle
type: entities
entities:
- input_boolean.hide_sidebar
but its not working 
Looking at the documentation, I don’t think you can nest entity_settings: within admin_settings:
Looks like Kiosk mode is not maintained or supported after recent changes.
Can confirm with admin_settings removed, still no effect.
I’ve tried the following code:
Bubble:
# Existing theme settings...
card-mod-theme: Bubble
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
card-mod-view-yaml: |
hui-sidebar-view:
$: |
.container {
overflow: hidden;
display: {{ 'none' if states('input_select.sidebar_topbar_visibility') == 'Hide' else 'block' }};
}
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
but still not working
Kiosk-mode is highly maintained, but you should move to the repo managed by NemesisRE
the former by Maykar indeed was marked legacy some time ago
edit
however, now that I test my Kiosk=-mode settings, I do notice some rather unexpected behavior… it was 100% perfect before, and needs a reload sometimes, or simply hides another element than the one selected…
might need some further investigation and file an issue in that repo so Elchininet can have a closer look
Openend the issue at [BUG] settings need reload to actually happen · Issue #271 · NemesisRE/kiosk-mode · GitHub
update
found the issue and it was Not related to Kiosk-mode.
Kiosk-mode functioning perfectly for hiding sidebar, and 100s of other detailed settings, highly recommended
1 Like
For those who may come to this thread, my aim is to document hide/show side and top bars with current version of the HA.
So far I’ve shortlisted three ways to show and hide side and topbars:
- The browser_mod hass-browser_mod/README.md at master · thomasloven/hass-browser_mod · GitHub
- The Kiosk mode GitHub - NemesisRE/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar
- The wall panel GitHub - j-a-n/lovelace-wallpanel: 🖼️ Wall panel mode and photo screensaver for your Home Assistant Dashboards
- perhaps card_mod 🔹 Card-mod - Super-charge your themes! - #1778 by slimak
Once I manage to have manual control then you can run your own automatons. As I progress on these options, I’ll post the working code HA version and the Firefox (my default) or other browser options. The aim is to be able to do that through the ‘input_select’ while you apply a particular theme.
At this stage browser_mod is the only one working but again via the integration not via command so it is still not my preferred option. The wall panel has additional layers which I don’t need so not my preferred option. Working on the kiosk_mod the entity_settings: option is not working.
Browser_mod stuck here:
automation:
- alias: Toggle Sidebar Visibility
trigger:
- platform: state
entity_id: input_select.sidebar_visibility
action:
- service: browser_mod.command
data_template:
command: >
{% if is_state('input_select.sidebar_visibility', 'Hide') %}
hide_sidebar
{% else %}
show_sidebar
{% endif %}
kiosk mod, following works across Opera, Firefox and Edge
kiosk_mode:
admin_settings:
hide_sidebar: false
hide_header: false
mobile_settings:
hide_header: false
hide_sidebar: true
ignore_entity_settings: true
custom_width: 768
user_settings:
- users:
- Test
hide_sidebar: false
hide_header: false
entity_settings:
- entity:
input_select.theme_selector: ios-dark-mode
hide_sidebar: true
hide_header: true
- entity:
input_boolean.hide_sidebar: 'on'
hide_sidebar: true
hide_header: true
- entity:
input_select.kiosk: 'true'
kiosk: true
views:
- title: Home
cards:
- type: entities
entities:
- input_select.theme_selector
- type: entities
entities:
- input_boolean.hide_sidebar
- type: entities
entities:
- input_select.kiosk
Thanks for your help… just a typ0 of using ios-dark-mod instead of ios-dark-mode was the source of all the problems.
1 Like