Keep root state when replacing, fix subpages for menu button on mobile (#8837)

src/common/navigate.ts

@@ -12,12 +12,16 @@ declare global {
 export const navigate = (_node: any, path: string, replace = false) => {
   if (__DEMO__) {
     if (replace) {
-      history.replaceState(null, "", `${location.pathname}#${path}`);
+      history.replaceState(
+        history.state?.root ? { root: true } : null,
+        "",
+        `${location.pathname}#${path}`
+      );
     } else {
       window.location.hash = path;
     }
   } else if (replace) {
-    history.replaceState(null, "", path);
+    history.replaceState(history.state?.root ? { root: true } : null, "", path);
   } else {
     history.pushState(null, "", path);
   }

src/layouts/hass-subpage.ts

@@ -89,15 +89,12 @@ class HassSubpage extends LitElement {
         box-sizing: border-box;
       }
 
+      ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
         pointer-events: auto;
       }
 
-      ha-icon-button-arrow-prev.hidden {
-        visibility: hidden;
-      }
-
       .main-title {
         margin: 0 0 0 24px;
         line-height: 20px;

src/layouts/hass-tabs-subpage.ts

@@ -140,7 +140,7 @@ class HassTabsSubpage extends LitElement {
     const showTabs = tabs.length > 1 || !this.narrow;
     return html`
       <div class="toolbar">
-        ${this.mainPage || history.state?.root
+        ${this.mainPage || (!this.backPath && history.state?.root)
           ? html`
               <ha-menu-button
                 .hassio=${this.supervisor}
@@ -289,8 +289,10 @@ class HassTabsSubpage extends LitElement {
       }
 
       :host([narrow]) .content.tabs {
-        height: calc(100% - 128px);
-        height: calc(100% - 128px - env(safe-area-inset-bottom));
+        height: calc(100% - 2 * var(--header-height));
+        height: calc(
+          100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
+        );
       }
 
       #fab {

src/panels/config/cloud/account/cloud-account.js

@@ -62,7 +62,11 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--primary-color);
         }
       </style>
-      <hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
+      <hass-subpage
+        hass="[[hass]]"
+        narrow="[[narrow]]"
+        header="Home Assistant Cloud"
+      >
         <div class="content">
           <ha-config-section is-wide="[[isWide]]">
             <span slot="header">Home Assistant Cloud</span>
@@ -167,6 +171,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       cloudStatus: Object,
       _subscription: {
         type: Object,

src/panels/config/cloud/forgot-password/cloud-forgot-password.js

@@ -47,6 +47,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
       <hass-subpage
         hass="[[hass]]"
+        narrow="[[narrow]]"
         header="[[localize('ui.panel.config.cloud.forgot_password.title')]]"
       >
         <div class="content">
@@ -84,6 +85,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get properties() {
     return {
       hass: Object,
+      narrow: Boolean,
       email: {
         type: String,
         notify: true,

src/panels/config/cloud/ha-config-cloud.ts

@@ -128,6 +128,7 @@ class HaConfigCloud extends HassRouterPage {
         hass: this.hass,
         email: this._loginEmail,
         isWide: this.isWide,
+        narrow: this.narrow,
         cloudStatus: this.cloudStatus,
         flashMessage: this._flashMessage,
       });

src/panels/config/cloud/login/cloud-login.js

@@ -85,7 +85,11 @@ class CloudLogin extends LocalizeMixin(
           align-self: flex-end;
         }
       </style>
-      <hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
+      <hass-subpage
+        hass="[[hass]]"
+        narrow="[[narrow]]"
+        header="Home Assistant Cloud"
+      >
         <div class="content">
           <ha-config-section is-wide="[[isWide]]">
             <span slot="header">Home Assistant Cloud</span>
@@ -186,6 +190,7 @@ class CloudLogin extends LocalizeMixin(
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       email: {
         type: String,
         notify: true,

src/panels/config/cloud/register/cloud-register.js

@@ -47,7 +47,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
         display: none;
       }
     </style>
-    <hass-subpage hass="[[hass]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
+    <hass-subpage hass="[[hass]]" narrow="[[narrow]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
       <div class="content">
         <ha-config-section is-wide="[[isWide]]">
           <span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
@@ -100,6 +100,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       email: {
         type: String,
         notify: true,

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -68,6 +68,7 @@ export class ZHAAddGroupPage extends LitElement {
     return html`
       <hass-subpage
         .hass=${this.hass}
+        .narrow=${this.narrow}
         .header=${this.hass.localize("ui.panel.config.zha.groups.create_group")}
       >
         <ha-config-section .isWide=${!this.narrow}>

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -103,7 +103,11 @@ export class ZHAGroupPage extends LitElement {
     }
 
     return html`
-      <hass-subpage .hass=${this.hass} .header=${this.group.name}>
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .header=${this.group.name}
+      >
         <ha-icon-button
           slot="toolbar-icon"
           icon="hass:delete"

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -135,6 +135,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return html`
       <hass-subpage
         .hass=${this.hass}
+        .narrow=${this.narrow}
         .header=${this.hass.localize(
           "ui.panel.config.zha.visualization.header"
         )}