Here’s my new sidebar:
I got tired of doing this: Scroll down on the sidebar menu, click Settings, click Devices & Services, click Entities. Or automations, add-ons, integrations, helpers, etc. So I set up some Custom Panels to add quick links to these pages:
- Entities
- States
- Automations
- Helpers
- Add-ons
- Integrations
I use packages to split up my configuration.yaml into different files.
-
configuration.yaml:
homeassistant:
packages: !include_dir_merge_named packages/
Here’s all the menu items I configured in a sidebar_menu package:
-
packages/sidebar_menu.yaml:
sidebar_menu:
panel_custom:
- name: ha_addons
sidebar_title: Add-ons
sidebar_icon: mdi:toy-brick-outline
js_url: /api/hassio/app/entrypoint.js
url_path: 'hassio/dashboard'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
- name: ha_automations
sidebar_title: Automations
sidebar_icon: mdi:robot
js_url: /api/hassio/app/entrypoint.js
url_path: 'config/automation'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
- name: ha_entities
sidebar_title: Entities
sidebar_icon: mdi:devices
js_url: /api/hassio/app/entrypoint.js
url_path: 'config/entities'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
- name: ha_helpers
sidebar_title: Helpers
sidebar_icon: mdi:toggle-switch-outline
js_url: /api/hassio/app/entrypoint.js
url_path: 'config/helpers'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
- name: ha_integrations
sidebar_title: Integrations
sidebar_icon: mdi:chip
js_url: /api/hassio/app/entrypoint.js
url_path: 'config/integrations'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
- name: ha_states
sidebar_title: States
sidebar_icon: mdi:details
js_url: /api/hassio/app/entrypoint.js
url_path: 'developer-tools/state'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
- name: ha_restart
sidebar_title: Restart
sidebar_icon: mdi:restart
js_url: /api/hassio/app/entrypoint.js
url_path: 'developer-tools/yaml?shouldRestart=1'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
Then I went to the profile settings page (/profile) and changed the order to put them at the top. (“Change the order and hide items from the sidebar” => Edit)
One-click Restart Button
I also figured out how to add a one-click Restart button to the bottom of the menu, above Developer Tools:
I wrote some JavaScript that checks for ?shouldRestart=1 in the URL. If this is found, then it calls the homeassistant.restart service via the websocket connection (after clearing the query param so it doesn’t keep restarting in a loop.) (If the JS doesn’t work, then you still end up on the developer-tools/yaml page where you can click the Restart button manually.)
Here’s how you can set this up:
-
config/configuration.yaml:
frontend:
extra_module_url:
- /local/custom.js
panel_custom:
- name: ha_restart
sidebar_title: Restart
sidebar_icon: mdi:restart
js_url: /api/hassio/app/entrypoint.js
url_path: 'developer-tools/yaml?shouldRestart=1'
embed_iframe: true
require_admin: true
config:
ingress: core_configurator
-
config/www/custom.js:
// We need a 'locationchange' event
(function () {
const pushState = history.pushState;
history.pushState = function () {
pushState.apply(history, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
};
})();
function checkShouldRestart() {
const urlSearchParams = new URLSearchParams(location.search);
if (urlSearchParams.get("shouldRestart") !== "1") {
return;
}
console.warn(
"Found ?shouldRestart=1 in URL, restarting Home Assistant Core..."
);
// Clear shouldRestart parameter from URL
const newUrl = new URL(document.location.href);
newUrl.search = "";
history.pushState({}, "", newUrl);
hassConnection.then(({ conn }) => {
console.warn("Sending restart command...");
conn.socket.send(
JSON.stringify({
type: "execute_script",
sequence: [
{
service: "homeassistant.restart",
data: {},
},
],
id: ++conn.commandId,
})
);
});
}
window.addEventListener("locationchange", checkShouldRestart);
checkShouldRestart();
I’m glad I figured out how to send commands via the websocket connection, that could be handy for some other UI customizations.
