LDAPWeb/server-connection/geonet-console/public/js/app-nav.js

(function () {
    'use strict';

    var shell = document.querySelector('[data-app-shell]');
    if (!shell) {
        return;
    }

    var sidebar = shell.querySelector('[data-app-sidebar]');
    var sheet = shell.querySelector('[data-nav-sheet]');
    var backdrop = shell.querySelector('[data-nav-backdrop]');
    var storageKey = 'geonet-console-sidebar-collapsed';
    var groupStorageKey = 'geonet-console-nav-groups';

    function readJson(key, fallback) {
        try {
            var raw = localStorage.getItem(key);
            return raw ? JSON.parse(raw) : fallback;
        } catch (e) {
            return fallback;
        }
    }

    function writeJson(key, value) {
        try {
            localStorage.setItem(key, JSON.stringify(value));
        } catch (e) {}
    }

    function setSidebarCollapsed(collapsed) {
        shell.classList.toggle('is-sidebar-collapsed', collapsed);
        if (sidebar) {
            sidebar.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
        }
        try {
            localStorage.setItem(storageKey, collapsed ? '1' : '0');
        } catch (e) {}
    }

    function isDesktop() {
        return window.matchMedia('(min-width: 1024px)').matches;
    }

    function openMobileNav() {
        shell.classList.add('is-nav-open');
        if (sheet) {
            sheet.hidden = false;
        }
        if (backdrop) {
            backdrop.hidden = false;
        }
        document.body.classList.add('app-nav-open');
    }

    function closeMobileNav() {
        shell.classList.remove('is-nav-open');
        if (sheet) {
            sheet.hidden = true;
        }
        if (backdrop) {
            backdrop.hidden = true;
        }
        document.body.classList.remove('app-nav-open');
    }

    function toggleGroup(groupEl, open) {
        if (!groupEl) {
            return;
        }

        var shouldOpen = typeof open === 'boolean' ? open : !groupEl.hasAttribute('data-open');
        if (shouldOpen) {
            groupEl.setAttribute('data-open', '');
        } else {
            groupEl.removeAttribute('data-open');
        }

        var btn = groupEl.querySelector('[data-nav-group-toggle]');
        if (btn) {
            btn.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
        }

        var saved = readJson(groupStorageKey, {});
        saved[groupEl.getAttribute('data-nav-group')] = shouldOpen;
        writeJson(groupStorageKey, saved);
    }

    if (localStorage.getItem(storageKey) === '1' && isDesktop()) {
        setSidebarCollapsed(true);
    }

    var savedGroups = readJson(groupStorageKey, {});
    shell.querySelectorAll('[data-nav-group]').forEach(function (groupEl) {
        var id = groupEl.getAttribute('data-nav-group');
        if (Object.prototype.hasOwnProperty.call(savedGroups, id)) {
            toggleGroup(groupEl, !!savedGroups[id]);
        }
    });

    shell.querySelectorAll('[data-sidebar-toggle]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            setSidebarCollapsed(!shell.classList.contains('is-sidebar-collapsed'));
        });
    });

    shell.querySelectorAll('[data-nav-group-toggle]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            toggleGroup(btn.closest('[data-nav-group]'));
        });
    });

    shell.querySelectorAll('[data-nav-open]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (isDesktop()) {
                setSidebarCollapsed(false);
                return;
            }
            openMobileNav();
        });
    });

    shell.querySelectorAll('[data-nav-close]').forEach(function (btn) {
        btn.addEventListener('click', closeMobileNav);
    });

    if (backdrop) {
        backdrop.addEventListener('click', closeMobileNav);
    }

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            closeMobileNav();
        }
    });

    window.addEventListener('resize', function () {
        if (isDesktop()) {
            closeMobileNav();
        }
    });
})();