@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/ShortcutBadge.css

@@ -0,0 +1,68 @@
+/* 단축키 표시 배지 — 어두운 키캡(흰 테두리) 안에 키 라벨. 표시 전용이라
+   pointer-events 를 꺼 아래 요소 클릭을 막지 않는다. */
+.shortcut-badge {
+  pointer-events: none;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 코너 배치 — 중심이 부모 코너에서 살짝 안쪽(25%)으로 들어오게 얹힌다. */
+.shortcut-badge--top-left {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-25%, -25%);
+}
+.shortcut-badge--top-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(25%, -25%);
+}
+.shortcut-badge--bottom-left {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  transform: translate(-25%, 25%);
+}
+.shortcut-badge--bottom-right {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  transform: translate(25%, 25%);
+}
+/* static — 흐름 안에 배치(별도 규칙 없음, position: static 기본). */
+
+.shortcut-badge__group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.shortcut-badge__plus {
+  color: var(--color-lightGray);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.shortcut-badge__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  min-width: 24px;
+  min-height: 24px;
+  box-sizing: border-box;
+  padding: 0 5px;
+  border: 2px solid var(--color-pureWhite);
+  border-radius: var(--radius-sm);
+  background: var(--color-lightBlack);
+  color: var(--color-white);
+  /* Pretendard 등 앱 폰트를 쓴다 — <kbd> 기본 monospace 를 덮는다. */
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+}

package/dist/packages/core/src/components/ShortcutBadge.d.ts

@@ -0,0 +1,31 @@
+import './ShortcutBadge.css';
+/** 부모 코너 배치. static 은 흐름 배치. @public */
+export type ShortcutBadgeAnchor = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'static';
+/** @public */
+export interface ShortcutBadgeProps {
+    /** 표시할 키. 조합이면 배열 — 각 키를 키캡으로 그리고 사이에 + 를 둔다. */
+    keys: string | string[];
+    /**
+     * 부모(position:relative) 기준 붙는 위치. 기본 우상단. 코너에 걸칠 때는 중심이
+     * 코너에서 살짝 안쪽으로 들어오게 얹힌다. static 이면 흐름 안에 배치.
+     */
+    anchor?: ShortcutBadgeAnchor;
+    className?: string;
+}
+/**
+ * 단축키 표시 배지 — 키(또는 조합)를 키캡 모양으로 "보여주기만" 한다. 실제
+ * 동작(keydown 처리)은 맡지 않는다(쓰는 쪽이 건다). 시맨틱 <kbd> 로 감싸
+ * 스크린리더에도 키보드 입력으로 읽힌다.
+ *
+ * 부모(position:relative) 코너에 얹으려면 anchor 를(기본 top-right) 쓰고, 흐름
+ * 안에 두려면 anchor="static".
+ *
+ * @example
+ * <div style={{ position: 'relative' }}>
+ *   <input />
+ *   <ShortcutBadge keys="Enter" />
+ * </div>
+ * <ShortcutBadge keys={['Ctrl', 'S']} anchor="static" />
+ * @public
+ */
+export default function ShortcutBadge({ keys, anchor, className, }: ShortcutBadgeProps): import("react").JSX.Element;

package/dist/packages/core/src/components/ShortcutBadge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './ShortcutBadge.css';
+/**
+ * 단축키 표시 배지 — 키(또는 조합)를 키캡 모양으로 "보여주기만" 한다. 실제
+ * 동작(keydown 처리)은 맡지 않는다(쓰는 쪽이 건다). 시맨틱 <kbd> 로 감싸
+ * 스크린리더에도 키보드 입력으로 읽힌다.
+ *
+ * 부모(position:relative) 코너에 얹으려면 anchor 를(기본 top-right) 쓰고, 흐름
+ * 안에 두려면 anchor="static".
+ *
+ * @example
+ * <div style={{ position: 'relative' }}>
+ *   <input />
+ *   <ShortcutBadge keys="Enter" />
+ * </div>
+ * <ShortcutBadge keys={['Ctrl', 'S']} anchor="static" />
+ * @public
+ */
+export default function ShortcutBadge({ keys, anchor = 'top-right', className = '', }) {
+    const list = Array.isArray(keys) ? keys : [keys];
+    return (_jsx("span", { className: cx('shortcut-badge', `shortcut-badge--${anchor}`, className), children: list.map((key, index) => (_jsxs("span", { className: "shortcut-badge__group", children: [index > 0 && _jsx("span", { className: "shortcut-badge__plus", children: "+" }), _jsx("kbd", { className: "shortcut-badge__key", children: key })] }, `${key}-${index}`))) }));
+}

