135 lines
No EOL
6.1 KiB
PHP
135 lines
No EOL
6.1 KiB
PHP
<nav class="flux-cms-navigation" data-navigation="{{ $navigation->name }}">
|
|
@if($navigationItems->isNotEmpty())
|
|
<ul class="navigation-items {{ $cssClasses }}">
|
|
@foreach($navigationItems as $item)
|
|
<li class="navigation-item {{ $item->hasChildren() ? 'has-children' : '' }} {{ $this->isActive($item) ? 'active' : '' }}"
|
|
data-item-id="{{ $item->id }}">
|
|
|
|
{{-- Item Link --}}
|
|
@if($item->page_id || $item->url)
|
|
<a href="{{ $item->getEffectiveUrl() }}"
|
|
@if($item->target) target="{{ $item->target }}" @endif
|
|
class="navigation-link {{ $this->isActive($item) ? 'active' : '' }}">
|
|
{{ $item->getTranslation('title', app()->getLocale()) }}
|
|
</a>
|
|
@else
|
|
<span class="navigation-text">
|
|
{{ $item->getTranslation('title', app()->getLocale()) }}
|
|
</span>
|
|
@endif
|
|
|
|
{{-- Sub-navigation --}}
|
|
@if($item->hasChildren() && $showSubmenus)
|
|
<ul class="sub-navigation">
|
|
@foreach($item->children as $child)
|
|
@if($child->is_active)
|
|
<li class="sub-navigation-item {{ $this->isActive($child) ? 'active' : '' }}"
|
|
data-item-id="{{ $child->id }}">
|
|
|
|
@if($child->page_id || $child->url)
|
|
<a href="{{ $child->getEffectiveUrl() }}"
|
|
@if($child->target) target="{{ $child->target }}" @endif
|
|
class="sub-navigation-link {{ $this->isActive($child) ? 'active' : '' }}">
|
|
{{ $child->getTranslation('title', app()->getLocale()) }}
|
|
</a>
|
|
@else
|
|
<span class="sub-navigation-text">
|
|
{{ $child->getTranslation('title', app()->getLocale()) }}
|
|
</span>
|
|
@endif
|
|
|
|
{{-- Third level navigation if needed --}}
|
|
@if($child->hasChildren() && $maxDepth > 2)
|
|
<ul class="sub-sub-navigation">
|
|
@foreach($child->children as $grandchild)
|
|
@if($grandchild->is_active)
|
|
<li class="sub-sub-navigation-item {{ $this->isActive($grandchild) ? 'active' : '' }}"
|
|
data-item-id="{{ $grandchild->id }}">
|
|
|
|
@if($grandchild->page_id || $grandchild->url)
|
|
<a href="{{ $grandchild->getEffectiveUrl() }}"
|
|
@if($grandchild->target) target="{{ $grandchild->target }}" @endif
|
|
class="sub-sub-navigation-link {{ $this->isActive($grandchild) ? 'active' : '' }}">
|
|
{{ $grandchild->getTranslation('title', app()->getLocale()) }}
|
|
</a>
|
|
@else
|
|
<span class="sub-sub-navigation-text">
|
|
{{ $grandchild->getTranslation('title', app()->getLocale()) }}
|
|
</span>
|
|
@endif
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@else
|
|
{{-- Empty navigation state --}}
|
|
@if(config('app.debug'))
|
|
<div class="navigation-empty text-gray-500 text-sm">
|
|
Navigation "{{ $navigation->name }}" has no active items.
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</nav>
|
|
|
|
{{-- Default Styles (can be overridden in your theme) --}}
|
|
@pushOnce('styles')
|
|
<style>
|
|
.flux-cms-navigation .navigation-items {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.flux-cms-navigation .navigation-item {
|
|
position: relative;
|
|
}
|
|
|
|
.flux-cms-navigation .navigation-link,
|
|
.flux-cms-navigation .navigation-text {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.flux-cms-navigation .navigation-link:hover {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.flux-cms-navigation .navigation-link.active {
|
|
font-weight: 600;
|
|
color: #2563eb;
|
|
}
|
|
|
|
.flux-cms-navigation .sub-navigation,
|
|
.flux-cms-navigation .sub-sub-navigation {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.flux-cms-navigation .has-children > .navigation-link::after {
|
|
content: '▼';
|
|
font-size: 0.75em;
|
|
margin-left: 0.5rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Mobile-first responsive design */
|
|
@media (max-width: 768px) {
|
|
.flux-cms-navigation .sub-navigation {
|
|
margin-left: 0;
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endPushOnce |