groups.php

<?php
$staticGroups = array();
foreach($this->plxMotor->aStats as $staticId=>$staticPage) {
    if(
        intval($staticPage['active']) === 1 and
        // $staticPage['menu'] !== 'oui' and
        !empty(trim($staticPage['group']))
    ) {
        $group = $staticPage['group'];
        if(!array_key_exists($group, $staticGroups)) {
            $staticGroups[$group] = array();
        }
        $staticGroups[$group][] = array(
            'url'	=> $this->plxMotor->urlRewrite('?static'.intval($staticId).'/'.$staticPage['url']),
            'title' => $staticPage['name']
        );
    }
}
if(!empty($staticGroups)) {
    $content = implode("\n", array_map(
        function($group) {
            return <<< EOT
       <li><label for="id-stat-group-$group">$group</label></li>
EOT;
        },
        array_keys($staticGroups)
    ));
    echo <<< EOT
    <ul class="tabs">
$content
    </ul>\n
EOT;
?>
<div class="static-groups">
<?php
    foreach($staticGroups as $group=>$pages) {
        $content = implode("\n", array_map(
            function($page) {
                return <<< EOT
       <li><a href="${page['url']}">${page['title']}</a></li>
EOT;
            },
            $pages
        ));
           
        echo <<< EOT
   <input type="radio" id="id-stat-group-$group" name="static-groups" />
   <ul>
$content
   </ul>\n
EOT;
    }
?>    
</div>

<style type="text/css">
    ul.tabs,
    div.static-groups > ul { list-style: none; }
    ul.tabs { display: flex; }
    ul.tabs li { padding: 0; }
    ul.tabs label { padding: 0 1rem; background-color: #ddd; }
    ul.tabs label.active { background-color: #444; color: #fff; }
    ul.tabs li:not(:first-of-type) { margin-left: 1rem; }
    div.static-groups > input[type="radio"],
    div.static-groups > input[type="radio"]:not(:checked) + ul { display: none; }
</style>

<script type="text/javascript">
(function() {
    'use strict'
    const container = document.querySelector('div.static-groups');
    if(container != null) {
		container.addEventListener('change', function(event) {
           if(event.target.tagName == 'INPUT') {
               const activeTabs = document.querySelectorAll('ul.tabs label.active');
               for(var i=0, iMax=activeTabs.length; i<iMax; i++) {
                   activeTabs[i].classList.remove('active');
               }
               document.querySelector('ul.tabs label[for="' + event.target.id + '"]').classList.add('active');
           }
        });
        document.querySelector('ul.tabs label:first-of-type').click();
    }
})();
</script>
<?php
}
?>