Highlight selected language and model

src/app/app.ts

@@ -72,7 +72,19 @@ Promise.all([
     for (const v in views) {
       views[v].setModel(models[selected])
     }
-    selectedModel.textContent = locale(`generator.${selected}`)
+    selectedModel.textContent = locale(`title.${selected}`)
+  
+    modelSelectorMenu.innerHTML = ''
+    Object.keys(models).forEach(m => {
+      modelSelectorMenu.insertAdjacentHTML('beforeend', 
+        `<div class="btn${m === selected ? ' selected' : ''}">${locale(m)}</div>`)
+      modelSelectorMenu.lastChild?.addEventListener('click', evt => {
+        updateModel(m)
+        history.pushState({model: m}, m, publicPath + m)
+        modelSelectorMenu.style.visibility = 'hidden'
+      })
+    })
+
     models[selected].invalidate()
   }
 
@@ -82,6 +94,17 @@ Promise.all([
     document.querySelectorAll('[data-i18n]').forEach(el => {
       el.textContent = locale(el.attributes.getNamedItem('data-i18n')!.value)
     })
+
+    languageSelectorMenu.innerHTML = ''
+    Object.keys(languages).forEach(key => {
+      languageSelectorMenu.insertAdjacentHTML('beforeend',
+        `<div class="btn${key === LOCALES.language ? ' selected' : ''}">${languages[key]}</div>`)
+      languageSelectorMenu.lastChild?.addEventListener('click', evt => {
+        updateLanguage(key)
+        languageSelectorMenu.style.visibility = 'hidden'
+      })
+    })
+
     updateModel(selected)
   }
   updateLanguage('en')
@@ -89,17 +112,6 @@ Promise.all([
   Split([treeViewEl, sourceViewEl], {
     sizes: [66, 34]
   })
-  
-  modelSelectorMenu.innerHTML = ''
-  Object.keys(models).forEach(m => {
-    modelSelectorMenu.insertAdjacentHTML('beforeend', 
-      `<div class="btn${m === selected ? ' selected' : ''}">${locale(`generator.${m}`)}</div>`)
-    modelSelectorMenu.lastChild?.addEventListener('click', evt => {
-      updateModel(m)
-      history.pushState({model: m}, m, publicPath + m)
-      modelSelectorMenu.style.visibility = 'hidden'
-    })
-  })
 
   modelSelector.addEventListener('click', evt => {
     modelSelectorMenu.style.visibility = 'visible'
@@ -124,16 +136,6 @@ Promise.all([
     }
   })
 
-  languageSelectorMenu.innerHTML = ''
-  Object.keys(languages).forEach(key => {
-    languageSelectorMenu.insertAdjacentHTML('beforeend',
-      `<div class="btn${key === LOCALES.language ? ' selected' : ''}">${languages[key]}</div>`)
-    languageSelectorMenu.lastChild?.addEventListener('click', evt => {
-      updateLanguage(key)
-      languageSelectorMenu.style.visibility = 'hidden'
-    })
-  })
-
   languageSelector.addEventListener('click', evt => {
     languageSelectorMenu.style.visibility = 'visible'
     document.body.addEventListener('click', evt => {

src/locales/en.json

@@ -1,8 +1,12 @@
 {
-  "generator.loot-table": "Loot Table Generator",
-  "generator.predicate": "Predicate Generator",
-  "generator.advancement": "Advancement Generator",
-  "generator.sandbox": "Sandbox Generator",
+  "title.loot-table": "Loot Table Generator",
+  "title.predicate": "Predicate Generator",
+  "title.advancement": "Advancement Generator",
+  "title.sandbox": "Sandbox Generator",
+  "loot-table": "Loot Table",
+  "predicate": "Predicate",
+  "advancement": "Advancement",
+  "sandbox": "Sandbox",
   "language": "Language",
   "copy": "Copy",
   "download": "Download",

src/styles/global.css

@@ -26,6 +26,7 @@ body {
 
 .header-title {
   display: flex;
+  align-items: flex-start;
 }
 
 .header-title h2 {
@@ -170,6 +171,11 @@ body {
   color: #a5e77a;
 }
 
+.btn.selected {
+  fill: #a5e77a;
+  color: #a5e77a;
+}
+
 .btn svg:not(:last-child) {
   margin-right: 5px;
 }
@@ -240,4 +246,9 @@ body {
     right: 17px;
     top: 37px;
   }
+
+  .nav-selector-menu {
+    right: 0;
+    left: initial;
+  }
 }