[FEATURE] NavBar에 폴딩(Folding) 기능 추가하기

[musma-sujan7]

[FEATURE] NavBar에 폴딩(Folding) 기능 추가하기

[musma-sujan7]

useFoldingNavBarContext Hook

상황에 따라 원하는 변수 및 함수를 사용하세요!

폴딩 기능을 사용할거라면?

1. HeaderRightSection에 isFoldingMode props 추가
2. NavBar에 items 넘겨주기

로고

언폴드(펼쳐진) 상태에서는 "로고"
폴드(접힌) 상태에서는 "심볼" 보여줘야하니까
아래 캡쳐처럼 isNavBarFolded 상태 값을 추적해서 상황에 맞게 아이콘 넘겨주세요.

items 데이터 예시

const MENUS = [
  {
    label: '대시보드',
    icon: () => <FillDashboardIcon width={16} height={16} color="currentColor" />,
    to: RoutePaths.대시보드,
  },
  {
    label: '현장 관리',
    icon: () => <FillBuildingIcon width={16} height={16} color="currentColor" />,
    to: RoutePaths.현장관리,
  },
  {
    label: '사용자 관리',
    icon: () => <FillPersonIcon width={16} height={16} color="currentColor" />,
    children: [
      {
        label: '사용자 현황',
        to: RoutePaths.사용자관리_현황,
      },
      {
        label: '사용자 통계',
        to: RoutePaths.사용자관리_통계,
      },
    ],
  },
  {
    label: '기기 관리',
    icon: () => <DeviceIcon />,
    children: [
      {
        label: '기기 현황',
        to: RoutePaths.기기관리_현황,
      },
      {
        label: '기기 등록',
        to: RoutePaths.기기관리_등록,
      },
    ],
  },
  {
    label: '라이센스 관리',
    icon: () => <FillSettingIcon width={16} height={16} color="currentColor" />,
    children: [
      {
        label: '현장 라이센스',
        to: RoutePaths.라이센스관리_현장,
      },
      {
        label: '기기 라이센스',
        to: RoutePaths.라이센스관리_기기,
      },
    ],
  },
  {
    label: '플랫폼 관리',
    icon: () => <CSCenterIcon />,
    children: [
      {
        label: '시스템 에러',
        to: RoutePaths.플랫폼관리_시스템에러,
      },
      {
        label: '공지사항',
        to: RoutePaths.플랫폼관리_공지사항,
      },
      {
        label: '자주 묻는 질문',
        to: RoutePaths.플랫폼관리_자주묻는질문,
      },
      {
        label: '고객 문의',
        to: RoutePaths.플랫폼관리_고객문의,
      },
    ],
  },
]

컴포넌트 사용 예시

    <AppShell
      header={
        <Header>
          <HeaderLeftSection
            css={{
              backgroundColor: theme.colors.blue.main,
            }}
            logo={<Typography color="white">Musma</Typography>}
          ></HeaderLeftSection>
          <HeaderRightSection isFoldingMode>메뉴지롱 메롱메롱</HeaderRightSection>
        </Header>
      }
      navBar={
          <NavBar
                items={MENUS}
                css={{
                  svg: {
                    marginRight: 16,
                  },
                }}
        >
          {/* NavBar에 items를 넘겼기때문에 아래 children 들은 무시됩니다 */}
          <NavBarLink to="/" label="meme" />
          <NavBarLink to="/" label="meme" />
        </NavBar>
      }
    />

⭐ ⭐ ⭐ libraries-test 에 예시 추가해뒀습니다! 사용법을 모르겠다면 참고해주세요 ⭐ ⭐ ⭐

[musma-sujan7]

2023-11-08.10.39.41.mov