add sections bar to profile page

mods and about sections WIP. Also adjusted user-stack tooltip position
slightly

app/Livewire/User/Profile.php

@@ -3,12 +3,16 @@
 namespace App\Livewire\User;
 
 use App\Models\User;
+use Livewire\Attributes\Url;
 use Livewire\Component;
 
 class Profile extends Component
 {
     public User $user;
 
+    #[Url]
+    public string $section = 'wall';
+
     public $followers;
 
     public $following;
@@ -23,9 +27,13 @@ class Profile extends Component
         return view('livewire.user.profile');
     }
 
+    public function setSection(string $name) {
+        $this->section = $name;
+    }
+
     public function message()
     {
-        $this->render();
+        // todo: not implemented yet
     }
 
     public function followUser(User $user)

resources/views/livewire/user-stack.blade.php

@@ -10,8 +10,9 @@
                     <img class="h-full w-full rounded-full" src="{{$user->profile_photo_url}}"
                          alt="{{$user->name[0]}}" />
                 </a>
+                {{-- tooltip --}}
                 <div
-                    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
+                    class="absolute bottom-full -ml-3 left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
                     {{$user->name}}
                 </div>
             </div>
@@ -21,7 +22,7 @@
                 <span
                     class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span>
                 <div
-                    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
+                    class="absolute bottom-full -ml-3 left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
                     {{$users->count()}} total
                 </div>
             </div>

resources/views/livewire/user/profile.blade.php

@@ -68,7 +68,60 @@
     </div>
     <div class="grid grid-cols-4">
         <div class="flex flex-col col-span-3">
-            {{-- column 1 placeholder --}}
+            <div>
+                {{-- Mobile Dropdown --}}
+                <div class="sm:hidden">
+                    <label for="tabs" class="sr-only">{{ __('Select a tab') }}</label>
+                    <select wire:model.change="section" id="tabs" name="tabs" class="block w-full rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
+                        <option value="wall">{{ __('Wall') }}</option>
+                        <option value="mods">{{ __('Mods') }}</option>
+                        <option value="recentActivity">{{ __('Recent Activity') }}</option>
+                        <option value="aboutMe">{{ __('About Me') }}</option>
+                    </select>
+                </div>
+
+                {{-- Desktop Tabs --}}
+                <div class="hidden sm:block">
+                    <nav class="isolate m-4 flex divide-x divide-gray-200 dark:divide-gray-800 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl" aria-label="Tabs">
+                        <button wire:click="setSection('wall')" class="tab rounded-l-xl group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-black dark:hover:text-white focus:z-10" aria-current="page">
+                            <span>{{ __('Wall') }}</span>
+                            <span aria-hidden="true" class="{{$section === 'wall' ? 'bg-gray-500 absolute inset-x-0 bottom-0 h-0.5' : 'bottom-0 h-0.5'}}"></span>
+                        </button>
+                        <button wire:click="setSection('mods')" class="tab group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-black dark:hover:text-white focus:z-10">
+                            <span>{{ __('Mods') }}</span>
+                            <span aria-hidden="true" class="{{$section === 'mods' ? 'bg-gray-500 absolute inset-x-0 bottom-0 h-0.5' : 'bottom-0 h-0.5'}}"></span>
+                        </button>
+                        <button wire:click="setSection('recentActivity')" class="tab group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-black dark:hover:text-white focus:z-10">
+                            <span>{{ __('Recent Activity') }}</span>
+                            <span aria-hidden="true" class="{{$section === 'recentActivity' ? 'bg-gray-500 absolute inset-x-0 bottom-0 h-0.5' : 'bottom-0 h-0.5'}}"></span>
+                        </button>
+                        <button wire:click="setSection('aboutMe')" class="tab rounded-r-xl group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-black dark:hover:text-white focus:z-10">
+                            <span>{{ __('About Me') }}</span>
+                            <span aria-hidden="true" class="{{$section === 'aboutMe' ? 'bg-gray-500 absolute inset-x-0 bottom-0 h-0.5' : 'bottom-0 h-0.5'}}"></span>
+                        </button>
+                    </nav>
+                </div>
+            </div>
+            <div>
+                @switch($section)
+                    @case('wall')
+                        <p class="m-4">This is the wall. I don't think this can be implemented yet? requires comments or something</p>
+                        @break
+                    @case('mods')
+                        <div class="m-4 grid grid-cols-1 gap-6 lg:grid-cols-2">
+                            @foreach($user->mods as $mod)
+                                <x-mod-card :mod="$mod"/>
+                            @endforeach
+                        </div>
+                        @break
+                    @case('recentActivity')
+                        <p class="m-4">This is the recent activity. Probably need to implement some kind of activity tracking for this?</p>
+                        @break
+                    @case('aboutMe')
+                        <p class="m-4">{{$user->about}}</p>
+                        @break
+                @endswitch
+            </div>
         </div>
         <div class="flex flex-col justify-center items-center">
             <div class="flex w-full max-w-sm">