Skip to content

U
UGC Heaven Web PHP
Commit d1ee27c1 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 15eb012e
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 78 deletions
resources/views/campaigns/discover.blade.php
View file @ d1ee27c1
......@@ -2,17 +2,7 @@
@auth
@if(auth()->user()->isCreator())
<x-slot:sidebar>
<x-ui.sidebar-group :label="__('ui.navigation')">
<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>
@include('components.layouts.creator-sidebar')
</x-slot:sidebar>
@endif
@endauth
......
resources/views/components/layouts/app.blade.php
View file @ d1ee27c1
......@@ -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="settings" href="#">{{ __('ui.settings') }}</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="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
......
resources/views/components/ui/tabs.blade.php
View file @ d1ee27c1
@props([
'active' => null,
'tabs' => [],
])
@php
$tabsIsArray = is_array($tabs) && count($tabs) > 0;
$defaultTab = $active ?? ($tabsIsArray ? array_key_first($tabs) : '');
$tabsProp = $attributes->get('tabs') ?? (isset($tabs) && is_array($tabs) ? $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($tabs as $key => $label)
<button
type="button"
role="tab"
x-on:click="activeTab = '{{ $key }}'"
:aria-selected="activeTab === '{{ $key }}'"
:class="activeTab === '{{ $key }}'
? '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)]'"
class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200 whitespace-nowrap focus:outline-none"
>
{{ $label }}
</button>
@endforeach
@elseif(isset($tabs) && !is_array($tabs))
{{ $tabs }}
@endif
@foreach($tabsProp as $key => $label)
<button
type="button"
role="tab"
x-on:click="activeTab = '{{ $key }}'"
:aria-selected="activeTab === '{{ $key }}'"
:class="activeTab === '{{ $key }}'
? '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)]'"
class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200 whitespace-nowrap focus:outline-none"
>
{{ $label }}
</button>
@endforeach
</div>
{{-- Tab Panels --}}
<div class="mt-4">
{{ $slot }}
</div>
</div>
@endif
resources/views/creators/dashboard.blade.php
View file @ d1ee27c1
<x-layouts.app :title="__('creators.dashboard_title')">
<x-slot:sidebar>
<x-ui.sidebar-group :label="__('ui.navigation')">
<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>
@include('components.layouts.creator-sidebar')
</x-slot:sidebar>
<x-slot:header>
......
resources/views/creators/profile/edit.blade.php
View file @ d1ee27c1
<x-layouts.app :title="__('ui.edit_profile')">
<x-slot:sidebar>
<x-ui.sidebar-group :label="__('ui.navigation')">
<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>
@include('components.layouts.creator-sidebar')
</x-slot:sidebar>
<x-slot:header>
......
resources/views/layouts/app.blade.php
View file @ d1ee27c1
......@@ -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="settings" href="#">{{ __('ui.settings') }}</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="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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment