Umbraco (v8-10) AngularJS hacking the top navigation

umb-hack-appHeaderActions.js

angular.module("umbraco").run([
    "$compile",
    "appState",
    "eventsService",
    function ($compile, appState, eventsService) {
        eventsService.on("app.ready", function (e, args) {
            // console.log("app.ready", e, args);

            var scope = e.targetScope.$new();

            scope.open = open;

            var html = `
<li class="umb-app-header__action">
    <button type="button" class="umb-app-header__button btn-reset" title="Smile" ng-click="open()" hotkey="ctrl+shift+q">
        <span class="umb-app-header__action-icon umb-icon">
            <span class="umb-icon__inner">
                <umb-icon icon="icon-smiley"></umb-icon>
            </span>
        </span>
    </button>
</li>`;

            var dom = $compile(html)(scope);
            angular.element(".umb-app-header__actions > li:nth-child(1)").after(dom);
        });

        function open() {

            var showDrawer = appState.getDrawerState("showDrawer");
            appState.setDrawerState("view", "/App_Plugins/Custom/backoffice/drawer/drawer.html");
            appState.setDrawerState("showDrawer", !showDrawer);

        };
    }
]);

umb-hack-appNav.js

angular.module("umbraco").run([
    "eventsService",
    function (eventsService) {

        eventsService.on("app.navigationReady", function (e, args) {

            var link = `
<li>
    <a href="https://leekelleher.com" target="_blank">
        <span class="section__name">🤯</span>
    </a>
</li>`;

            angular.element(".umb-app-header .sections > li:nth-last-child(2)").after(link);

        });
    }
]);

umb-hack-loadAssets.js

angular.module("umbraco").run([
    "assetsService",
    "eventsService",
    function (assetsService, eventsService) {

        eventsService.on("app.ready", function (evt, data) {

            var assets = [
                "https://cdn.jsdelivr.net/npm/@umbraco-ui/uui@latest/dist/uui.min.js",
                "https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css"
            ];

            assetsService.load(assets).then(function () {
                console.log("The assets have been loaded.");
            });

        });

    }
]);

umb-hack-offlineIndicator.js

angular.module("umbraco").run([
    "eventsService",
    function (eventsService) {
        eventsService.on("app.ready", function (e, args) {

            var html = `
<li class="umb-app-header__action">
    <span class="umb-app-header__button">
        <span class="umb-app-header__action-icon umb-icon">
            <span class="umb-icon__inner">&#x1F7E2;</span>
        </span>
    </span>
</li>`;

            var dom = angular.element(html);
            angular.element(".umb-app-header__actions > li:nth-last-child(1)").after(dom);

            window.addEventListener("online", () => angular.element(".umb-icon__inner", dom).html("&#x1F7E2;"));
            window.addEventListener("offline", () => angular.element(".umb-icon__inner", dom).html("&#x1F534;"));
        });
    }
]);