diff --git a/assessment/assets/css/toolbar.css b/assessment/assets/css/toolbar.css
index b969058..62b3425 100644
--- a/assessment/assets/css/toolbar.css
+++ b/assessment/assets/css/toolbar.css
@@ -2,6 +2,7 @@
background: #1f2937;
color: #fff;
display: flex;
+ flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 14px;
@@ -28,6 +29,14 @@
border: 1px solid rgba(255, 255, 255, 0.08)
}
+.toolbar-modules {
+ width: 100%;
+ display: flex;
+ gap: 10px;
+ margin-top: 8px;
+ align-items: center;
+}
+
.error-message {
color: crimson;
}
diff --git a/assessment/assets/js/toolbar.js b/assessment/assets/js/toolbar.js
index d3a4565..d20a551 100644
--- a/assessment/assets/js/toolbar.js
+++ b/assessment/assets/js/toolbar.js
@@ -6,6 +6,10 @@ class Toolbar {
{ label: 'Client B', value: 'clientb' },
{ label: 'Client C', value: 'clientc' }
];
+ this.moduleMapping = [
+ { label: 'Voitures', module: 'cars', script: 'ajax' },
+ { label: 'Garages', module: 'garages', script: 'ajax', onlyFor: 'clientb' }
+ ];
this.injectStylesheet('assets/css/toolbar.css');
this.render();
this.activateExistingClient();
@@ -31,6 +35,7 @@ class Toolbar {
$button.on('click', () => {
this.setCookieValue('client', mapping.value);
this.markActiveButton($button);
+ this.updateModuleButtonsVisibility(mapping.value);
if (window.loadDynamic && typeof window.loadDynamic === 'function') window.loadDynamic();
});
this.$container.append($button);
@@ -43,9 +48,55 @@ class Toolbar {
});
this.$container.append($closeButton);
+ const $moduleWrap = $('
').addClass('toolbar-modules');
+ this.moduleMapping.forEach(mod => {
+ const $mBtn = $('