package/dist/packages/core/src/components/SideNav.css

@@ -0,0 +1,281 @@
+/* ── side-nav__menu: header의 flex 자식으로 남은 높이를 모두 차지 ───────────────
+   전체가 단일 스크롤 컨테이너 — list + footer 모두 함께 슬라이드.
+   고정 height 제거 → 부모(header: fixed top:0 bottom:0)에서 높이 위임받음. */
+.side-nav__menu {
+  display: flex;
+  flex-direction: column;
+  flex: 1;          /* header의 남은 세로 공간 전부 차지 */
+  min-height: 0;    /* flex child가 content 크기 이하로 줄어들 수 있도록 */
+  /* 우측 여백은 padding이 아니라 '스크롤바 자리(gutter) + 투명 테두리'가 만든다.
+     그래서 padding-right를 0으로 두고 좌측만 그 총량과 같게 준다 — 그러지 않으면
+     우측만 두 배로 벌어져 보인다. */
+  padding: 0 0 0 12px;
+  /* 스크롤바는 padding 바깥·border 안쪽에 그려진다 — 투명 테두리를 두면 그만큼
+     안쪽으로 들어와, 콘텐츠 영역과 맞닿은 경계선에 딱 붙지 않는다. */
+  border-right: 1px solid transparent;
+  background-clip: padding-box;
+  overflow-y: auto;           /* 항상 단일 스크롤 컨테이너 */
+  overflow-x: hidden;
+  /* 스크롤바 자리를 늘 비워둔다 — 메뉴 수나 창 높이에 따라 스크롤이 생겼다 없어지면
+     그때마다 메뉴가 좌우로 밀려 흔들린다. */
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  /* 트랙은 투명 — 사이드바 배경이 모드마다 다르다(말귀는 단색, 매니저는 그라디언트).
+     특정 색으로 고정하면 매니저 모드에서 흰 세로줄로 튄다. thumb만 색을 준다. */
+  scrollbar-color: var(--color-darkWhite) transparent;
+}
+
+.side-nav__menu::-webkit-scrollbar { width: 4px; }
+.side-nav__menu::-webkit-scrollbar-track { background: transparent; }
+.side-nav__menu::-webkit-scrollbar-thumb {
+  background: var(--color-darkWhite);
+  border-radius: var(--radius-xs);
+}
+.side-nav__menu::-webkit-scrollbar-thumb:hover {
+  background: var(--color-lightGray, var(--color-lightGray));
+}
+
+/* ── list: 자체 스크롤 없음 → side-nav__menu 단일 스크롤에 위임 ──────────────── */
+.side-nav__menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1 0 auto;   /* 공간이 남으면 늘어나 footer를 아래로 밀어냄,
+                       내용이 많으면 자연 높이 유지 → 부모 스크롤 발생 */
+  overflow: visible;
+  /* 예전엔 padding: 4px 16px + margin: 0 -16px 였는데 좌우가 정확히 상쇄돼
+     항목 위치에는 아무 영향이 없고, 폭만 228px로 부풀어 부모(220px)를 넘었다
+     (overflow-x: hidden에 잘려 보이지 않았을 뿐). 세로 여백만 남긴다. */
+  padding: 4px 0;
+}
+
+/* ── footer: 항상 list 아래에 위치, 줄어들지 않음 ─────────────────────────── */
+.side-nav__notification-wrap {
+  position: relative;
+  display: inline-flex;
+  align-self: flex-start;
+}
+
+.side-nav__footer {
+  flex-shrink: 0;
+  /* 위아래 여백을 좌우와 같은 12px로 — 좌측 padding, 우측 'gutter + 테두리'와 맞춘다. */
+  margin-top: var(--spacing-s);
+  padding: 0 0 var(--spacing-s) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  align-items: left;
+}
+
+.side-nav__separator {
+  height: 1px;
+  background: var(--color-whiteLine);
+  margin: 0 var(--spacing-s) var(--spacing-xs);
+}
+
+.side-nav__separator--short {
+  width: var(--spacing-xl);
+  /* 세로 4px은 spacing 토큰에 없는 값이다(격자는 8부터). 8로 올리면 구분선이
+     항목 사이에서 과하게 떠 보여 그대로 둔다 — radius 토큰을 대신 쓰지 않는다. */
+  margin: 4px var(--spacing-m);
+}
+
+/* Ensure side nav is hidden on mobile unless explicitly toggled via JS.
+   !important 불필요 — 동일 선택자·동일 특이도이며 이 규칙이 소스 순서상 기본 규칙보다
+   뒤에 있어 자연스럽게 우선 적용됨(경쟁하는 다른 display 규칙 없음). */
+@media (max-width: 767px) {
+  .side-nav__menu { display: none; }
+  .side-nav__footer { display: none; }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   SideNavButton — 사이드 내비 아이템 버튼
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.side-nav__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  width: 100%;
+  height: 52px;
+  flex-shrink: 0; /* 스크롤 컨테이너 안에서 높이 유지 */
+  padding: 0 var(--spacing-m);
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--radius-s);
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-darkGray);
+  text-align: left;
+  justify-content: flex-start;
+  font-family: var(--font-family);
+}
+@keyframes ihabCoreSnSweep {
+  0%   { background-position: 100% 0; }
+  100% { background-position:   0% 0; }
+}
+
+@keyframes ihabCoreSnIconBounce {
+  0%   { transform: scale(1);    }
+  40%  { transform: scale(1.12); }
+  100% { transform: scale(1);    }
+}
+
+.side-nav__item.active {
+  background: linear-gradient(
+    90deg,
+    var(--color-main) 50%,
+    var(--color-sub)  100%
+  );
+  background-size: 200% 100%;
+  background-position: 0% 0;
+  color: #ffffff;
+  animation: ihabCoreSnSweep 1000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  box-shadow: var(--shadow-button);
+}
+
+.side-nav__item.active .side-nav__icon {
+  color: #ffffff;
+  animation: ihabCoreSnIconBounce 480ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.side-nav__icon {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-lightGray);
+}
+
+/* active 상태에서 뱃지 색 반전 — 파란 배경 위에서 구분되도록 */
+.side-nav__item.active .circle-badge {
+  background: var(--color-pureWhite);
+  color: var(--color-main);
+}
+
+/* nav 인라인 배지(숙제 수 등)도 알림 배지(top-right)와 동일하게 흰 테두리를 준다.
+   두께는 size 24 기준 1px(Badge.css의 크기별 border-width와 일치). box-sizing: border-box라
+   24px 안쪽으로 들어가므로 색 원 크기가 알림과 정확히 일치한다. */
+.side-nav__item .circle-badge--inline {
+  border: 1px solid var(--color-pureWhite);
+}
+
+/* 아이콘 위 좌상단 원형 배지(미완료 숙제 수 등) */
+.side-nav__icon-wrap {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 24px;
+}
+
+/* Ensure the icon occupies a fixed slot so label width changes don't shift it */
+.side-nav__icon {
+  flex: 0 0 24px;
+}
+
+.side-nav__icon img {
+  width: 20px;
+  height: 20px;
+  display: block;
+  object-fit: contain;
+}
+
+/* Masked SVG icon: uses the SVG file as a mask so the icon color follows `color`.
+   Requires the SVG to be a plain graphic (no embedded raster content).
+   Usage: <span class="side-nav__icon-image" style="--icon-url: url(/path/icon.svg)"></span> */
+.side-nav__icon-image {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: currentColor;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  -webkit-mask-image: var(--icon-url);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: var(--icon-url);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+/* Make raster/SVG images appear white when the item is active.
+   Uses a filter that turns dark icon pixels to white. If your icons
+   are full-color photos this may not be perfect; prefer inline SVG
+   with `fill="currentColor"` for robust color control. */
+.side-nav__item .side-nav__icon img {
+  transition: filter 160ms ease, opacity 160ms ease;
+  filter: brightness(0) saturate(0) opacity(0.45);
+}
+
+.side-nav__item.active .side-nav__icon img {
+  filter: brightness(0) invert(1);
+}
+
+.side-nav__label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hover / focus interaction */
+.side-nav__item {
+  transition: background-color 160ms ease, color 160ms ease, transform 80ms ease;
+}
+
+.side-nav__item:hover:not(.active),
+.side-nav__item:focus:not(.active),
+.side-nav__item:focus-visible:not(.active) {
+  background: var(--color-darkWhite); /* subtle tint of --color-main */
+}
+
+/* --color-main-a10 은 **배경 틴트용** 10% 투명색이다(hover 배경이 그것을 쓴다).
+   그걸 링 색으로 쓰면 2px 짜리 선이 90% 투명해져 사실상 안 보인다 — 키보드로
+   메뉴를 옮길 때 지금 어디인지 알 수 없었다. 전역 링과 같은 --focus-ring 을 쓴다. */
+.side-nav__item:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* Disabled state */
+.side-nav__item.disabled,
+.side-nav__item.disabled:focus,
+.side-nav__item.disabled:hover {
+  background: transparent;
+  color: var(--color-lightGray);
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.6;
+  transform: none;
+}
+
+.side-nav__item.disabled .side-nav__icon {
+  color: var(--color-lightGray);
+}
+
+
+.side-nav__item.disabled .side-nav__icon img {
+  filter: none;
+  opacity: 0.8;
+}
+
+/* ── 하위 항목 ──────────────────────────────────────────────────────────────
+   깊이(클릭 수)는 더하지 않고, 상위 항목 아래로 시각적 들여쓰기만 표현한다.
+   상위 아이콘보다 살짝만 들여 그룹 소속을 표현(과한 여백 방지). */
+.side-nav__item--child {
+  padding-left: 30px;
+  height: 40px;
+}
+.side-nav__item--child .side-nav__icon {
+  width: 20px;
+  height: 20px;
+}
+.side-nav__item--child .side-nav__label {
+  font-weight: 400;
+}

package/dist/packages/core/src/components/SideNav.d.ts

@@ -0,0 +1,32 @@
+import './SideNav.css';
+import React, { type ReactNode } from 'react';
+/** @public */
+export interface SideNavItem {
+    key?: string;
+    label?: ReactNode;
+    section?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    href?: string; /** 상위 항목의 하위로 들여쓰기 표시(깊이는 더하지 않고 시각적 그룹만) */
+    child?: boolean; /** 좌상단 원형 배지 숫자(0/undefined면 숨김) */
+    badge?: number; /** 이 항목 위에 구분선 표시 */
+    divider?: boolean;
+}
+/** @public */
+export interface SideNavProps {
+    items?: SideNavItem[];
+    activeKey?: string;
+    onChange?: (key?: string) => void;
+    unreadCount?: number;
+    onDebug?: () => void;
+    onNotification?: () => void;
+    onAccount?: () => void;
+    onSetting?: () => void;
+    onHelp?: () => void;
+    /** 현재 앱 모드 ('malgwi' | 'manager') */
+    appMode?: 'malgwi' | 'manager';
+    /** 앱 모드 전환 콜백 */
+    onAppModeChange?: (mode: 'malgwi' | 'manager') => void;
+}
+/** @public */
+export default function SideNav(props: SideNavProps): React.JSX.Element;

package/dist/packages/core/src/components/SideNav.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './SideNav.css';
+import Icon from './Icon';
+import Button from './Button';
+import Badge from './Badge';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+function SideNavFooter(props) {
+    const { t } = useTranslation();
+    const { activeKey, unreadCount, onDebug, onNotification, onSetting, onHelp, onAccount } = props || {};
+    const variant = 'default';
+    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), _jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: t('nav.notifications', '알림'), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24 }))] }), _jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' }), _jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' }), _jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' })] }));
+}
+function SideNavButton(props) {
+    const { item, itemKey, label, icon, active, onClick, style, state, labelStyle } = props || {};
+    const key = item?.key ?? itemKey ?? '';
+    const text = (item?.label ?? label ?? '');
+    const iconNode = item?.icon ?? icon ?? '';
+    const badgeCount = item?.badge ?? 0;
+    const iconElement = (_jsx("span", { className: "side-nav__icon-wrap", children: _jsx(Icon, { icon: iconNode, label: typeof text === 'string' ? text : undefined, className: "side-nav__icon", maskClassName: "side-nav__icon-image", imgClassName: undefined, svgClassName: undefined }) }));
+    const isDisabled = state === 'disabled';
+    const btnClass = `side-nav__item ${active ? 'active' : ''} ${state || ''} ${isDisabled ? 'disabled' : ''} ${item?.child ? 'side-nav__item--child' : ''}`;
+    const handleClick = useCallback((e) => {
+        if (isDisabled)
+            return;
+        try {
+            e.currentTarget.blur();
+        }
+        catch (err) { }
+        onClick?.(key, e.currentTarget);
+    }, [isDisabled, key, onClick]);
+    return (_jsxs("button", { className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? text : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-label": `${badgeCount}` })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
+}
+/** @public */
+export default function SideNav(props) {
+    const { t } = useTranslation();
+    const { items = [], activeKey, onChange, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange } = props || {};
+    const handleModeSwitch = useCallback(() => onAppModeChange?.(appMode === 'malgwi' ? 'manager' : 'malgwi'), [onAppModeChange, appMode]);
+    return (_jsxs("nav", { "aria-label": t('nav.mainMenu', '메인 메뉴'), className: "side-nav__menu", children: [_jsxs("div", { className: "side-nav__menu-list", children: [(items || [])
+                        .filter((it) => !it.section && (it.key || it.label))
+                        .map((it, idx) => (_jsxs(React.Fragment, { children: [it.divider && _jsx("div", { className: "side-nav__separator" }), _jsx(SideNavButton, { item: it, active: it.key === activeKey, state: it.disabled ? 'disabled' : undefined, onClick: (_key, btnEl) => {
+                                    if (it.disabled)
+                                        return;
+                                    if (it.href) {
+                                        window.open(it.href, '_blank', 'noopener,noreferrer');
+                                        try {
+                                            btnEl?.blur();
+                                        }
+                                        catch (err) { }
+                                        return;
+                                    }
+                                    onChange?.(it.key);
+                                    try {
+                                        const contentEl = document.querySelector('.content-area');
+                                        if (contentEl)
+                                            contentEl.scrollTop = 0;
+                                        else
+                                            window.scrollTo({ top: 0 });
+                                    }
+                                    catch (_) { }
+                                    try {
+                                        btnEl?.blur();
+                                    }
+                                    catch (err) { }
+                                    if (typeof window !== 'undefined' && window.matchMedia) {
+                                        const mq = window.matchMedia('(min-width: 768px) and (max-width: 1023px)');
+                                        if (!mq.matches)
+                                            return;
+                                    }
+                                    else {
+                                        return;
+                                    }
+                                    const headerEl = document.querySelector('.header');
+                                    if (headerEl) {
+                                        const supportsMatches = typeof headerEl.matches === 'function';
+                                        const isHovered = supportsMatches ? headerEl.matches(':hover') : false;
+                                        if (!isHovered) {
+                                            headerEl.classList.add('header--force-collapsed');
+                                            const onEnter = () => {
+                                                headerEl.classList.remove('header--force-collapsed');
+                                                headerEl.removeEventListener('mouseenter', onEnter);
+                                            };
+                                            headerEl.addEventListener('mouseenter', onEnter);
+                                        }
+                                    }
+                                } })] }, it.key ?? `side-nav__item-${idx}`))), onAppModeChange && _jsx("div", { className: "side-nav__separator side-nav__separator--short" }), onAppModeChange && (_jsx(SideNavButton, { item: {
+                            key: '__mode-switch__',
+                            label: appMode === 'malgwi' ? t('nav.goToManager', '말귀매니저로 이동') : t('nav.goToMalgwi', '말귀로 이동'),
+                            icon: appMode === 'malgwi' ? 'arrow-right' : 'arrow-left',
+                        }, onClick: handleModeSwitch }))] }), _jsx(SideNavFooter, { activeKey: activeKey, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp })] }));
+}