feat: [sidebar] 사이드바 메뉴 즐겨찾기 기능 추가
- MenuFavorite 모델 생성 (menu_favorites 테이블) - SidebarMenuService에 즐겨찾기 CRUD 메서드 추가 - MenuFavoriteController 생성 (toggle/reorder API) - 사이드바 상단에 즐겨찾기 섹션 표시 - 메뉴 아이템에 별 아이콘 추가 (hover 시 표시, 토글) - 최대 10개 제한, 리프 메뉴만 대상
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
@props(['favorites' => collect()])
|
||||
|
||||
@if($favorites->isNotEmpty())
|
||||
<li id="sidebar-favorites-section" class="pb-2 mb-1">
|
||||
<button
|
||||
onclick="toggleMenuGroup('menu-group-favorites')"
|
||||
class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 rounded"
|
||||
style="padding-left: 0.75rem"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
<span class="sidebar-text">즐겨찾기</span>
|
||||
</span>
|
||||
<svg
|
||||
id="menu-group-favorites-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>
|
||||
|
||||
<ul id="menu-group-favorites" class="menu-group-content space-y-0.5 mt-1">
|
||||
@foreach($favorites as $fav)
|
||||
@if($fav->menu)
|
||||
@php
|
||||
$menu = $fav->menu;
|
||||
$sidebarMenuService = app(\App\Services\SidebarMenuService::class);
|
||||
$isActive = $sidebarMenuService->isMenuActive($menu);
|
||||
$url = $menu->url;
|
||||
$routeName = $menu->getRouteName();
|
||||
if ($routeName && !str_contains($routeName, '*') && \Route::has($routeName)) {
|
||||
$url = route($routeName);
|
||||
}
|
||||
$activeClass = $isActive
|
||||
? 'bg-primary text-white hover:bg-primary'
|
||||
: 'text-gray-700 hover:bg-gray-100';
|
||||
@endphp
|
||||
<li>
|
||||
<a href="{{ $url }}"
|
||||
class="group flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm {{ $activeClass }}"
|
||||
style="padding-left: 1.5rem"
|
||||
title="{{ $menu->name }}"
|
||||
>
|
||||
@if($menu->icon)
|
||||
<x-sidebar.menu-icon :icon="$menu->icon" />
|
||||
@endif
|
||||
<span class="sidebar-text flex-1">{{ $menu->name }}</span>
|
||||
<button type="button"
|
||||
onclick="event.preventDefault(); event.stopPropagation(); toggleMenuFavorite({{ $menu->id }}, this)"
|
||||
class="sidebar-text shrink-0 p-0.5 rounded transition-colors text-yellow-400 hover:text-yellow-500"
|
||||
title="즐겨찾기 해제">
|
||||
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
@endif
|
||||
@@ -22,6 +22,9 @@
|
||||
|
||||
$target = $menu->is_external ? '_blank' : '_self';
|
||||
|
||||
// 즐겨찾기 여부
|
||||
$isFavorited = isset($favoriteMenuIds) && in_array($menu->id, $favoriteMenuIds);
|
||||
|
||||
// 메뉴 뱃지 확인 (라우트명 또는 URL 기준)
|
||||
$badgeCount = 0;
|
||||
$badgeColor = '#ef4444';
|
||||
@@ -42,7 +45,7 @@
|
||||
}
|
||||
@endphp
|
||||
|
||||
<li>
|
||||
<li class="group">
|
||||
<a href="{{ $url }}"
|
||||
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm {{ $activeClass }}"
|
||||
style="padding-left: {{ $paddingLeft }}"
|
||||
@@ -62,5 +65,15 @@ class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm {{ $activeClass }}"
|
||||
@if($menu->is_external)
|
||||
<x-sidebar.menu-icon icon="external-link" class="w-3 h-3 opacity-50" />
|
||||
@endif
|
||||
{{-- 즐겨찾기 별 아이콘 --}}
|
||||
<button type="button"
|
||||
onclick="event.preventDefault(); event.stopPropagation(); toggleMenuFavorite({{ $menu->id }}, this)"
|
||||
class="sidebar-text fav-star shrink-0 p-0.5 rounded transition-all {{ $isFavorited ? 'text-yellow-400 fav-active' : 'text-gray-300 opacity-0 group-hover:opacity-100' }}"
|
||||
title="{{ $isFavorited ? '즐겨찾기 해제' : '즐겨찾기 추가' }}"
|
||||
data-menu-id="{{ $menu->id }}">
|
||||
<svg class="w-3.5 h-3.5" fill="{{ $isFavorited ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user