Navigation

화면을 이동하는 내비게이션 묶음이에요. 어드민 사이드바와 모바일 앱의 상단/하단 내비게이션을 제공해요.

Admin Navigation

어드민에서 많은 메뉴를 한눈에 파악·이동하는 사이드바예요. 항목을 클릭해 보세요 — 선택 항목에 좌측 인디케이터 바가 생겨요.

tsx

import { AdminNav, AdminNavSection, AdminNavItem } from '@openiot/ui'

<AdminNav header={<>…로고 + 조직명…</>}>
  <AdminNavSection>
    <AdminNavItem selected onClick={…}>대시보드</AdminNavItem>
    <AdminNavItem href="/users">사용자</AdminNavItem>
  </AdminNavSection>
  <AdminNavSection divider>
    <AdminNavItem>고객지원</AdminNavItem>
  </AdminNavSection>
</AdminNav>

App Top Navigation (AppBar)

모바일 앱 상단바예요. 뒤로가기·제목(정적/드롭다운)·trailing 액션(아이콘/텍스트)을 조합해요.

기록

tsx

import { AppBar, AppBarIconButton } from '@openiot/ui'
import { SearchIcon, MoreVerticalIcon } from '@openiot/icons'

<AppBar
  title="기록"
  onBack={() => router.back()}
  actions={
    <>
      <AppBarIconButton aria-label="검색"><SearchIcon /></AppBarIconButton>
      <AppBarIconButton aria-label="더보기"><MoreVerticalIcon /></AppBarIconButton>
    </>
  }
/>

App Bottom Navigation

모바일 앱 하단 탭 바예요. 선택 시 아이콘이 채움(filled)으로 바뀌고, fab 로 가운데 강조 액션을 만들 수 있어요.

tsx

import { BottomNav, BottomNavItem } from '@openiot/ui'
import { HomeIcon, HomeFilledIcon, PlusIcon } from '@openiot/icons'

<BottomNav>
  <BottomNavItem icon={<HomeIcon />} activeIcon={<HomeFilledIcon />} label="홈" selected />
  <BottomNavItem icon={<PlusIcon />} label="추가" fab />
  …
</BottomNav>

Props

Admin Navigation

Prop	Type	Default	설명
AdminNav.header	ReactNode	—	상단 로고·조직명 영역
AdminNavItem.selected	boolean	false	활성 상태 (좌측 바 + SemiBold)
AdminNavItem.icon	ReactNode	—	라벨 앞 아이콘(20px)
AdminNavItem.href	string	—	있으면 <a>, 없으면 <button>
AdminNavSection.divider	boolean	false	섹션 위 구분선

AppBar

Prop	Type	Default	설명
title	ReactNode	—	제목 (Headline-01)
onBack	() => void	—	있으면 뒤로가기 버튼 표시
dropdown	boolean	false	제목을 드롭다운(▼)으로
actions	ReactNode	—	trailing 액션 (AppBarIconButton 등)

Bottom Navigation

Prop	Type	Default	설명
BottomNavItem.icon	ReactNode	—	기본(outline) 아이콘 28px
BottomNavItem.activeIcon	ReactNode	—	선택 시 filled 아이콘
BottomNavItem.selected	boolean	false	활성 상태
BottomNavItem.fab	boolean	false	가운데 강조 원형 액션