How to hide/unhide sidebar and topbar with a toggle switch

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 :frowning:

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:

  1. The browser_mod hass-browser_mod/README.md at master · thomasloven/hass-browser_mod · GitHub
  2. The Kiosk mode GitHub - NemesisRE/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar
  3. The wall panel GitHub - j-a-n/lovelace-wallpanel: 🖼️ Wall panel mode and photo screensaver for your Home Assistant Dashboards
  4. 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