Give first element of foreach loop class by default

The CMS Questions
1

So I have a simple filter-menu like this

 <?php foreach ($filters as $filter): ?>
   <li class="side-nav__list__item">
      <a href="<?= $page->url() ?>?filter=<?= $filter ?>" class="<?= $filterBy === $filter ? 'active' : '' ?>"><?= $filter ?></a>
   </li>
 <?php endforeach ?>

Once I click an item it becomes active, so far so good. But I want the first item to be selected by default
(I click on the menu point that contains the filter menu and the first filter is already active) and I think giving the first item of the foreach loop an active class by default could be the solution, I tried incorporating other codes related to this problem but it displayed an error. This is what I tried:

<?php foreach($filters as $filter): ?>
<li class="side-nav__list__item">
     <a href="<?= $page->url() ?>?filter=<?= $filter ?>" class="<?= $filterBy === $filter ? 'active' : '' ?> <?= $filters->indexOf($filter) === 0 ? ' active' : '' ?>"><?= $filter ?></a>
</li>
<?php endforeach ?>
2

No, that won’t help. The link that leads to the filter page should contain the filter. Not quite sure how you are getting there, though.

3

Worst case scenario I could just redirect projects to projects?filter=Auswahl via JQuery?

4

Well, maybe but I’m trying to understand the context, and you didn’t answer my question.

What does this mean, where is this menu? Please post the code.

5

It’s a straight forward menu with the exception that for one menu point there should be a filter displayed instead of the page children:

<?php if ($page->depth() === 1 && ! $page->is('projects'): ?>
        <nav class="side-nav">
            <ul class="side-nav__list">
                <?php foreach($page->children() as $side_nav): ?>
                    <li class="side-nav__list__item">
                        <a <?php e($side_nav->isOpen(), ' class="active"') ?> href="<?= $side_nav->url() ?>"><?= $side_nav->title()->html() ?></a>
                    </li>
                <?php endforeach ?>
            </ul>
        </nav>
 <?php endif ?>

<?php if ($page->depth() === 1 && $page->is ('projects')): ?>
        <nav class="side-nav">
            <ul class="side-nav__list">
                <?php foreach ($filters as $filter): ?>
                    <li class="side-nav__list__item"><a href="<?= $page->url() ?>?filter=<?= $filter ?>" class="<?= $filterBy === $filter ? 'active' : '' ?>"><?= $filter ?></a></li>
                <?php endforeach ?>
            </ul>
        </nav>
<?php endif ?>

I did some routing so that some of the pages go directly to a subpage like:

return [
    'home' => 'projects',
    'routes' => [
        [
            'pattern' => 'news',
            'action'  => function () {
                return page('news/current');
            }
        ],
        [
            'pattern' => 'office',
            'action'  => function () {
                return page('office/about');
            }
        ]
    ]
  ];

I kinda want the same thing for the filter where when I click “projects” in the menu there will be the first filter (?filter=Auswahl) preselected. Kinda like this (this obviously doesn’t work):

return [
    'routes' => [
        [
            'pattern' => 'projects',
            'action'  => function () {
                return page('projects?filter=Auswahl');
            }
        ]
    ]
  ];
6

Again, there must be a menu that goes to the projects page, right? And that should have the filter attached, no route needed.

7

Ah okay now I understand. I’m so sorry if I didn’t make this one clearer…
So there is a main menu like this:

 <?php foreach($pages->listed() as $main_nav): ?>
   <li class="main-nav__list__item">
     <a <?php e($main_nav->isOpen(), ' class="active"') ?> href="<?= $main_nav->url() ?>"><?= $main_nav->title()->html() ?></a>
   </li>
 <?php endforeach ?>

and there is a secondary menu like this that displays the children:

<?php if ($page->depth() === 1 && ! $page->is('projects')): ?>
  <?php foreach($page->children() as $side_nav): ?>
     <li class="side-nav__list__item">
       <a <?php e($side_nav->isOpen(), ' class="active"') ?> href="<?= $side_nav->url() ?>"><?= $side_nav->title()->html() ?></a>
     </li>
  <?php endforeach ?>
<?php endif ?>

It always displays the children except for the Project page, where it displays the filter. It works great. If I click the filter, it will highlight the filter and filter out the content just as I want. But I want one of the filters to be pre-selected so I don’t see all the projects when clicking “Projects” but just the selected ones with the tag “selected”.

8

The question is really if it makes sense to default to one of the filters instead of showing all projects by default, but if that’s what you want, you can add the filter query to the url in the main nav

<?php foreach($pages->listed() as $main_nav): ?>
   <li class="main-nav__list__item">
     <a <?php e($main_nav->isOpen(), ' class="active"') ?> href="<?= $main_nav->url() . $main_nav->is('projects') ? '?filter='whatever' : '' ?>"><?= $main_nav->title()->html() ?></a>
   </li>
 <?php endforeach ?>
9

You’re absolutely right on this, I was saying the same, but the client wants it badly.