If we have a link, make it a link (#9181)

hassio/src/snapshots/hassio-snapshots.ts

@@ -157,6 +157,8 @@ export class HassioSnapshots extends LitElement {
         @row-click=${this._handleRowClicked}
         clickable
         hasFab
+        main-page
+        supervisor
       >
         <ha-button-menu
           corner="BOTTOM_START"

src/components/ha-tab.ts

@@ -122,8 +122,6 @@ export class HaTab extends LitElement {
 
       :host([narrow]) {
         padding: 0 16px;
-        width: 20%;
-        min-width: 0;
       }
     `;
   }

src/entrypoints/custom-panel.ts

@@ -11,6 +11,8 @@ import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
 import { baseEntrypointStyles } from "../resources/styles";
 import { CSSResult } from "lit-element";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
+import { navigate } from "../common/navigate";
 
 declare global {
   interface Window {
@@ -109,6 +111,13 @@ function initialize(
         document.body.appendChild(errorScreen);
       }
     );
+
+  document.body.addEventListener("click", (ev) => {
+    const href = isNavigationClick(ev);
+    if (href) {
+      navigate(document.body, href);
+    }
+  });
 }
 
 document.addEventListener(

src/layouts/hass-tabs-subpage-data-table.ts

@@ -42,6 +42,10 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ type: Boolean }) public supervisor = false;
+
+  @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
+
   /**
    * Object with the columns.
    * @type {Object}
@@ -195,6 +199,8 @@ export class HaTabsSubpageDataTable extends LitElement {
         .backCallback=${this.backCallback}
         .route=${this.route}
         .tabs=${this.tabs}
+        .mainPage=${this.mainPage}
+        .supervisor=${this.supervisor}
       >
         <div slot="toolbar-icon"><slot name="toolbar-icon"></slot></div>
         ${this.narrow

src/layouts/hass-tabs-subpage.ts

@@ -15,7 +15,6 @@ import { classMap } from "lit-html/directives/class-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
-import { navigate } from "../common/navigate";
 import { LocalizeFunc } from "../common/translations/localize";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon";
@@ -88,23 +87,23 @@ class HassTabsSubpage extends LitElement {
       return shownTabs.map(
         (page) =>
           html`
-            <ha-tab
+            <a href=${page.path}>
-              .hass=${this.hass}
+              <ha-tab
-              @click=${this._tabTapped}
+                .hass=${this.hass}
-              .path=${page.path}
+                .active=${page === activeTab}
-              .active=${page === activeTab}
+                .narrow=${this.narrow}
-              .narrow=${this.narrow}
+                .name=${page.translationKey
-              .name=${page.translationKey
+                  ? localizeFunc(page.translationKey)
-                ? localizeFunc(page.translationKey)
+                  : page.name}
-                : page.name}
+              >
-            >
+                ${page.iconPath
-              ${page.iconPath
+                  ? html`<ha-svg-icon
-                ? html`<ha-svg-icon
+                      slot="icon"
-                    slot="icon"
+                      .path=${page.iconPath}
-                    .path=${page.iconPath}
+                    ></ha-svg-icon>`
-                  ></ha-svg-icon>`
+                  : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
-                : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
+              </ha-tab>
-            </ha-tab>
+            </a>
           `
       );
     }
@@ -148,6 +147,14 @@ class HassTabsSubpage extends LitElement {
                 .narrow=${this.narrow}
               ></ha-menu-button>
             `
+          : this.backPath
+          ? html`
+              <a href=${this.backPath}>
+                <ha-icon-button-arrow-prev
+                  .hass=${this.hass}
+                ></ha-icon-button-arrow-prev>
+              </a>
+            `
           : html`
               <ha-icon-button-arrow-prev
                 .hass=${this.hass}
@@ -185,15 +192,7 @@ class HassTabsSubpage extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  private _tabTapped(ev: Event): void {
-    navigate(this, (ev.currentTarget as any).path);
-  }
-
   private _backTapped(): void {
-    if (this.backPath) {
-      navigate(this, this.backPath);
-      return;
-    }
     if (this.backCallback) {
       this.backCallback();
       return;
@@ -225,11 +224,14 @@ class HassTabsSubpage extends LitElement {
         height: var(--header-height);
         background-color: var(--sidebar-background-color);
         font-weight: 400;
-        color: var(--sidebar-text-color);
         border-bottom: 1px solid var(--divider-color);
         padding: 0 16px;
         box-sizing: border-box;
       }
+      .toolbar a {
+        color: var(--sidebar-text-color);
+        text-decoration: none;
+      }
       #tabbar {
         display: flex;
         font-size: 14px;
@@ -259,6 +261,10 @@ class HassTabsSubpage extends LitElement {
         min-width: 40px;
       }
 
+      ha-tab {
+        display: block;
+      }
+
       ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {