Update profile pages design
This commit is contained in:
@@ -1,37 +1,96 @@
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
{{-- Profile Card --}}
|
||||
@include('profile.partials.profile')
|
||||
|
||||
<div
|
||||
class="overflow-hidden mt-5 relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
|
||||
<div class="flex flex-col p-2">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.show')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-user pr-4"></i> {{ __('nav.profile') }}</a>
|
||||
{{-- Desktop Navigation (hidden on mobile) --}}
|
||||
<div class="hidden md:block">
|
||||
<nav
|
||||
class="mt-5 overflow-hidden rounded-xl bg-white/40 shadow-lg ring-1 ring-black/5 dark:bg-neutral-950/40 backdrop-blur dark:ring-white/10">
|
||||
<div class="flex flex-col p-1.5">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.show'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-user w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.show')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.profile') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.notifications')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-bell pr-4"></i> Notifications</a>
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.notifications'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-bell w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.notifications')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>Notifications</span>
|
||||
@php $unreadCount = auth()->user()->unreadNotifications()->count(); @endphp
|
||||
@if($unreadCount > 0)
|
||||
<span class="ml-auto inline-flex items-center justify-center h-5 min-w-[20px] rounded-full bg-rose-600 px-1.5 text-[10px] font-bold text-white">
|
||||
{{ $unreadCount > 99 ? '99+' : $unreadCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.likes')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-heart pr-4"></i> {{ __('nav.likes') }}</a>
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.likes'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-heart w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.likes')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.likes') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('user.watched')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-eye pr-4"></i>
|
||||
{{ __('nav.watched') }}</a>
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('user.watched'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-eye w-5 text-center text-base
|
||||
@if(request()->routeIs('user.watched')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.watched') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.comments')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-comment pr-4"></i>
|
||||
{{ __('nav.comments') }}</a>
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.comments'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-comment w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.comments')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.comments') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.playlists')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-rectangle-list pr-4"></i>
|
||||
{{ __('nav.playlists') }}</a>
|
||||
</div>
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.playlists'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-rectangle-list w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.playlists')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.playlists') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{-- Actions --}}
|
||||
@include('profile.partials.actions')
|
||||
</div>
|
||||
|
||||
@include('profile.partials.actions')
|
||||
</div>
|
||||
{{-- Mobile Navigation (horizontal scroll tabs, visible only on mobile) --}}
|
||||
@include('profile.partials.mobile-nav')
|
||||
</div>
|
||||
Reference in New Issue
Block a user