hskwon
2f73a1f4e6
- Notion 스타일 좌우 드래그로 계층 이동 방식 변경 - → 오른쪽 드래그: 상위 메뉴의 하위로 이동 (파란색 하이라이트) - ← 왼쪽 드래그: 상위 레벨로 이동 (주황색 하이라이트) - 드래그 인디케이터 툴팁 추가 (인덴트/아웃덴트/순서변경) - CSS 펄스 애니메이션으로 타겟 행 강조 - updateRowHighlight 함수 수정: 아웃덴트 시 드래그 중인 행 하이라이트
556 lines
22 KiB
PHP
556 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '메뉴 관리')
|
|
|
|
@section('content')
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">메뉴 관리</h1>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동
|
|
</p>
|
|
</div>
|
|
<a href="{{ route('menus.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
|
|
+ 새 메뉴
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 필터 영역 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<form id="filterForm" class="flex gap-4">
|
|
<!-- 검색 -->
|
|
<div class="flex-1">
|
|
<input type="text"
|
|
name="search"
|
|
placeholder="메뉴명, URL로 검색..."
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 활성 상태 필터 -->
|
|
<div class="w-48">
|
|
<select name="is_active" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">전체 상태</option>
|
|
<option value="1">활성</option>
|
|
<option value="0">비활성</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 검색 버튼 -->
|
|
<button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition">
|
|
검색
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 테이블 영역 (HTMX로 로드) -->
|
|
<div id="menu-table"
|
|
hx-get="/api/admin/menus"
|
|
hx-trigger="load, filterSubmit from:body"
|
|
hx-include="#filterForm"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<!-- 로딩 스피너 -->
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* 드래그 인디케이터 스타일 */
|
|
.drag-indicator {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
transition: background-color 0.15s, transform 0.1s;
|
|
}
|
|
.drag-indicator.indent {
|
|
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
|
color: white;
|
|
}
|
|
.drag-indicator.outdent {
|
|
background: linear-gradient(135deg, #f97316, #ea580c);
|
|
color: white;
|
|
}
|
|
.drag-indicator.reorder {
|
|
background: linear-gradient(135deg, #6b7280, #4b5563);
|
|
color: white;
|
|
}
|
|
|
|
/* 드래그 중 행 하이라이트 - 더 눈에 띄게 */
|
|
.menu-row.drag-target-indent {
|
|
background: rgba(59, 130, 246, 0.25) !important;
|
|
border: 2px solid #3b82f6 !important;
|
|
border-left-width: 6px !important;
|
|
position: relative;
|
|
animation: pulse-indent 0.8s ease-in-out infinite;
|
|
}
|
|
.menu-row.drag-target-outdent {
|
|
background: rgba(249, 115, 22, 0.25) !important;
|
|
border: 2px solid #f97316 !important;
|
|
border-right-width: 6px !important;
|
|
position: relative;
|
|
animation: pulse-outdent 0.8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 펄스 애니메이션 */
|
|
@keyframes pulse-indent {
|
|
0%, 100% { background: rgba(59, 130, 246, 0.15); }
|
|
50% { background: rgba(59, 130, 246, 0.35); }
|
|
}
|
|
@keyframes pulse-outdent {
|
|
0%, 100% { background: rgba(249, 115, 22, 0.15); }
|
|
50% { background: rgba(249, 115, 22, 0.35); }
|
|
}
|
|
|
|
/* 인덴트 프리뷰 라인 */
|
|
.indent-preview-line {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 3px;
|
|
background: #3b82f6;
|
|
border-radius: 2px;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
transition: width 0.15s, left 0.15s;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
|
|
<script>
|
|
// 폼 제출 시 HTMX 이벤트 트리거
|
|
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
|
|
// HTMX 응답 처리 + SortableJS 초기화
|
|
document.body.addEventListener('htmx:afterSwap', function(event) {
|
|
if (event.detail.target.id === 'menu-table') {
|
|
const response = JSON.parse(event.detail.xhr.response);
|
|
if (response.html) {
|
|
event.detail.target.innerHTML = response.html;
|
|
// 테이블 로드 후 SortableJS 초기화
|
|
initMenuSortable();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 드래그 상태 관리
|
|
let dragStartX = 0;
|
|
let dragIndicator = null;
|
|
let currentDragItem = null;
|
|
let lastHighlightedRow = null;
|
|
const INDENT_THRESHOLD = 40; // px - 인덴트 임계값
|
|
|
|
// 드래그 인디케이터 생성
|
|
function createDragIndicator() {
|
|
const indicator = document.createElement('div');
|
|
indicator.className = 'drag-indicator reorder';
|
|
indicator.innerHTML = '↕️ 순서 변경';
|
|
indicator.style.display = 'none';
|
|
document.body.appendChild(indicator);
|
|
return indicator;
|
|
}
|
|
|
|
// 드래그 인디케이터 업데이트
|
|
function updateDragIndicator(deltaX, mouseX, mouseY, canIndent, canOutdent, targetName) {
|
|
if (!dragIndicator) return;
|
|
|
|
dragIndicator.style.display = 'block';
|
|
dragIndicator.style.left = (mouseX + 15) + 'px';
|
|
dragIndicator.style.top = (mouseY - 15) + 'px';
|
|
|
|
// 클래스 및 텍스트 업데이트
|
|
dragIndicator.classList.remove('indent', 'outdent', 'reorder');
|
|
|
|
if (deltaX > INDENT_THRESHOLD && canIndent) {
|
|
dragIndicator.classList.add('indent');
|
|
dragIndicator.innerHTML = `→ <b>${targetName}</b>의 하위로`;
|
|
} else if (deltaX < -INDENT_THRESHOLD && canOutdent) {
|
|
dragIndicator.classList.add('outdent');
|
|
dragIndicator.innerHTML = '← 상위 레벨로';
|
|
} else {
|
|
dragIndicator.classList.add('reorder');
|
|
dragIndicator.innerHTML = '↕️ 순서 변경';
|
|
}
|
|
}
|
|
|
|
// 행 하이라이트 업데이트
|
|
function updateRowHighlight(prevRow, draggedRow, deltaX, canIndent, canOutdent) {
|
|
// 이전 하이라이트 제거
|
|
if (lastHighlightedRow) {
|
|
lastHighlightedRow.classList.remove('drag-target-indent', 'drag-target-outdent');
|
|
}
|
|
|
|
// 새 하이라이트 적용
|
|
if (deltaX > INDENT_THRESHOLD && canIndent && prevRow) {
|
|
// 인덴트: prevRow(새 부모가 될 행) 하이라이트
|
|
prevRow.classList.add('drag-target-indent');
|
|
lastHighlightedRow = prevRow;
|
|
} else if (deltaX < -INDENT_THRESHOLD && canOutdent && draggedRow) {
|
|
// 아웃덴트: 드래그 중인 행 자체 하이라이트
|
|
draggedRow.classList.add('drag-target-outdent');
|
|
lastHighlightedRow = draggedRow;
|
|
} else {
|
|
lastHighlightedRow = null;
|
|
}
|
|
}
|
|
|
|
// 드래그 인디케이터 제거
|
|
function removeDragIndicator() {
|
|
if (dragIndicator) {
|
|
dragIndicator.remove();
|
|
dragIndicator = null;
|
|
}
|
|
if (lastHighlightedRow) {
|
|
lastHighlightedRow.classList.remove('drag-target-indent', 'drag-target-outdent');
|
|
lastHighlightedRow = null;
|
|
}
|
|
}
|
|
|
|
// SortableJS 초기화 함수
|
|
function initMenuSortable() {
|
|
const tbody = document.getElementById('menu-sortable');
|
|
if (!tbody) return;
|
|
|
|
// 기존 인스턴스 제거
|
|
if (tbody.sortableInstance) {
|
|
tbody.sortableInstance.destroy();
|
|
}
|
|
|
|
// 드래그 중 마우스 이동 핸들러
|
|
function onDragMove(e) {
|
|
if (!currentDragItem) return;
|
|
|
|
const mouseX = e.clientX || e.touches?.[0]?.clientX || 0;
|
|
const mouseY = e.clientY || e.touches?.[0]?.clientY || 0;
|
|
const deltaX = mouseX - dragStartX;
|
|
|
|
const rows = Array.from(tbody.querySelectorAll('tr.menu-row'));
|
|
const draggedIndex = rows.indexOf(currentDragItem);
|
|
|
|
// 위 행 찾기 (드래그 중인 항목 제외)
|
|
let prevRow = null;
|
|
for (let i = draggedIndex - 1; i >= 0; i--) {
|
|
if (rows[i] !== currentDragItem && !rows[i].classList.contains('sortable-ghost')) {
|
|
prevRow = rows[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 인덴트/아웃덴트 가능 여부 체크
|
|
const oldParentIdRaw = currentDragItem.dataset.parentId;
|
|
const oldPid = oldParentIdRaw === '' ? null : (oldParentIdRaw ? parseInt(oldParentIdRaw) : null);
|
|
const canIndent = prevRow !== null;
|
|
const canOutdent = oldPid !== null;
|
|
|
|
// 타겟 이름 가져오기
|
|
let targetName = '';
|
|
if (prevRow && canIndent) {
|
|
const nameCell = prevRow.querySelector('td:nth-child(3) span');
|
|
targetName = nameCell?.textContent?.trim() || '위 항목';
|
|
}
|
|
|
|
updateDragIndicator(deltaX, mouseX, mouseY, canIndent, canOutdent, targetName);
|
|
updateRowHighlight(prevRow, currentDragItem, deltaX, canIndent, canOutdent);
|
|
}
|
|
|
|
// SortableJS 초기화 - 노션 스타일 인덴트
|
|
tbody.sortableInstance = new Sortable(tbody, {
|
|
handle: '.drag-handle',
|
|
animation: 150,
|
|
ghostClass: 'bg-blue-50',
|
|
chosenClass: 'bg-blue-100',
|
|
dragClass: 'shadow-lg',
|
|
|
|
// 드래그 시작 시
|
|
onStart: function(evt) {
|
|
dragStartX = evt.originalEvent?.clientX || evt.originalEvent?.touches?.[0]?.clientX || 0;
|
|
currentDragItem = evt.item;
|
|
dragIndicator = createDragIndicator();
|
|
|
|
// 마우스 이동 이벤트 리스너 추가
|
|
document.addEventListener('mousemove', onDragMove);
|
|
document.addEventListener('touchmove', onDragMove);
|
|
|
|
console.log('=== Drag Start ===');
|
|
console.log('dragStartX:', dragStartX);
|
|
},
|
|
|
|
// 드래그 종료 시 처리
|
|
onEnd: function(evt) {
|
|
// 이벤트 리스너 및 인디케이터 정리
|
|
document.removeEventListener('mousemove', onDragMove);
|
|
document.removeEventListener('touchmove', onDragMove);
|
|
removeDragIndicator();
|
|
currentDragItem = null;
|
|
|
|
const movedItem = evt.item;
|
|
const menuId = parseInt(movedItem.dataset.menuId);
|
|
const currentDepth = parseInt(movedItem.dataset.depth) || 0;
|
|
const oldParentIdRaw = movedItem.dataset.parentId;
|
|
const oldPid = oldParentIdRaw === '' ? null : (oldParentIdRaw ? parseInt(oldParentIdRaw) : null);
|
|
|
|
const rows = Array.from(tbody.querySelectorAll('tr.menu-row'));
|
|
const newIndex = rows.indexOf(movedItem);
|
|
const oldIndex = evt.oldIndex;
|
|
|
|
// X 이동량 계산
|
|
const dragEndX = evt.originalEvent?.clientX || evt.originalEvent?.changedTouches?.[0]?.clientX || dragStartX;
|
|
const deltaX = dragEndX - dragStartX;
|
|
|
|
console.log('=== Menu Drag Debug (Indent Style) ===');
|
|
console.log('menuId:', menuId, 'currentDepth:', currentDepth);
|
|
console.log('oldIndex:', oldIndex, '→ newIndex:', newIndex);
|
|
console.log('dragStartX:', dragStartX, 'dragEndX:', dragEndX, 'deltaX:', deltaX);
|
|
console.log('oldParentId:', oldPid);
|
|
|
|
let newParentId = oldPid;
|
|
let sortOrder = 1;
|
|
let action = 'reorder'; // 'reorder', 'indent', 'outdent'
|
|
|
|
// 오른쪽으로 이동 → 인덴트 (위 항목의 자식으로)
|
|
if (deltaX > INDENT_THRESHOLD && newIndex > 0) {
|
|
const prevRow = rows[newIndex - 1];
|
|
if (prevRow) {
|
|
const prevId = parseInt(prevRow.dataset.menuId);
|
|
// 자기 자신의 자식으로는 이동 불가
|
|
if (prevId !== menuId) {
|
|
newParentId = prevId;
|
|
action = 'indent';
|
|
console.log('→ INDENT: 위 항목의 자식으로 이동, newParentId:', newParentId);
|
|
}
|
|
}
|
|
}
|
|
// 왼쪽으로 이동 → 아웃덴트 (부모의 형제로)
|
|
else if (deltaX < -INDENT_THRESHOLD && oldPid !== null) {
|
|
// 현재 부모를 찾아서 그 부모의 parent_id를 가져옴
|
|
const parentRow = rows.find(r => parseInt(r.dataset.menuId) === oldPid);
|
|
if (parentRow) {
|
|
const grandParentIdRaw = parentRow.dataset.parentId;
|
|
newParentId = grandParentIdRaw === '' ? null : (grandParentIdRaw ? parseInt(grandParentIdRaw) : null);
|
|
action = 'outdent';
|
|
console.log('← OUTDENT: 부모의 형제로 이동, newParentId:', newParentId);
|
|
} else {
|
|
// 부모를 찾을 수 없으면 최상위로
|
|
newParentId = null;
|
|
action = 'outdent';
|
|
console.log('← OUTDENT: 최상위로 이동');
|
|
}
|
|
}
|
|
// 수평 이동 없음 → 같은 레벨에서 순서만 변경
|
|
else {
|
|
// 위 행과 같은 부모로 (기존 동작)
|
|
if (newIndex > 0) {
|
|
const prevRow = rows[newIndex - 1];
|
|
if (prevRow) {
|
|
const prevParentIdRaw = prevRow.dataset.parentId;
|
|
newParentId = prevParentIdRaw === '' ? null : (prevParentIdRaw ? parseInt(prevParentIdRaw) : null);
|
|
}
|
|
} else {
|
|
newParentId = null;
|
|
}
|
|
console.log('↔ REORDER: 위 행과 같은 레벨로, newParentId:', newParentId);
|
|
}
|
|
|
|
const parentChanged = oldPid !== newParentId;
|
|
console.log('oldPid:', oldPid, 'newPid:', newParentId, 'parentChanged:', parentChanged);
|
|
console.log('action:', action);
|
|
|
|
if (parentChanged) {
|
|
// 새 부모 하위에서의 순서 계산
|
|
const existingSiblings = rows.filter(row => {
|
|
if (row === movedItem) return false;
|
|
const rowParentId = row.dataset.parentId || '';
|
|
const rowPid = rowParentId === '' ? null : parseInt(rowParentId);
|
|
return rowPid === newParentId;
|
|
});
|
|
|
|
// DOM에서 movedItem보다 앞에 있는 형제의 수 = 새 순서
|
|
let siblingsBeforeMe = 0;
|
|
for (const sibling of existingSiblings) {
|
|
if (rows.indexOf(sibling) < newIndex) {
|
|
siblingsBeforeMe++;
|
|
}
|
|
}
|
|
sortOrder = siblingsBeforeMe + 1;
|
|
|
|
console.log('existingSiblings count:', existingSiblings.length);
|
|
console.log('siblingsBeforeMe:', siblingsBeforeMe, 'sortOrder:', sortOrder);
|
|
|
|
// 계층 변경 API 호출
|
|
moveMenu(menuId, newParentId, sortOrder);
|
|
} else {
|
|
// 같은 레벨 내 순서 변경
|
|
const siblingRows = rows.filter(row => {
|
|
const rowParentId = row.dataset.parentId || '';
|
|
const rowPid = rowParentId === '' ? null : parseInt(rowParentId);
|
|
return rowPid === oldPid;
|
|
});
|
|
|
|
const items = siblingRows.map((row, index) => ({
|
|
id: parseInt(row.dataset.menuId),
|
|
sort_order: index + 1
|
|
}));
|
|
|
|
console.log('Same level reorder:', items);
|
|
saveMenuOrder(items);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 메뉴 이동 API 호출 (계층 변경)
|
|
function moveMenu(menuId, newParentId, sortOrder) {
|
|
const payload = {
|
|
menu_id: menuId,
|
|
new_parent_id: newParentId,
|
|
sort_order: sortOrder
|
|
};
|
|
console.log('moveMenu API Request:', payload);
|
|
|
|
fetch('/api/admin/menus/move', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(payload)
|
|
})
|
|
.then(response => {
|
|
console.log('moveMenu API Response status:', response.status);
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('moveMenu API Response data:', data);
|
|
if (data.success) {
|
|
console.log('메뉴 이동 성공!');
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
} else {
|
|
console.error('메뉴 이동 실패:', data.message);
|
|
alert('메뉴 이동 실패: ' + (data.message || ''));
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('moveMenu API Error:', error);
|
|
alert('메뉴 이동 중 오류 발생');
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
}
|
|
|
|
// 메뉴 순서 저장 API 호출 (같은 레벨)
|
|
function saveMenuOrder(items) {
|
|
fetch('/api/admin/menus/reorder', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ items: items })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
} else {
|
|
alert('순서 변경 실패: ' + (data.message || ''));
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('순서 변경 중 오류 발생');
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
}
|
|
|
|
// 삭제 확인
|
|
window.confirmDelete = function(id, name) {
|
|
if (confirm(`"${name}" 메뉴를 삭제하시겠습니까?`)) {
|
|
htmx.ajax('DELETE', `/api/admin/menus/${id}`, {
|
|
target: '#menu-table',
|
|
swap: 'none',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
}).then(() => {
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
}
|
|
};
|
|
|
|
// 복원 확인
|
|
window.confirmRestore = function(id, name) {
|
|
if (confirm(`"${name}" 메뉴를 복원하시겠습니까?`)) {
|
|
htmx.ajax('POST', `/api/admin/menus/${id}/restore`, {
|
|
target: '#menu-table',
|
|
swap: 'none',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
}).then(() => {
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
}
|
|
};
|
|
|
|
// 영구삭제 확인
|
|
window.confirmForceDelete = function(id, name) {
|
|
if (confirm(`⚠️ 경고: "${name}" 메뉴를 영구 삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다!`)) {
|
|
htmx.ajax('DELETE', `/api/admin/menus/${id}/force`, {
|
|
target: '#menu-table',
|
|
swap: 'none',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
}).then(() => {
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
}
|
|
};
|
|
|
|
// 활성 토글
|
|
window.toggleActive = function(id) {
|
|
htmx.ajax('POST', `/api/admin/menus/${id}/toggle-active`, {
|
|
target: '#menu-table',
|
|
swap: 'none',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
}).then(() => {
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
};
|
|
|
|
// 숨김 토글
|
|
window.toggleHidden = function(id) {
|
|
htmx.ajax('POST', `/api/admin/menus/${id}/toggle-hidden`, {
|
|
target: '#menu-table',
|
|
swap: 'none',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
}).then(() => {
|
|
htmx.trigger('#menu-table', 'filterSubmit');
|
|
});
|
|
};
|
|
|
|
</script>
|
|
<script src="{{ asset('js/menu-tree.js') }}"></script>
|
|
@endpush
|