Legacy
CoreSideNavigation
사이드 네비게이션 컴포넌트
Usage
기본 사용법
import { CoreSideNavigation } from '@featuring-corp/components';
<CoreSideNavigation
title="타이틀"
menuList={[
{ text: '메뉴1', pathname: '/menu/1' },
{ text: '메뉴2', pathname: '/menu/2' },
]}
onClick={(menu) => {
console.log(menu);
}}
/>활성 메뉴 표시
import { CoreSideNavigation } from '@featuring-corp/components';
<CoreSideNavigation
title="타이틀"
menuList={[
{ text: '메뉴1', pathname: '/menu/1', isActive: true },
{ text: '메뉴2', pathname: '/menu/2' },
{ text: '메뉴3', pathname: '/menu/3' },
]}
onClick={(menu) => {
console.log(menu);
}}
/>비활성화된 메뉴
import { CoreSideNavigation } from '@featuring-corp/components';
<CoreSideNavigation
title="타이틀"
menuList={[
{ text: '메뉴1', pathname: '/menu/1', isActive: true },
{ text: '메뉴2', pathname: '/menu/2', isDisabled: true },
{ text: '메뉴3', pathname: '/menu/3' },
]}
onClick={(menu) => {
console.log(menu);
}}
/>너비 설정
import { CoreSideNavigation } from '@featuring-corp/components';
<CoreSideNavigation
title="타이틀"
menuList={[
{ text: '메뉴1', pathname: '/menu/1' },
{ text: '메뉴2', pathname: '/menu/2' },
]}
onClick={(menu) => {
console.log(menu);
}}
width="240px"
/>
// 숫자로도 설정 가능
<CoreSideNavigation
title="타이틀"
menuList={[
{ text: '메뉴1', pathname: '/menu/1' },
{ text: '메뉴2', pathname: '/menu/2' },
]}
onClick={(menu) => {
console.log(menu);
}}
width={300}
/>Props
Prop
Type
Menu
Prop
Type
스타일
기본 스타일 속성
SideNavigation:
flex:1padding-y:spacing-800(32px)background-color:whitewidth:100%(기본값)
Title:
typography:heading[3]padding-x:spacing-400(16px)
Menu:
display:gridgap:spacing-150(6px)margin-top:spacing-600(24px)
MenuItem:
padding-x:spacing-150(6px)
MenuButton:
typography:heading[2]padding-x:spacing-250(10px)padding-y:spacing-100(4px)border-radius:radius-100width:100%overflow:hidden
States (상태별 토큰)
MenuButton:
- Default: 기본 스타일
- Hover:
background-color: background[3] - Active:
background-color: background[3],color: primary[50] - Focus-visible:
outline: 2px solid focus색상 - Disabled:
color: text[4] - isActive: on:
background-color: background[3],color: primary[60]