fix(ui): fix tab switching and replace dead sidebar links with proper routes

Tabs component: The <x-ui.tabs> was creating its own x-data Alpine scope which shadowed the parent's activeTab state, preventing tab clicks from toggling panel visibility. Now detects slot mode (ComponentSlot) and skips emitting x-data, letting the parent scope handle state. Sidebar: Profile edit and dashboard pages had hardcoded href="#" links for Projects, Campaigns, Messages, Portfolio. Replaced with the shared creator-sidebar include that uses real routes. Also fixed dropdown profile/ settings links in the main layout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix(ui): fix tab switching and replace dead sidebar links with proper routes
Tabs component: The <x-ui.tabs> was creating its own x-data Alpine scope which shadowed the parent's activeTab state, preventing tab clicks from toggling panel visibility. Now detects slot mode (ComponentSlot) and skips emitting x-data, letting the parent scope handle state. Sidebar: Profile edit and dashboard pages had hardcoded href="#" links for Projects, Campaigns, Messages, Portfolio. Replaced with the shared creator-sidebar include that uses real routes. Also fixed dropdown profile/ settings links in the main layout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
d1ee27c1 · Mahmoud Aglan · 15eb012e · d1ee27c1 · d1ee27c1 · d1ee27c1
Commit d1ee27c1 authored Jun 28, 2026 by Mahmoud Aglan
6 changed files
--- a/resources/views/campaigns/discover.blade.php
+++ b/resources/views/campaigns/discover.blade.php
@@ -2,17 +2,7 @@
    @auth
        @if(auth()->user()->isCreator())
            <x-slot:sidebar>
-                <x-ui.sidebar-group :label="__('ui.navigation')">
+                @include('components.layouts.creator-sidebar')
-                    <x-ui.sidebar-item icon="layout-dashboard" :href="route('creator.dashboard')">
-                        {{ __('creators.dashboard_title') }}
-                    </x-ui.sidebar-item>
-                    <x-ui.sidebar-item icon="megaphone" :href="route('campaigns.discover')" :active="true">
-                        {{ __('ui.browse_campaigns') }}
-                    </x-ui.sidebar-item>
-                    <x-ui.sidebar-item icon="briefcase" href="#">
-                        {{ __('ui.projects') }}
-                    </x-ui.sidebar-item>
-                </x-ui.sidebar-group>
            </x-slot:sidebar>
        @endif
    @endauth

--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -120,8 +120,8 @@
                            </button>
                        </x-slot:trigger>
-                        <x-ui.dropdown-item icon="user" href="#">{{ __('ui.profile') }}</x-ui.dropdown-item>
+                        <x-ui.dropdown-item icon="user" :href="auth()->user()->role === 'creator' ? route('creator.profile.edit') : '#'">{{ __('ui.profile') }}</x-ui.dropdown-item>
-                        <x-ui.dropdown-item icon="settings" href="#">{{ __('ui.settings') }}</x-ui.dropdown-item>
+                        <x-ui.dropdown-item icon="settings" :href="auth()->user()->role === 'admin' ? route('admin.settings.branding') : route('notifications.preferences')">{{ __('ui.settings') }}</x-ui.dropdown-item>
                        <div class="border-t border-[var(--color-border)] my-1"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

--- a/resources/views/components/ui/tabs.blade.php
+++ b/resources/views/components/ui/tabs.blade.php
 @props([
    'active' => null,
-    'tabs' => [],
 ])
 @php
-$tabsIsArray = is_array($tabs) && count($tabs) > 0;
+$tabsProp = $attributes->get('tabs') ?? (isset($tabs) && is_array($tabs) ? $tabs : []);
-$defaultTab = $active ?? ($tabsIsArray ? array_key_first($tabs) : '');
+$tabsIsArray = is_array($tabsProp) && count($tabsProp) > 0;
+$defaultTab = $active ?? ($tabsIsArray ? array_key_first($tabsProp) : '');
+$isSlotMode = isset($tabs) && !is_array($tabs);
 @endphp
+@if($isSlotMode)
+{{-- Slot mode: parent manages x-data, we just render the nav wrapper --}}
+<div {{ $attributes }}>
+    <div class="flex border-b border-[var(--color-border)] overflow-x-auto" role="tablist">
+        {{ $tabs }}
+    </div>
+    @if(isset($slot) && !$slot->isEmpty())
+    <div class="mt-4">
+        {{ $slot }}
+    </div>
+    @endif
+</div>
+@else
+{{-- Array mode: component owns the Alpine state --}}
 <div x-data="{ activeTab: '{{ $defaultTab }}' }" {{ $attributes }}>
