권혁성
2b3612fc60
- 페이지 로딩 시 블러 오버레이 + 프로그레스 바 추가 - 모든 스크립트 로드 완료 후 오버레이 fade-out - 메뉴 그룹 상태를 서버에서 기본 펼침으로 렌더링 - localStorage 기반 메뉴 상태 CSS 즉시 적용 - FOUC(Flash of Unstyled Content) 방지 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
88 lines
3.6 KiB
PHP
88 lines
3.6 KiB
PHP
@props(['menu', 'depth' => 0])
|
|
|
|
@php
|
|
$sidebarMenuService = app(\App\Services\SidebarMenuService::class);
|
|
$isExpanded = $sidebarMenuService->isMenuOrChildActive($menu);
|
|
$groupId = 'menu-group-' . $menu->id;
|
|
$children = $menu->menuChildren ?? collect();
|
|
$hasChildren = $children->isNotEmpty();
|
|
$paddingLeft = $depth > 0 ? ($depth * 0.75 + 0.75) . 'rem' : '0.75rem';
|
|
|
|
// depth에 따른 스타일 분기
|
|
$isTopLevel = $depth === 0;
|
|
@endphp
|
|
|
|
@if($isTopLevel)
|
|
{{-- depth0: 최상위 그룹 헤더 스타일 --}}
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button
|
|
onclick="toggleMenuGroup('{{ $groupId }}')"
|
|
class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded"
|
|
style="padding-left: {{ $paddingLeft }}"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
@if($menu->icon)
|
|
<x-sidebar.menu-icon :icon="$menu->icon" class="w-4 h-4" />
|
|
@endif
|
|
<span class="sidebar-text">{{ $menu->name }}</span>
|
|
</span>
|
|
<svg
|
|
id="{{ $groupId }}-icon"
|
|
class="w-3 h-3 transition-transform sidebar-text rotate-180"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- 기본 펼침 상태, CSS에서 localStorage 기반으로 즉시 제어 --}}
|
|
<ul id="{{ $groupId }}" class="menu-group-content space-y-1 mt-1">
|
|
@foreach($children as $child)
|
|
@if($child->menuChildren && $child->menuChildren->isNotEmpty())
|
|
<x-sidebar.menu-group :menu="$child" :depth="$depth + 1" />
|
|
@else
|
|
<x-sidebar.menu-item :menu="$child" :depth="$depth + 1" />
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
</li>
|
|
@else
|
|
{{-- depth1+: 서브그룹 스타일 (일반 텍스트, 접기/펼치기) --}}
|
|
<li>
|
|
<button
|
|
onclick="toggleMenuGroup('{{ $groupId }}')"
|
|
class="sidebar-subgroup-header w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"
|
|
style="padding-left: {{ $paddingLeft }}"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
@if($menu->icon)
|
|
<x-sidebar.menu-icon :icon="$menu->icon" class="w-4 h-4" />
|
|
@endif
|
|
<span class="font-medium sidebar-text">{{ $menu->name }}</span>
|
|
</span>
|
|
<svg
|
|
id="{{ $groupId }}-icon"
|
|
class="w-3 h-3 transition-transform sidebar-text rotate-180"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- 기본 펼침 상태, CSS에서 localStorage 기반으로 즉시 제어 --}}
|
|
<ul id="{{ $groupId }}" class="menu-group-content space-y-1 mt-1">
|
|
@foreach($children as $child)
|
|
@if($child->menuChildren && $child->menuChildren->isNotEmpty())
|
|
<x-sidebar.menu-group :menu="$child" :depth="$depth + 1" />
|
|
@else
|
|
<x-sidebar.menu-item :menu="$child" :depth="$depth + 1" />
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
</li>
|
|
@endif
|