Hide top bar and menu

[bemble]

It would be nice to be able to hide the top bar and the menu.

[piitaya]

Yep, but there is the edit button in the top bar. We need to find a solution for this :

[cyrilphoenix71]

Yep, but there is the edit button in the top bar. We need to find a solution for this :

May be the better solution is to transforme header to footer ?

[piitaya]

There is currently no solution for this except using card-mod. It's a "hacky" thing and I don't think it can included in Mushroom.

[LRvdLinden]

you can add it to the theme file:

  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }

  # Move navbar
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
            width: 97%;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
        app-toolbar {
          padding-right: 0px;
          padding-left: 0px;
        }
      }
      ha-app-layout{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
      }
      app-header {
        top: auto;
        bottom: 0;
        box-shadow: var(--footer-shadow);
        position: fixed;
      }
      app-toolbar {
        transform: none;
        padding-top:10px !important;
        padding-bottom: calc(env(safe-area-inset-bottom) + 2px);
        height: 100px !important;
      }
      #view {
        margin-top: calc(-71px + env(safe-area-inset-top)) !important;
        width: 100%;
        min-height: 100%;
        height: auto;
        padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
        --mdc-icon-size: 26px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
      }
      paper-tab[aria-selected=true] {
        color: var(--header-active-tab-color);
        background-color: var(--header-active-tab-bg-color)
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 25px;
        height:50px;
        /*width: calc(100% / 4);*/
        padding-left: 20px;
        padding-right: 20px;
      }

[cyrilphoenix71]

So may be mushroom theme can use that?

[piitaya]

@cyrilphoenix71 I don't think it's a good thing to have card mod as a dependency.
Thank you @LRvdLinden for sharing this ! 😊 It can help people who want bottom bar.

[hugobloem]

You can use kiosk mode from HACS. I then defined a input_boolean so you can toggle the header and sidebar on and off. That way you can still easily get it to edit your dashboard.

https://github.com/maykar/kiosk-mode

[acesyde]

You can use kiosk mode as @hugobloem said

kiosk_mode:
  mobile_settings:
    hide_header: true