Groups are auto close when other group are active in navigation

Certainly! Here’s a solution you can use to ensure that only one navigation group is open at a time—when a new group is opened, any other open group will close.

This is a common pattern, sometimes called an accordion menu. Typically, you'd manage the "active/open" group state in your component, so that only one group can be open at a time.

Here's how you can do it with Livewire/Blade or using Vue.js. If you want a pure JavaScript/Blade-only solution, let me know!

---

Blade/Livewire Solution:

Assume you have a list of groups, and each group can be opened/closed. You keep track of the currently open group index.

@php
    $groups = [
        ['name' => 'Group 1', 'items' => ['Item 1', 'Item 2']],
        ['name' => 'Group 2', 'items' => ['Item 3', 'Item 4']],
        // ... more groups
    ];
@endphp

<div x-data="{ openGroup: null }">
    @foreach($groups as $index => $group)
        <div>
            <button @click="openGroup === {{ $index }} ? openGroup = null : openGroup = {{ $index }}">
                {{ $group['name'] }}
            </button>
            <div x-show="openGroup === {{ $index }}">
                <ul>
                    @foreach($group['items'] as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endforeach
</div>

• This example uses Alpine.js (which comes with Laravel Breeze, Jetstream, etc.).
• openGroup holds the index of the currently opened group.
• Clicking a group toggles it, closing any other group.

---

Vue.js Solution:

If your navigation is inside a Vue component:

<template>
  <div>
    <div v-for="(group, index) in groups" :key="index">
      <button @click="toggleGroup(index)">
        {{ group.name }}
      </button>
      <div v-show="activeGroup === index">
        <ul>
          <li v-for="item in group.items" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        { name: 'Group 1', items: ['Item 1', 'Item 2'] },
        { name: 'Group 2', items: ['Item 3', 'Item 4'] },
      ],
      activeGroup: null
    };
  },
  methods: {
    toggleGroup(index) {
      this.activeGroup = this.activeGroup === index ? null : index;
    }
  }
}
</script>

---

Summary:

• Only one group's items are visible at a time.
• Clicking another group's button closes the currently open group.

If you're using something specific like Jetstream, Filament, or another navigation package, let me know and I can tailor the code further!