-    {{-- Tab Navigation --}}
    <div class="flex border-b border-[var(--color-border)] overflow-x-auto" role="tablist">
-        @if($tabsIsArray)
+        @foreach($tabsProp as $key => $label)
-            @foreach($tabs as $key => $label)
+            <button
-                <button
+                type="button"
-                    type="button"
+                role="tab"
-                    role="tab"
+                x-on:click="activeTab = '{{ $key }}'"
-                    x-on:click="activeTab = '{{ $key }}'"
+                :aria-selected="activeTab === '{{ $key }}'"
-                    :aria-selected="activeTab === '{{ $key }}'"
+                :class="activeTab === '{{ $key }}'
-                    :class="activeTab === '{{ $key }}'
+                    ? 'border-[var(--color-primary)] text-[var(--color-primary)]'
-                        ? 'border-[var(--color-primary)] text-[var(--color-primary)]'
+                    : 'border-transparent text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border)]'"
-                        : 'border-transparent text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border)]'"
+                class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200 whitespace-nowrap focus:outline-none"
-                    class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200 whitespace-nowrap focus:outline-none"
+            >
-                >
+                {{ $label }}
-                    {{ $label }}
+            </button>
-                </button>
+        @endforeach
-            @endforeach
-        @elseif(isset($tabs) && !is_array($tabs))
-            {{ $tabs }}
-        @endif
    </div>
-    {{-- Tab Panels --}}
    <div class="mt-4">
        {{ $slot }}
    </div>
 </div>
+@endif
--- a/resources/views/creators/dashboard.blade.php
+++ b/resources/views/creators/dashboard.blade.php
 <x-layouts.app :title="__('creators.dashboard_title')">
    <x-slot:sidebar>
-        <x-ui.sidebar-group :label="__('ui.navigation')">
+        @include('components.layouts.creator-sidebar')
-            <x-ui.sidebar-item icon="layout-dashboard" :href="route('creator.dashboard')" :active="true">
-                {{ __('creators.dashboard_title') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="user" :href="route('creator.profile.edit')">
-                {{ __('ui.profile') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="briefcase" href="#">
-                {{ __('ui.projects') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="search" href="#">
-                {{ __('ui.campaigns') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="mail" href="#">
-                {{ __('ui.messages') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="image" href="#">
-                {{ __('ui.portfolio') }}
-            </x-ui.sidebar-item>
-        </x-ui.sidebar-group>
    </x-slot:sidebar>
    <x-slot:header>

--- a/resources/views/creators/profile/edit.blade.php
+++ b/resources/views/creators/profile/edit.blade.php
 <x-layouts.app :title="__('ui.edit_profile')">
    <x-slot:sidebar>
-        <x-ui.sidebar-group :label="__('ui.navigation')">
+        @include('components.layouts.creator-sidebar')
-            <x-ui.sidebar-item icon="layout-dashboard" :href="route('creator.dashboard')">
-                {{ __('creators.dashboard_title') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="user" :href="route('creator.profile.edit')" :active="true">
-                {{ __('ui.profile') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="briefcase" href="#">
-                {{ __('ui.projects') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="search" href="#">
-                {{ __('ui.campaigns') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="mail" href="#">
-                {{ __('ui.messages') }}
-            </x-ui.sidebar-item>
-            <x-ui.sidebar-item icon="image" href="#">
-                {{ __('ui.portfolio') }}
-            </x-ui.sidebar-item>
-        </x-ui.sidebar-group>
    </x-slot:sidebar>
    <x-slot:header>

--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -120,8 +120,8 @@
                            </button>
                        </x-slot:trigger>
-                        <x-ui.dropdown-item icon="user" href="#">{{ __('ui.profile') }}</x-ui.dropdown-item>
+                        <x-ui.dropdown-item icon="user" :href="auth()->user()->role === 'creator' ? route('creator.profile.edit') : '#'">{{ __('ui.profile') }}</x-ui.dropdown-item>
-                        <x-ui.dropdown-item icon="settings" href="#">{{ __('ui.settings') }}</x-ui.dropdown-item>
+                        <x-ui.dropdown-item icon="settings" :href="auth()->user()->role === 'admin' ? route('admin.settings.branding') : route('notifications.preferences')">{{ __('ui.settings') }}</x-ui.dropdown-item>
                        <div class="border-t border-[var(--color-border)] my-1"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf