메뉴 관리

메뉴는 하위 파일을 수정하여 변경할 수 있습니다.

frontend/src/navigation/vertical/index.ts

// ** Type import
import { VerticalNavItemsType } from 'src/@core/layouts/types'

const navigation = (): VerticalNavItemsType => {
  return [
    {
      sectionTitle: '대시보드'
    },
    {
      title: '대시보드',
      icon: 'bx:home',
      path: '/home'
    },
    {
      sectionTitle: '관리자'
    },
    {
      title: '관리자 관리',
      icon: 'material-symbols:person',
      path: '/admin'
    },
    {
      title: '로그인 이력',
      icon: 'mdi:account-clock',
      path: '/admin/history'
    },
    {
      sectionTitle: '이미지'
    },
    {
      title: '이미지 등록',
      icon: 'material-symbols:upload-file-outline',
      path: '/image/register'
    },
    {
      title: '이미지 관리',
      icon: 'material-symbols:image-outline',
      path: '/image/list'
    },
    {
      sectionTitle: '설정'
    },
    {
      title: '설정',
      icon: 'mdi:gear',
      path: '/settings'
    }
  ]
}

export default navigation

구성요소

구성요소는 섹션제목과 메뉴로 구성됩니다.

섹션제목

{
  sectionTitle: '섹션 제목'
}

메뉴

{
  title: '메뉴명',
  icon: '<ICON>',
  path: '/url'
}

섹션제목과 메뉴의 object를 작성하여 메뉴를 추가/수정/삭제 할 수 있습니다.

아이콘

Iconify - home of open source iconsslava_trushkin

아이콘의 경우 위 링크를 클릭하여 필요한 아이콘을 검색한 후 사용할 수 있습니다.

예시

1. 찾고자 하는 아이콘의 키워드 검색

2. 위 예시의 경우 material-symbols:person 을 복사

3. 메뉴의 icon에 값에 붙여넣기

{
  title: '사람 관리',
  icon: 'material-symbols:person',
  path: '/person'
}