Change config navigation to tabs (#4630)

* Change config navigation to tabs

* Update ha-menu-button.ts

* Icons

* update

* Review comments

* configSections -> object instead of array

src/panels/config/script/ha-script-picker.ts

@@ -11,7 +11,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
 import { HassEntity } from "home-assistant-js-websocket";
 
-import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-tabs-subpage";
 
 import { computeRTL } from "../../../common/util/compute_rtl";
 
@@ -22,21 +22,27 @@ import "../ha-config-section";
 
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant, Route } from "../../../types";
 import { triggerScript } from "../../../data/script";
 import { showToast } from "../../../util/toast";
+import { configSections } from "../ha-panel-config";
 
 @customElement("ha-script-picker")
 class HaScriptPicker extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public scripts!: HassEntity[];
   @property() public isWide!: boolean;
+  @property() public narrow!: boolean;
+  @property() public route!: Route;
 
   protected render(): TemplateResult {
     return html`
-      <hass-subpage
-        .showBackButton=${!this.isWide}
-        .header=${this.hass.localize("ui.panel.config.script.caption")}
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .route=${this.route}
+        .tabs=${configSections.automation}
       >
         <ha-config-section .isWide=${this.isWide}>
           <div slot="header">
@@ -99,8 +105,8 @@ class HaScriptPicker extends LitElement {
 
         <a href="/config/script/new">
           <ha-fab
-            slot="fab"
             ?is-wide=${this.isWide}
+            ?narrow=${this.narrow}
             icon="hass:plus"
             title="${this.hass.localize(
               "ui.panel.config.script.picker.add_script"
@@ -108,7 +114,7 @@ class HaScriptPicker extends LitElement {
             ?rtl=${computeRTL(this.hass)}
           ></ha-fab>
         </a>
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -169,7 +175,9 @@ class HaScriptPicker extends LitElement {
           bottom: 24px;
           right: 24px;
         }
-
+        ha-fab[narrow] {
+          bottom: 84px;
+        }
         ha-fab[rtl] {
           right: auto;
           left: 16px;