sam-manage/SIDEBAR_MENU_GUIDE.md

# Sidebar Menu Guide

## 개요

MNG 관리자 패널의 좌측 사이드바 메뉴 구조 및 스타일 가이드입니다.

## 메뉴 구조

### 1. 대시보드 (단독 메뉴)
- 경로: `/dashboard`
- 아이콘: Home
- 그룹 없이 최상단 단독 배치

### 2. 시스템 관리 그룹
- **테넌트 관리** - `/tenants`
- **사용자 관리** - `/users`
- **부서 관리** - `/departments`
- **메뉴 관리** - `/menus`

### 3. 권한 관리 그룹
- **역할 관리** - `/roles`
- **권한 관리** - `/permissions` ✅ 완료
- **역할 권한 관리** - `#` (미구현)
- **부서 권한 관리** - `#` (미구현)
- **개인 권한 관리** - `#` (미구현)
- **권한 분석** - `#` (미구현)

### 4. 생산 관리 그룹
- **제품 관리** - `#` (미구현)
- **자재 관리** - `#` (미구현)
- **BOM 관리** - `#` (미구현)
- **카테고리 관리** - `#` (미구현)

### 5. 시스템 그룹
- **시스템 설정** - `#` (미구현)
- **감사 로그** - `#` (미구현)
- **삭제된 데이터 백업** - `#` (미구현)

## 스타일 가이드

### 그룹 헤더
```html
<button class="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">
    <span>그룹명</span>
    <svg id="group-icon" class="w-3 h-3 transition-transform">
        <!-- Chevron down icon -->
    </svg>
</button>
```

**스타일 특징:**
- 폰트: `text-xs font-bold text-gray-600`
- 대문자: `uppercase tracking-wider`
- Hover: `hover:bg-gray-50`
- 상단 구분선: `border-t border-gray-200 mt-2 pt-4 pb-1`

### 그룹 내 메뉴 (인덴트)
```html
<a href="{{ route('...') }}"
   class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100"
   style="padding-left: 2rem;">
    <svg class="w-4 h-4">...</svg>
    <span class="font-medium">메뉴명</span>
</a>
```

**스타일 특징:**
- **인덴트**: `style="padding-left: 2rem;"` (inline style로 확실히 적용)
- 아이콘: `w-4 h-4`
- 텍스트: `text-sm font-medium`
- Hover: `hover:bg-gray-100`
- 활성 상태: `bg-primary text-white hover:bg-primary`

### 일반 메뉴 (대시보드)
```html
<a href="{{ route('dashboard') }}"
   class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100">
    <svg class="w-4 h-4">...</svg>
    <span class="font-medium">대시보드</span>
</a>
```

**스타일 특징:**
- 인덴트 없음: `px-3`
- 아이콘: `w-4 h-4`
- 텍스트: `text-sm font-medium`

## 그룹 접기/펼치기 기능

### JavaScript 구현
```javascript
function toggleGroup(groupId) {
    const group = document.getElementById(groupId);
    const icon = document.getElementById(groupId + '-icon');

    if (group.style.display === 'none') {
        group.style.display = 'block';
        icon.style.transform = 'rotate(0deg)';
        localStorage.setItem('sidebar-' + groupId, 'open');
    } else {
        group.style.display = 'none';
        icon.style.transform = 'rotate(-90deg)';
        localStorage.setItem('sidebar-' + groupId, 'closed');
    }
}
```

### 상태 저장
- localStorage를 사용하여 그룹 열림/닫힘 상태 저장
- 페이지 새로고침 후에도 상태 유지
- Key format: `sidebar-{group-id}`

### 아이콘 애니메이션
- 열림: `rotate(0deg)` (▼)
- 닫힘: `rotate(-90deg)` (▶)
- Transition: `transition-transform`

## 그룹 ID 목록

```javascript
['system-group', 'permission-group', 'production-group', 'system-settings-group']
```

## 활성 상태 표시

### Blade 조건문
```php
{{ request()->routeIs('permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}
```

**패턴:**
- 현재 라우트가 해당 메뉴의 라우트와 일치하면 `bg-primary text-white` 적용
- Wildcard 사용: `permissions.*` (모든 하위 라우트 포함)

## 크기 및 간격

### 아이콘 크기
- 메뉴 아이콘: `w-4 h-4` (16px)
- 그룹 화살표: `w-3 h-3` (12px)

### 간격
- 메뉴 간격: `space-y-1` (4px)
- 아이콘-텍스트 간격: `gap-2` (8px)
- 그룹 상단 간격: `mt-2 pt-4` (8px + 16px)
- 그룹 하단 간격: `pb-1` (4px)

### 패딩
- 일반 메뉴: `px-3 py-2` (12px, 8px)
- 그룹 내 메뉴: `padding-left: 2rem;` (32px) + `pr-3 py-2`
- 그룹 헤더: `px-3 py-2`

## 색상 팔레트

### 텍스트
- 일반 메뉴: `text-gray-700`
- 그룹 헤더: `text-gray-600`
- 활성 메뉴: `text-white`

### 배경
- 일반 Hover: `hover:bg-gray-100`
- 그룹 헤더 Hover: `hover:bg-gray-50`
- 활성 메뉴: `bg-primary` (프로젝트 primary color)

### 구분선
- 그룹 구분: `border-gray-200`

## 파일 위치

```
mng/resources/views/partials/sidebar.blade.php
```

## 새 메뉴 추가 방법

### 1. 일반 메뉴 (그룹 없이)
```html
<li>
    <a href="{{ route('new-menu.index') }}"
       class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('new-menu.*') ? 'bg-primary text-white hover:bg-primary' : '' }}">
        <svg class="w-4 h-4"><!-- 아이콘 --></svg>
        <span class="font-medium">새 메뉴</span>
    </a>
</li>
```

### 2. 그룹 내 메뉴
```html
<li>
    <a href="{{ route('new-menu.index') }}"
       class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('new-menu.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
       style="padding-left: 2rem;">
        <svg class="w-4 h-4"><!-- 아이콘 --></svg>
        <span class="font-medium">새 메뉴</span>
    </a>
</li>
```

### 3. 새 그룹 추가
```html
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
    <button onclick="toggleGroup('new-group')" class="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">
        <span>새 그룹</span>
        <svg id="new-group-icon" class="w-3 h-3 transition-transform">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>
    <ul id="new-group" class="space-y-1 mt-1">
        <!-- 그룹 내 메뉴들 -->
    </ul>
</li>
```

**주의:** JavaScript에서 그룹 ID 배열에 'new-group' 추가 필요

## 주의사항

1. **인덴트는 inline style 사용**: Tailwind의 `pl-6` 대신 `style="padding-left: 2rem;"` 사용
2. **그룹 구분선 필수**: 각 그룹에 `border-t border-gray-200` 추가
3. **아이콘 크기 일관성**: 메뉴는 `w-4 h-4`, 그룹 화살표는 `w-3 h-3`
4. **활성 상태 체크**: `request()->routeIs()` 사용
5. **localStorage 동기화**: 새 그룹 추가 시 JavaScript 배열 업데이트

## 최근 변경 이력

### 2025-01-25
- 권한 관리 기능 완료 (`/permissions`)
- 미래 메뉴 5개 추가 (역할 권한, 부서 권한, 개인 권한, 권한 분석, 삭제된 데이터 백업)
- 그룹 접기/펼치기 기능 추가
- 그룹 내 메뉴 인덴트 적용 (2rem)
- 그룹 구분선 및 스타일 강화