Link left nav to top modules
This commit is contained in:
@@ -5,6 +5,16 @@ require_once __DIR__ . '/../service.php';
|
|||||||
|
|
||||||
function render_auth_home_page(array $user): void
|
function render_auth_home_page(array $user): void
|
||||||
{
|
{
|
||||||
|
$moduleNavigation = json_encode(
|
||||||
|
[
|
||||||
|
'Übersicht' => [],
|
||||||
|
'ERP' => ['Bestellungen', 'Lager', 'Kontakte'],
|
||||||
|
'Buchhaltung' => [],
|
||||||
|
'Kundenberatung' => [],
|
||||||
|
],
|
||||||
|
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
|
||||||
|
);
|
||||||
|
|
||||||
echo '<!doctype html>';
|
echo '<!doctype html>';
|
||||||
echo '<html lang="de">';
|
echo '<html lang="de">';
|
||||||
echo '<head>';
|
echo '<head>';
|
||||||
@@ -47,15 +57,13 @@ function render_auth_home_page(array $user): void
|
|||||||
echo '<div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">';
|
echo '<div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">';
|
||||||
echo '<aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Navigation">';
|
echo '<aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Navigation">';
|
||||||
echo '<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">';
|
echo '<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">';
|
||||||
echo '<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>';
|
echo '<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-title aria-live="polite">ERP</h2>';
|
||||||
echo '<button class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle" type="button" data-left-navigation-toggle aria-expanded="true" aria-controls="left-navigation-menu">Ausblenden</button>';
|
echo '<button class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle" type="button" data-left-navigation-toggle aria-expanded="true" aria-controls="left-navigation-menu">Ausblenden</button>';
|
||||||
echo '</div>';
|
echo '</div>';
|
||||||
echo '<nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">';
|
echo '<nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">';
|
||||||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>';
|
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Bestellungen</button>';
|
||||||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kontakte</button>';
|
|
||||||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Bestellungen</button>';
|
|
||||||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Lager</button>';
|
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Lager</button>';
|
||||||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>';
|
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kontakte</button>';
|
||||||
echo '</nav>';
|
echo '</nav>';
|
||||||
echo '</aside>';
|
echo '</aside>';
|
||||||
echo '<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>';
|
echo '<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>';
|
||||||
@@ -63,6 +71,32 @@ function render_auth_home_page(array $user): void
|
|||||||
echo '</section>';
|
echo '</section>';
|
||||||
echo '</section>';
|
echo '</section>';
|
||||||
echo '<script>';
|
echo '<script>';
|
||||||
|
echo 'const portalModuleNavigation = ' . $moduleNavigation . ';';
|
||||||
|
echo "const renderLeftNavigation = (moduleName) => {";
|
||||||
|
echo " const title = document.querySelector('[data-left-navigation-title]');";
|
||||||
|
echo " const menu = document.getElementById('left-navigation-menu');";
|
||||||
|
echo " if (title) { title.textContent = moduleName; }";
|
||||||
|
echo " if (!menu) { return; }";
|
||||||
|
echo " const entries = portalModuleNavigation[moduleName] || [];";
|
||||||
|
echo " menu.innerHTML = '';";
|
||||||
|
echo " entries.forEach((entry, index) => {";
|
||||||
|
echo " const button = document.createElement('button');";
|
||||||
|
echo " button.className = 'sg-interaction-element sg-button sg-tab-button';";
|
||||||
|
echo " button.type = 'button';";
|
||||||
|
echo " button.setAttribute('role', 'tab');";
|
||||||
|
echo " button.setAttribute('data-component-part', 'tab-button');";
|
||||||
|
echo " button.setAttribute('aria-selected', String(index === 0));";
|
||||||
|
echo " button.textContent = entry;";
|
||||||
|
echo " menu.appendChild(button);";
|
||||||
|
echo " });";
|
||||||
|
echo " menu.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||||||
|
echo " button.addEventListener('click', () => {";
|
||||||
|
echo " menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {";
|
||||||
|
echo " otherButton.setAttribute('aria-selected', String(otherButton === button));";
|
||||||
|
echo " });";
|
||||||
|
echo " });";
|
||||||
|
echo " });";
|
||||||
|
echo "};";
|
||||||
echo "document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {";
|
echo "document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {";
|
||||||
echo " group.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
echo " group.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||||||
echo " button.addEventListener('click', () => {";
|
echo " button.addEventListener('click', () => {";
|
||||||
@@ -71,6 +105,7 @@ function render_auth_home_page(array $user): void
|
|||||||
echo " otherButton.setAttribute('aria-selected', String(isActive));";
|
echo " otherButton.setAttribute('aria-selected', String(isActive));";
|
||||||
echo " otherButton.dataset.componentState = isActive ? 'active' : 'inactive';";
|
echo " otherButton.dataset.componentState = isActive ? 'active' : 'inactive';";
|
||||||
echo " });";
|
echo " });";
|
||||||
|
echo " renderLeftNavigation(button.textContent.trim());";
|
||||||
echo " });";
|
echo " });";
|
||||||
echo " });";
|
echo " });";
|
||||||
echo "});";
|
echo "});";
|
||||||
@@ -125,6 +160,7 @@ function render_auth_home_page(array $user): void
|
|||||||
echo " syncMode();";
|
echo " syncMode();";
|
||||||
echo " mediaQuery.addEventListener('change', syncMode);";
|
echo " mediaQuery.addEventListener('change', syncMode);";
|
||||||
echo "})();";
|
echo "})();";
|
||||||
|
echo "renderLeftNavigation('ERP');";
|
||||||
echo '</script>';
|
echo '</script>';
|
||||||
echo '</body>';
|
echo '</body>';
|
||||||
echo '</html>';
|
echo '</html>';
|
||||||
|
|||||||
Reference in New Issue
Block a user