Refresh nav on auth changes and show session info

src/app/bootstrap.js

@@ -6,6 +6,7 @@ import { APP_NAME } from './config.js';
 import { createRouter, navigate } from './router.js';
 import { createAppStore } from './store.js';
 import { appShell } from '../components/app-shell.js';
+import { navBar } from '../components/nav-bar.js';
 import { registerFeatureData } from '../features/register.js';
 
 async function installServiceWorker() {
@@ -23,6 +24,20 @@ export function bootstrapApp() {
   const appRoot = document.querySelector('#app');
   appRoot.innerHTML = appShell(APP_NAME);
   Alpine.initTree(appRoot);
+  const navRoot = document.querySelector('#app-nav');
+
+  function renderNav() {
+    if (!navRoot) {
+      return;
+    }
+
+    if (typeof Alpine.destroyTree === 'function') {
+      Alpine.destroyTree(navRoot);
+    }
+
+    navRoot.innerHTML = navBar(APP_NAME);
+    Alpine.initTree(navRoot);
+  }
 
   const router = createRouter({
     Alpine,
@@ -35,6 +50,7 @@ export function bootstrapApp() {
     if (!store.activeKitchen && kitchens.length) {
       store.setActiveKitchen(kitchens[0]);
     }
+    renderNav();
     return kitchens;
   }
 
@@ -51,7 +67,9 @@ export function bootstrapApp() {
         } else if (store.isConnected) {
           await window.__loncApp.refreshKitchens();
         }
+        renderNav();
       } catch (error) {
+        renderNav();
         if (window.location.hash !== '#/login') {
           navigate('/login');
         }
@@ -64,10 +82,12 @@ export function bootstrapApp() {
       } else if (store.isConnected) {
         await window.__loncApp.refreshKitchens();
       }
+      renderNav();
       return result;
     },
     async logout() {
       await logout(store);
+      renderNav();
       navigate('/login');
     },
     router,
@@ -89,6 +109,8 @@ export function bootstrapApp() {
     .finally(() => router.start())
     .catch(() => router.start());
 
+  renderNav();
+
   installServiceWorker().catch(() => {
     store.addAlert({
       type: 'warning',