hskwon
604aa256f6
- public/js/menu-tree.js 공통 스크립트 생성 - 테이블(tr.menu-row) / div(.menu-item) 둘 다 지원 - toggleChildren, hideChildren, showChildren 함수 통합 - 권한 관리 페이지들 메뉴 트리 디자인 통일 - role-permissions, department-permissions, user-permissions - 폴더/파일 아이콘, 접기/펼치기 버튼, chevron 아이콘 - menu-row 클래스 및 data 속성 추가 - permission-analyze 접기/펼치기 기능 추가 - data-parent-id, data-depth 속성 추가 - 폴더 버튼 클릭으로 하위 메뉴 토글 - menus 페이지 스크립트 공통화 - 각 페이지 중복 코드 제거 및 공통 menu-tree.js 로드
54 lines
2.9 KiB
PHP
54 lines
2.9 KiB
PHP
@forelse($menuTree as $menu)
|
|
<div
|
|
class="menu-item flex items-center gap-2 py-2 rounded-lg border border-transparent cursor-pointer transition-colors hover:bg-gray-50 {{ $menu->depth > 0 ? 'ml-4 border-l-2 border-gray-200' : '' }}"
|
|
data-menu-id="{{ $menu->id }}"
|
|
data-parent-id="{{ $menu->parent_id ?? '' }}"
|
|
data-depth="{{ $menu->depth ?? 0 }}"
|
|
data-menu-name="{{ $menu->name }}"
|
|
onclick="selectMenu({{ $menu->id }}, '{{ addslashes($menu->name) }}')"
|
|
style="padding-left: {{ ($menu->depth * 1.5) + 0.75 }}rem;"
|
|
>
|
|
{{-- 트리 구조 표시 --}}
|
|
@if($menu->depth > 0)
|
|
<span class="text-gray-300 text-xs font-mono flex-shrink-0">└─</span>
|
|
@endif
|
|
|
|
{{-- 폴더/아이템 아이콘 (폴더는 클릭으로 접기/펼치기) --}}
|
|
@if($menu->has_children)
|
|
<button type="button"
|
|
onclick="event.stopPropagation(); toggleChildren({{ $menu->id }})"
|
|
class="toggle-btn flex items-center text-blue-500 hover:text-blue-700 focus:outline-none"
|
|
data-menu-id="{{ $menu->id }}">
|
|
<svg class="w-4 h-4 transform transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
</svg>
|
|
<svg class="w-3 h-3 ml-0.5 transform transition-transform chevron-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
@else
|
|
<svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
@endif
|
|
|
|
{{-- 메뉴 정보 --}}
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm {{ $menu->depth === 0 ? 'font-semibold text-gray-900' : 'font-medium text-gray-700' }} truncate">
|
|
{{ $menu->name }}
|
|
</span>
|
|
@if($menu->url)
|
|
<span class="text-xs text-gray-400 truncate hidden sm:inline">{{ $menu->url }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 메뉴 ID --}}
|
|
<span class="text-xs text-gray-400 font-mono flex-shrink-0">ID:{{ $menu->id }}</span>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-8 text-gray-500">
|
|
<p>메뉴가 없습니다.</p>
|
|
</div>
|
|
@endforelse |