5bf50c002f
- 그룹 헤더: text-sm font-semibold (기존 text-xs font-bold uppercase) - 하위 메뉴: font-normal (기존 font-medium) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
89 lines
4.8 KiB
PHP
89 lines
4.8 KiB
PHP
@props(['menus'])
|
|
|
|
@php
|
|
// Labs 메뉴가 없으면 렌더링하지 않음
|
|
if ($menus->isEmpty()) {
|
|
return;
|
|
}
|
|
|
|
// R&D Labs 그룹 메뉴 찾기
|
|
$labsGroup = $menus->first();
|
|
if (!$labsGroup || !isset($labsGroup->menuChildren) || $labsGroup->menuChildren->isEmpty()) {
|
|
return;
|
|
}
|
|
|
|
// 모든 자식 메뉴 사용 (탭 구분 없이)
|
|
$labsChildMenus = $labsGroup->menuChildren;
|
|
@endphp
|
|
|
|
{{-- R&D Labs 그룹 (탭 스타일 + 플라이아웃) --}}
|
|
<li class="lab-menu-container pt-4 pb-1 border-t border-gray-200 mt-2" id="lab-menu-container">
|
|
<!-- 확장 상태: 헤더 + 탭 + 메뉴 -->
|
|
<div class="lab-expanded-view">
|
|
<button onclick="toggleGroup('lab-group'); scrollSidebarToBottom();" class="sidebar-group-header lab-group-header w-full flex items-center justify-between px-3 py-2 text-sm font-semibold text-gray-700 rounded">
|
|
<span class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
<span class="sidebar-text">R&D Labs</span>
|
|
</span>
|
|
<svg id="lab-group-icon" class="w-3 h-3 transition-transform sidebar-text" 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>
|
|
|
|
<!-- 메뉴 콘텐츠 -->
|
|
<div id="lab-group" class="mt-2">
|
|
<ul class="space-y-1">
|
|
@foreach($labsChildMenus as $menu)
|
|
<li>
|
|
<a href="{{ $menu->getRouteName() ? route($menu->getRouteName()) : $menu->url }}"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors"
|
|
title="{{ $menu->name }}">
|
|
<x-sidebar.menu-icon :icon="$menu->icon" class="w-4 h-4 flex-shrink-0" />
|
|
<span class="sidebar-text">{{ $menu->name }}</span>
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 축소 상태: 아이콘 + 플라이아웃 -->
|
|
<div class="lab-collapsed-view hidden">
|
|
<div class="lab-flyout-trigger relative">
|
|
<button type="button" class="flex items-center justify-center w-full p-2 rounded-lg hover:bg-amber-50 transition-colors" title="R&D Labs">
|
|
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 플라이아웃 팝업 -->
|
|
<div class="lab-flyout hidden fixed w-56 bg-white rounded-lg shadow-xl border border-gray-200 z-[9999]">
|
|
<!-- 화살표 -->
|
|
<div class="absolute -left-2 top-3 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-white"></div>
|
|
<div class="absolute -left-[9px] top-3 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-200"></div>
|
|
|
|
<!-- 헤더 -->
|
|
<div class="px-3 py-2 bg-gradient-to-r from-amber-50 to-amber-100 rounded-t-lg border-b border-amber-200">
|
|
<span class="text-xs font-bold text-amber-800 uppercase tracking-wider">R&D Labs</span>
|
|
</div>
|
|
|
|
<!-- 메뉴 패널 -->
|
|
<div class="p-2 max-h-64 overflow-y-auto">
|
|
<ul class="space-y-0.5">
|
|
@foreach($labsChildMenus as $menu)
|
|
<li>
|
|
<a href="{{ $menu->getRouteName() ? route($menu->getRouteName()) : $menu->url }}"
|
|
class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">
|
|
{{ $menu->name }}
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|