Joseph.Rawlings
6440a24390
- Implemented a button for toggling between dark and light modes in the navigation component. - Adjusted sidebar width and improved active link indicators with shadows for better visibility. - Updated layout colors for a more vibrant and cohesive theme, focusing on a "Pure Neutral Black + Neon" aesthetic. - Refined ambient gradient accents for improved content readability across devices. - Enhanced console layout for better responsiveness and user experience.
193 lines
11 KiB
PHP
193 lines
11 KiB
PHP
{{--
|
|
Credits Plus Enhanced Navigation Component
|
|
|
|
Created by: Exp (Discord: exp_yt)
|
|
Company: ExpHost - https://www.exphost.net/
|
|
|
|
This code is the intellectual property of Exp and ExpHost.
|
|
Unauthorized copying, modification, or distribution is prohibited.
|
|
--}}
|
|
<style>
|
|
.text-flow-effect {
|
|
background: linear-gradient(75deg,
|
|
hsl(178, 46.40%, 11.00%) 0%,
|
|
/* Tailwind slate-900 */
|
|
hsl(211, 57.80%, 17.60%) 30%,
|
|
hsl(220, 98%, 61%) 45%,
|
|
/* Tailwind blue-500 */
|
|
hsl(207, 53.00%, 50.80%) 55%,
|
|
/* Tailwind fuchsia-700 */
|
|
hsl(214, 82.50%, 31.40%) 70%,
|
|
hsl(222, 47%, 11%) 100%);
|
|
background-size: 400% auto;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: textFlowAnimation 8s linear infinite;
|
|
}
|
|
|
|
@keyframes textFlowAnimation {
|
|
to {
|
|
background-position: 400% center;
|
|
}
|
|
}
|
|
</style>
|
|
<nav
|
|
class="w-full px-4 lg:px-8 bg-background-secondary border-b border-neutral h-auto flex flex-col lg:flex-row justify-between fixed top-0 z-20">
|
|
<div x-data="{ slideOverOpen: false }"
|
|
x-init="$watch('slideOverOpen', value => { document.documentElement.style.overflow = value ? 'hidden' : '' })"
|
|
class="relative z-50 w-full h-auto">
|
|
|
|
<div class="flex flex-row items-center justify-between w-full h-16">
|
|
|
|
<!-- Logo and app name -->
|
|
<div class="flex flex-row items-center">
|
|
<a href="{{ route('home') }}" class="flex flex-row items-center h-10 gap-2" wire:navigate>
|
|
{!! $creditsLogoHtml ?? '' !!}
|
|
<span class="text-xl font-bold leading-none flex items-center text-flow-effect">
|
|
{{ config('app.name') }}
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Desktop menu: show only lg and above -->
|
|
<div class="hidden lg:flex flex-row ml-7">
|
|
@foreach (\App\Classes\Navigation::getLinks() as $nav)
|
|
@if (isset($nav['children']) && count($nav['children']) > 0)
|
|
<div class="relative">
|
|
<x-dropdown>
|
|
<x-slot:trigger>
|
|
<div class="flex flex-col">
|
|
<span
|
|
class="flex flex-row items-center p-3 text-sm font-semibold whitespace-nowrap text-base hover:text-base/80">
|
|
{{ $nav['name'] }}
|
|
</span>
|
|
</div>
|
|
</x-slot:trigger>
|
|
|
|
<x-slot:content>
|
|
@foreach ($nav['children'] as $child)
|
|
<x-navigation.link :href="route($child['route'], $child['params'] ?? null)"
|
|
:spa="isset($child['spa']) ? $nav['spa'] : true">
|
|
{{ $child['name'] }}
|
|
</x-navigation.link>
|
|
@endforeach
|
|
</x-slot:content>
|
|
</x-dropdown>
|
|
</div>
|
|
@else
|
|
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? null)"
|
|
:spa="isset($nav['spa']) ? $nav['spa'] : true"
|
|
class="flex items-center p-3">
|
|
{{ $nav['name'] }}
|
|
</x-navigation.link>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right-side controls -->
|
|
<div class="flex flex-row items-center">
|
|
|
|
<!-- Desktop-only controls -->
|
|
<div class="hidden lg:flex items-center mr-3 gap-3">
|
|
<!--<x-dropdown>
|
|
<x-slot:trigger>
|
|
<span class="text-sm font-semibold">
|
|
{{ strtoupper(app()->getLocale()) }} | {{ session('currency', config('settings.default_currency')) }}
|
|
</span>
|
|
</x-slot:trigger>
|
|
<x-slot:content>
|
|
<strong class="block p-2 text-xs font-semibold uppercase text-base/50"> Language </strong>
|
|
<livewire:components.language-switch />
|
|
<livewire:components.currency-switch />
|
|
</x-slot:content>
|
|
</x-dropdown>-->
|
|
|
|
@if(auth()->check() && isset($userCreditsDisplay))
|
|
<a href="{{ $creditsUrl ?? '/account/credits' }}" wire:navigate
|
|
class="text-sm text-base hover:text-primary transition-colors duration-200 px-3 py-2 whitespace-nowrap">
|
|
Credits: {{ $userCreditsDisplay }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Cart (always visible) -->
|
|
<livewire:components.cart />
|
|
|
|
<!-- Dark/Light mode toggle (left of user icon) -->
|
|
<button @click="darkMode = !darkMode" type="button"
|
|
class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-neutral/50 transition-colors duration-200"
|
|
:aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
|
|
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="size-4 text-base" viewBox="0 0 24 24" fill="currentColor"><path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"/></svg>
|
|
<svg x-show="darkMode" x-cloak xmlns="http://www.w3.org/2000/svg" class="size-4 text-base" viewBox="0 0 24 24" fill="currentColor"><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7Z"/></svg>
|
|
</button>
|
|
|
|
<!-- Desktop account menu -->
|
|
@if(auth()->check())
|
|
<div class="hidden lg:flex">
|
|
<x-dropdown>
|
|
<x-slot:trigger>
|
|
<img src="{{ auth()->user()->avatar }}"
|
|
class="size-8 rounded-full border border-neutral bg-background" alt="avatar" />
|
|
</x-slot:trigger>
|
|
<x-slot:content>
|
|
<div class="flex flex-col p-2">
|
|
<span class="text-sm text-base break-words">{{ auth()->user()->name }}</span>
|
|
<span class="text-sm text-base break-words">{{ auth()->user()->email }}</span>
|
|
</div>
|
|
@foreach (\App\Classes\Navigation::getAccountDropdownLinks() as $nav)
|
|
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? null)"
|
|
:spa="isset($nav['spa']) ? $nav['spa'] : true">
|
|
{{ $nav['name'] }}
|
|
</x-navigation.link>
|
|
@endforeach
|
|
<livewire:auth.logout />
|
|
</x-slot:content>
|
|
</x-dropdown>
|
|
</div>
|
|
@else
|
|
<div class="hidden lg:flex flex-row gap-3">
|
|
<a href="{{ route('login') }}" wire:navigate>
|
|
<x-button.secondary>{{ __('navigation.login') }}</x-button.secondary>
|
|
</a>
|
|
@if(!config('settings.registration_disabled', false))
|
|
<a href="{{ route('register') }}" wire:navigate>
|
|
<x-button.primary>{{ __('navigation.register') }}</x-button.primary>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Mobile menu toggle (below lg) -->
|
|
<button @click="slideOverOpen = !slideOverOpen"
|
|
class="relative w-10 h-10 flex lg:hidden items-center justify-center rounded-lg hover:bg-neutral transition"
|
|
aria-label="Toggle Menu">
|
|
<span x-show="!slideOverOpen" x-transition class="absolute inset-0 flex items-center justify-center">
|
|
<x-ri-menu-fill class="size-5" />
|
|
</span>
|
|
<span x-show="slideOverOpen" x-transition class="absolute inset-0 flex items-center justify-center">
|
|
<x-ri-close-fill class="size-5" />
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile slide-over menu -->
|
|
<template x-teleport="body">
|
|
<div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" x-cloak
|
|
class="fixed left-0 right-0 top-16 w-full z-[99]" style="height:calc(100dvh - 4rem);" aria-modal="true">
|
|
<div x-show="slideOverOpen" @click.away="slideOverOpen = false"
|
|
x-transition.opacity.duration.300ms
|
|
class="absolute inset-0 bg-background-secondary/80 backdrop-blur-md border-t border-neutral/50 shadow-2xl overflow-y-auto flex flex-col rounded-t-2xl">
|
|
<div class="flex flex-col h-full p-6">
|
|
<div class="flex-1 min-h-0 overflow-y-auto">
|
|
@include('creditsplus::components.navigation.sidebar-links')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</nav>
|