Adds mainPage to hass-tabs-subpage (#5724)

hassio/src/addon-store/hassio-addon-store.ts

@@ -88,6 +88,7 @@ class HassioAddonStore extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         hassio
+        main-page
         .tabs=${supervisorTabs}
       >
         <span slot="header">Add-on store</span>

hassio/src/dashboard/hassio-dashboard.ts

@@ -40,6 +40,7 @@ class HassioDashboard extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         hassio
+        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
       >

hassio/src/snapshots/hassio-snapshots.ts

@@ -92,6 +92,7 @@ class HassioSnapshots extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         hassio
+        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
       >

hassio/src/system/hassio-system.ts

@@ -43,6 +43,7 @@ class HassioSystem extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         hassio
+        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
       >

src/layouts/hass-tabs-subpage.ts

@@ -39,6 +39,8 @@ class HassTabsSubpage extends LitElement {
 
   @property({ type: Boolean }) public hassio = false;
 
+  @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
+
   @property() public route!: Route;
 
   @property() public tabs!: PageNavigation[];
@@ -114,11 +116,21 @@ class HassTabsSubpage extends LitElement {
 
     return html`
       <div class="toolbar">
-        <ha-paper-icon-button-arrow-prev
-          aria-label="Back"
-          .hassio=${this.hassio}
-          @click=${this._backTapped}
-        ></ha-paper-icon-button-arrow-prev>
+        ${this.mainPage
+          ? html`
+              <ha-menu-button
+                .hass=${this.hass}
+                .hassio=${this.hassio}
+                .narrow=${this.narrow}
+              ></ha-menu-button>
+            `
+          : html`
+              <ha-paper-icon-button-arrow-prev
+                aria-label="Back"
+                .hassio=${this.hassio}
+                @click=${this._backTapped}
+              ></ha-paper-icon-button-arrow-prev>
+            `}
         ${this.narrow
           ? html` <div class="main-title"><slot name="header"></slot></div> `
           : ""}