Clooos / Bubble

A dark minimalist theme with a mobile first approach for Home Assistant
MIT License
65 stars 3 forks source link

Top and side navigation bars disappear on mobile #2

Open hugodejong opened 1 year ago

hugodejong commented 1 year ago

When I use the theme on the mobile HA app, the top navigation bar (to change views) and the side bar disappear.

Pixel 6 Pro, Android 13, latest version of the HA companion app.

anselgamet commented 1 year ago

That seems to be the expected behavior. I agree it would be nice to be able to configure this (I'm not familiar with HA theming so don't know how feasible that is tho)

If you're stuck in a view what I did was create a button with navigate action to the settings page.

OliverDudgeon commented 11 months ago

To bring back the navigation bar, in the bubble.yaml file located at /config/themes/bubble/bubble.yaml, you can just remove the whole block for card-mod-root-yaml.

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;
        }
    }

In there, the display and opacity of the navbar are set so it disapears, and below that, the padding and margin of the view is removed.

After that, save the file and use the reload themes action from HA command pallete and refresh (restart the app) to see the changes. image