categories menu with colors

Hi,

I want to have a navigation for my categories but when selected the state has te be active. I made a component


@props(['color', 'active' => false])

@php
    $baseColors = match ($color) {
        'blue' => 'bg-blue-100 text-blue-800',
        'gray' => 'bg-gray-100 text-gray-800',
        'red' => 'bg-red-100 text-red-800',
        'green' => 'bg-green-100 text-green-800',
        'yellow' => 'bg-yellow-100 text-yellow-800',
        'indigo' => 'bg-indigo-100 text-indigo-800',
        'purple' => 'bg-purple-100 text-purple-800',
        'pink' => 'bg-pink-100 text-pink-800',
        default => 'bg-orange-100 text-orange-800',
    };

    $activeColors = match ($color) {
        'blue' => 'bg-blue-100 text-blue-800 border-blue-500',
        'gray' => 'bg-gray-100 text-gray-800 border-gray-500',
        'red' => 'bg-red-100 text-red-800 border-red-500',
        'green' => 'bg-green-100 text-green-800 border-green-500',
        'yellow' => 'bg-yellow-100 text-yellow-800 border-yellow-500',
        'indigo' => 'bg-indigo-100 text-indigo-800 border-indigo-500',
        'purple' => 'bg-purple-100 text-purple-800 border-purple-500',
        'pink' => 'bg-pink-100 text-pink-800 border-pink-500',
        default => 'bg-orange-100 text-orange-800 border-orange-500',
    };

    $color = $active ? $activeColors : $baseColors;
@endphp

<button {{ $attributes->merge(['class' => "$color text-xs font-medium me-2 px-2.5 py-0.5 border rounded"]) }}>
    {{ $slot }}
</button>

my code in my livewire component is:

<x-badge-category wire:navigate
                                          href="{{ route('posts.index', ['category' => $this->activeCategory->slug]) }}"
                                          :Color="$this->activeCategory->color ? 'active' : ''">
                            {{ $this->activeCategory->name }}
                        </x-badge-category>

My badge won't change.

in my PostIndex `php #[Computed] public function posts() { return Post::published() ->with('author', 'comments', 'category') ->search($this->search) ->when($this->activeCategory, function ($query) { $query->withCategory($this->category); }) ->when($this->activeTag, function ($query) { $query->withAnyTags([$this->tag]); }) ->orderBy('published_at', $this->sort) ->paginate(9); }

#[Computed()]
public function activeCategory()
{
    if ($this->category === null || $this->category === '') {
        return null;
    }

    return Category::where('slug', $this->category)->first();
}

#[Computed()]
public function activeTag()
{
    if ($this->tag === null || $this->tag === '') {
        return null;
    }

    return Tag::findFromString($this->tag);
}


How to change the badge to active

LaryAI

1 year ago

Level 58

To ensure that your badge changes to the active state correctly, you need to make sure that the active property is being passed correctly to your component. It looks like there might be a small issue with how you're passing the active property in your Livewire component.

Here's a step-by-step solution to address the issue:

Ensure the active property is correctly passed to the component:

In your Livewire component, you should pass the active property as a boolean to the x-badge-category component. You can do this by checking if the current category is the active category.
Update the Livewire component code:

Modify your Livewire component to correctly pass the active property. Here's an example of how you can do it:
```
<x-badge-category 
    wire:navigate
    href="{{ route('posts.index', ['category' => $this->activeCategory->slug]) }}"
    :color="$this->activeCategory->color"
    :active="$this->activeCategory->slug === $category->slug"
>
    {{ $this->activeCategory->name }}
</x-badge-category>
```
In this example, :active="$this->activeCategory->slug === $category->slug" checks if the current category's slug matches the active category's slug and sets the active property accordingly.

Ensure the active property is used in the component:

Make sure your Blade component is correctly using the active property to determine the colors. Your component code looks correct, but let's ensure it's complete:

@props(['color', 'active' => false])

@php
    $baseColors = match ($color) {
        'blue' => 'bg-blue-100 text-blue-800',
        'gray' => 'bg-gray-100 text-gray-800',
        'red' => 'bg-red-100 text-red-800',
        'green' => 'bg-green-100 text-green-800',
        'yellow' => 'bg-yellow-100 text-yellow-800',
        'indigo' => 'bg-indigo-100 text-indigo-800',
        'purple' => 'bg-purple-100 text-purple-800',
        'pink' => 'bg-pink-100 text-pink-800',
        default => 'bg-orange-100 text-orange-800',
    };

    $activeColors = match ($color) {
        'blue' => 'bg-blue-100 text-blue-800 border-blue-500',
        'gray' => 'bg-gray-100 text-gray-800 border-gray-500',
        'red' => 'bg-red-100 text-red-800 border-red-500',
        'green' => 'bg-green-100 text-green-800 border-green-500',
        'yellow' => 'bg-yellow-100 text-yellow-800 border-yellow-500',
        'indigo' => 'bg-indigo-100 text-indigo-800 border-indigo-500',
        'purple' => 'bg-purple-100 text-purple-800 border-purple-500',
        'pink' => 'bg-pink-100 text-pink-800 border-pink-500',
        default => 'bg-orange-100 text-orange-800 border-orange-500',
    };

    $color = $active ? $activeColors : $baseColors;
@endphp

<button {{ $attributes->merge(['class' => "$color text-xs font-medium me-2 px-2.5 py-0.5 border rounded"]) }}>
    {{ $slot }}
</button>

Verify the activeCategory method:

Ensure that your activeCategory method in the Livewire component is correctly identifying the active category:

#[Computed]
public function activeCategory()
{
    if ($this->category === null || $this->category === '') {
        return null;
    }

    return Category::where('slug', $this->category)->first();
}

By following these steps, you should be able to ensure that the badge changes to the active state correctly when a category is selected.

Please or to participate in this conversation.