밀당 DS

시작하기

Sidebar

Navigation

현재 위치와 관련 메뉴를 계층으로 모은 측면 내비게이션.

Usage

문서·설정처럼 여러 섹션 사이의 현재 위치와 이동 경로를 제공할 때 사용한다.

import

import

import { Sidebar } from '@mildang/design-system/Sidebar';

Sidebar 하나만 가져오면 Sidebar.Provider · Sidebar.Root · Sidebar.Header · Sidebar.Trigger · Sidebar.Inset · Sidebar.Logo · Sidebar.Content · Sidebar.Group · Sidebar.Menu · Sidebar.Footer · Sidebar.Rail · Sidebar.Subscription 를 그 아래에서 쓸 수 있다.

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

Anatomy

tsx

import { Sidebar } from '@mildang/design-system/Sidebar';

export default function Example() {
  return (
    <Sidebar.Provider>
      <Sidebar>
        <Sidebar.Header>
          <Sidebar.Logo />
        </Sidebar.Header>
        <Sidebar.Trigger />
        <Sidebar.Content>
          <Sidebar.Group>
            <Sidebar.Menu />
          </Sidebar.Group>
        </Sidebar.Content>
        <Sidebar.Footer>
          <Sidebar.Subscription />
        </Sidebar.Footer>
        <Sidebar.Rail />
      </Sidebar>
      <Sidebar.Inset />
    </Sidebar.Provider>
  );
}

부품

필수 여부

반복

위치

Sidebar.Provider

필수

Sidebar.Root

필수

Sidebar.Provider 안에 둔다.

Sidebar.Header

선택

Sidebar.Root 안에 둔다.

Sidebar.Logo

선택

Sidebar.Header 안에 둔다.

Sidebar.Trigger

선택

Provider가 제공하는 사이드바 컨텍스트 범위에 둔다.

Sidebar.Content

선택

Sidebar.Root 안에 둔다.

Sidebar.Group

선택

여러 개 가능

Sidebar.Content 안에 둔다.

Sidebar.Menu

선택

여러 개 가능

Sidebar.Group 안에 둔다.

Sidebar.Footer

선택

Sidebar.Root 안에 둔다.

Sidebar.Subscription

선택

Sidebar.Footer 안에 둔다.

Sidebar.Rail

선택

Sidebar.Root 안에 둔다.

Sidebar.Inset

선택

Sidebar.Provider 안에서 Root와 함께 둔다.

  • Sidebar.Provider로 상태 context를 만들고 그 안에 Sidebar.Root를 배치한다.
  • 내비게이션은 Content 안에서 Group과 Menu로 묶고, 여러 그룹과 메뉴를 반복할 수 있다.
  • 주 콘텐츠를 함께 배치할 때는 Sidebar.Inset을 Root와 같은 Provider 범위에 둔다.

API Reference

Sidebar.Provider

사이드바 열림 상태와 모바일 전환 상태를 제공하는 context 루트다.

Prop

Type

Default

collapsible

"none" | "icon" | "offcanvas"

offcanvas

defaultOpen

boolean

지정 안 함

onOpenChange

(open: boolean) => void

지정 안 함

open

boolean

지정 안 함

side

"left" | "right"

left

state

"expanded" | "collapsed"

expanded

variant

"inset" | "sidebar" | "floating"

sidebar

Sidebar.Header

사이드바 상단의 브랜드와 보조 콘텐츠 영역이다.

공개 Props 없음

Sidebar.Logo

사이드바의 브랜드 로고 또는 제목을 표시한다.

공개 Props 없음

Sidebar.Trigger

모바일 사이드바를 열고 닫는 트리거다.

Prop

Type

Default

asChild

boolean

지정 안 함

Sidebar.Content

스크롤 가능한 내비게이션 콘텐츠 영역이다.

공개 Props 없음

Sidebar.Group

관련 내비게이션 메뉴를 의미 단위로 묶는다.

공개 Props 없음

Sidebar.Menu

사이드바 내비게이션 항목을 담는 메뉴다.

공개 Props 없음

Sidebar.Footer

사이드바 하단의 계정·보조 액션 영역이다.

공개 Props 없음

Sidebar.Subscription

구독 상태나 업그레이드 안내를 표시하는 하단 콘텐츠다.

Prop

Type

Default

children
필수

(selected: Selection) => React.ReactNode

지정 안 함

selection

(sidebarState: SidebarStateContextValue) => Selection

지정 안 함

Sidebar.Rail

사이드바를 축소하거나 확장하는 레일 영역이다.

공개 Props 없음

Sidebar.Inset

사이드바 옆의 주 콘텐츠 영역을 제공한다.

공개 Props 없음

메뉴 로딩 상태

메뉴 데이터를 기다리는 동안 스켈레톤을 표시하고, 로드가 끝나면 실제 메뉴 항목으로 교체한다.

메뉴 로딩 전환

메뉴를 스켈레톤으로 표시한 뒤 실제 항목으로 전환하는 예시다.

코드

Open in Playground
// SidebarLoadingToLoaded.example.tsx
import { useState, useEffect } from "react";
import { Sidebar } from "@mildang/design-system/Sidebar";

// _demo-icon.ts
var DEMO_ICON_SVG = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="323px" viewBox="0 0 256 323" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <title>Astro</title>
    <defs>
        <linearGradient x1="0.000291601921%" y1="91.2689874%" x2="116.842365%" y2="41.1154506%" id="linearGradient-1">
            <stop stop-color="#D83333" offset="0%"></stop>
            <stop stop-color="#F041FF" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="#FFFFFF"></path>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="url(#linearGradient-1)"></path>
        <path d="M1.70502831e-14,210.001438 C1.70502831e-14,210.001438 43.1973158,188.959639 86.5154,188.959639 L119.175832,87.8816332 C120.398693,82.9934182 123.968789,79.6713178 127.999354,79.6713178 C132.02992,79.6713178 135.600338,82.9934182 136.823199,87.8816332 L169.483308,188.959639 C220.78664,188.959639 256,210.001438 256,210.001438 C256,210.001438 182.624463,10.1167775 182.481091,9.71572295 C180.37507,3.80614286 176.820152,0 172.027195,0 L83.9792631,0 C79.1863066,0 75.77476,3.80614286 73.5253674,9.71572295 C73.3668185,10.1093505 1.70502831e-14,210.001438 1.70502831e-14,210.001438 Z" fill="#17191E"></path>
    </g>
</svg>`;
var DEMO_ICON_SRC = `data:image/svg+xml,${encodeURIComponent(DEMO_ICON_SVG)}`;

// SidebarLoadingToLoaded.example.tsx
import { Text } from "@mildang/design-system/Text";
import { css } from "@mildang/styled-system/css";
import Teaching from "@mildang/icons/react/teaching";
import UserGroup from "@mildang/icons/react/user-group";
import OpenBook from "@mildang/icons/react/open-book";
var LOADING_MENU = [
  { icon: <Teaching />, label: "강좌 관리" },
  { icon: <UserGroup />, label: "선택된 메뉴" },
  { icon: <OpenBook />, label: "프로젝트" }
];
var SidebarLoadingDemo = () => {
  const [loading, setLoading] = useState(true);
  const [replay, setReplay] = useState(0);
  useEffect(() => {
    setLoading(true);
    const timer = setTimeout(() => setLoading(false), 2e3);
    return () => clearTimeout(timer);
  }, [replay]);
  return <Sidebar.Provider>
      <Sidebar.Root aria-busy={loading || void 0}>
        <Sidebar.Header>
          <Sidebar.Logo src={DEMO_ICON_SRC} />
          <Text variant="title-xl" className={css({ whiteSpace: "nowrap", flex: 1 })}>
            강사
          </Text>
        </Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Group.Root>
            <Sidebar.Group.Label>관리</Sidebar.Group.Label>
            <Sidebar.Menu.Root>
              {loading ? LOADING_MENU.map((_, i) => <Sidebar.Menu.Item key={i}>
                      <Sidebar.Menu.Skeleton showIcon delay={0} />
                    </Sidebar.Menu.Item>) : LOADING_MENU.map((item, i) => <Sidebar.Menu.Item key={i}>
                      <Sidebar.Menu.Button>
                        {item.icon}
                        <span>{item.label}</span>
                      </Sidebar.Menu.Button>
                    </Sidebar.Menu.Item>)}
            </Sidebar.Menu.Root>
          </Sidebar.Group.Root>
        </Sidebar.Content>
      </Sidebar.Root>
      <Sidebar.Inset>
        <button
    type="button"
    onClick={() => setReplay((n) => n + 1)}
    className={css({
      m: "16",
      px: "12",
      py: "8",
      borderRadius: "md",
      bg: "primary.bg.high",
      color: "primary.text.base",
      cursor: "pointer"
    })}
  >
          다시 로딩
        </button>
      </Sidebar.Inset>
    </Sidebar.Provider>;
};
var SidebarLoadingToLoadedExample = () => <SidebarLoadingDemo />;
var SidebarLoadingToLoaded_example_default = SidebarLoadingToLoadedExample;
export {
  SidebarLoadingToLoaded_example_default as default
};

예제

기본 사용

Provider·Root·Header·Content·Menu 를 조합한 최소 골격입니다. 활성 항목은 isActive 로 표시합니다.

코드

Open in Playground
// SidebarBasic.example.tsx
import { Sidebar } from "@mildang/design-system/Sidebar";

// _demo-icon.ts
var DEMO_ICON_SVG = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="323px" viewBox="0 0 256 323" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <title>Astro</title>
    <defs>
        <linearGradient x1="0.000291601921%" y1="91.2689874%" x2="116.842365%" y2="41.1154506%" id="linearGradient-1">
            <stop stop-color="#D83333" offset="0%"></stop>
            <stop stop-color="#F041FF" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="#FFFFFF"></path>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="url(#linearGradient-1)"></path>
        <path d="M1.70502831e-14,210.001438 C1.70502831e-14,210.001438 43.1973158,188.959639 86.5154,188.959639 L119.175832,87.8816332 C120.398693,82.9934182 123.968789,79.6713178 127.999354,79.6713178 C132.02992,79.6713178 135.600338,82.9934182 136.823199,87.8816332 L169.483308,188.959639 C220.78664,188.959639 256,210.001438 256,210.001438 C256,210.001438 182.624463,10.1167775 182.481091,9.71572295 C180.37507,3.80614286 176.820152,0 172.027195,0 L83.9792631,0 C79.1863066,0 75.77476,3.80614286 73.5253674,9.71572295 C73.3668185,10.1093505 1.70502831e-14,210.001438 1.70502831e-14,210.001438 Z" fill="#17191E"></path>
    </g>
</svg>`;
var DEMO_ICON_SRC = `data:image/svg+xml,${encodeURIComponent(DEMO_ICON_SVG)}`;

// SidebarBasic.example.tsx
import { css } from "@mildang/styled-system/css";
import { Avatar } from "@mildang/design-system/Avatar";
import { Text } from "@mildang/design-system/Text";
import { IconButton } from "@mildang/design-system/IconButton";
import CloseIcon from "@mildang/icons/react/close";
var SidebarBasicExample = () => <Sidebar.Provider>
      <Sidebar.Root>
        <Sidebar.Header>
          <div
  className={css({
    display: "grid",
    gridTemplateColumns: "auto 1fr auto",
    gap: "8",
    alignItems: "center"
  })}
>
            <Avatar
  size="md"
  className={css({ size: "32" })}
  variant="square"
  src={DEMO_ICON_SRC}
/>
            <Text variant="title-lg" className={css({ whiteSpace: "nowrap" })}>
              강사
            </Text>
            <Sidebar.Trigger asChild>
              <IconButton>
                <CloseIcon />
              </IconButton>
            </Sidebar.Trigger>
          </div>
        </Sidebar.Header>
      </Sidebar.Root>

      <Sidebar.Inset>
        <div>
          <Sidebar.Trigger asChild>
            <IconButton>
              <CloseIcon />
            </IconButton>
          </Sidebar.Trigger>
        </div>
      </Sidebar.Inset>
    </Sidebar.Provider>;
var SidebarBasic_example_default = SidebarBasicExample;
export {
  SidebarBasic_example_default as default
};

Icon

코드

Open in Playground
// SidebarIcon.example.tsx
import { Sidebar } from "@mildang/design-system/Sidebar";

// _demo-icon.ts
var DEMO_ICON_SVG = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="323px" viewBox="0 0 256 323" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <title>Astro</title>
    <defs>
        <linearGradient x1="0.000291601921%" y1="91.2689874%" x2="116.842365%" y2="41.1154506%" id="linearGradient-1">
            <stop stop-color="#D83333" offset="0%"></stop>
            <stop stop-color="#F041FF" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="#FFFFFF"></path>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="url(#linearGradient-1)"></path>
        <path d="M1.70502831e-14,210.001438 C1.70502831e-14,210.001438 43.1973158,188.959639 86.5154,188.959639 L119.175832,87.8816332 C120.398693,82.9934182 123.968789,79.6713178 127.999354,79.6713178 C132.02992,79.6713178 135.600338,82.9934182 136.823199,87.8816332 L169.483308,188.959639 C220.78664,188.959639 256,210.001438 256,210.001438 C256,210.001438 182.624463,10.1167775 182.481091,9.71572295 C180.37507,3.80614286 176.820152,0 172.027195,0 L83.9792631,0 C79.1863066,0 75.77476,3.80614286 73.5253674,9.71572295 C73.3668185,10.1093505 1.70502831e-14,210.001438 1.70502831e-14,210.001438 Z" fill="#17191E"></path>
    </g>
</svg>`;
var DEMO_ICON_SRC = `data:image/svg+xml,${encodeURIComponent(DEMO_ICON_SVG)}`;

// SidebarIcon.example.tsx
import { css } from "@mildang/styled-system/css";
import { Text } from "@mildang/design-system/Text";
import { IconButton } from "@mildang/design-system/IconButton";
import CloseIcon from "@mildang/icons/react/close";
import Teaching from "@mildang/icons/react/teaching";
import UserGroup from "@mildang/icons/react/user-group";
import OpenBook from "@mildang/icons/react/open-book";
import { Header } from "@mildang/design-system/Header";
var SidebarIconExample = () => <Sidebar.Provider collapsible="icon" className={css({ bg: "#F1F2F4" })}>
      <Sidebar.Root>
        <Sidebar.Header>
          <Sidebar.Logo src={DEMO_ICON_SRC} />

          <Text variant="title-lg" className={css({ whiteSpace: "nowrap", flex: 1 })}>
            강사
          </Text>
          <Sidebar.Trigger asChild>
            <IconButton size="sm">
              <CloseIcon />
            </IconButton>
          </Sidebar.Trigger>
        </Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Group.Root>
            <Sidebar.Group.Label>관리</Sidebar.Group.Label>
            <Sidebar.Menu.Root>
              <Sidebar.Menu.Item>
                <Sidebar.Menu.Button asChild isActive>
                  <a href="#">
                    <Teaching />
                    <span>강좌 관리</span>
                  </a>
                </Sidebar.Menu.Button>
              </Sidebar.Menu.Item>
              <Sidebar.Menu.Item>
                <Sidebar.Menu.Button>
                  <UserGroup />
                  <span>선택된 메뉴</span>
                </Sidebar.Menu.Button>
              </Sidebar.Menu.Item>
              <Sidebar.Menu.Item>
                <Sidebar.Menu.Button>
                  <OpenBook />
                  <span>프로젝트</span>
                </Sidebar.Menu.Button>
              </Sidebar.Menu.Item>
            </Sidebar.Menu.Root>
          </Sidebar.Group.Root>
        </Sidebar.Content>
      </Sidebar.Root>

      <Sidebar.Inset>
        <div className={css({ bg: "white" })}>
          <Header size="sm">
            <Header.Left>
              <Header.Title>강좌 만들기</Header.Title>
            </Header.Left>
            <Header.Right>
              <Sidebar.Trigger asChild>
                <IconButton size="sm">
                  <CloseIcon />
                </IconButton>
              </Sidebar.Trigger>
            </Header.Right>
          </Header>
        </div>
      </Sidebar.Inset>
    </Sidebar.Provider>;
var SidebarIcon_example_default = SidebarIconExample;
export {
  SidebarIcon_example_default as default
};

Menu Skeleton (loading)

코드

Open in Playground
// SidebarMenuSkeletonLoading.example.tsx
import { Sidebar } from "@mildang/design-system/Sidebar";

// _demo-icon.ts
var DEMO_ICON_SVG = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="323px" viewBox="0 0 256 323" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <title>Astro</title>
    <defs>
        <linearGradient x1="0.000291601921%" y1="91.2689874%" x2="116.842365%" y2="41.1154506%" id="linearGradient-1">
            <stop stop-color="#D83333" offset="0%"></stop>
            <stop stop-color="#F041FF" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="#FFFFFF"></path>
        <path d="M83.2611108,275.038787 C68.6729954,261.702595 64.4144553,233.683674 70.4922716,213.385537 C81.0307698,226.18247 95.6324474,230.238222 110.75724,232.524426 C134.106232,236.057064 157.037056,234.736361 178.727582,224.064178 C181.208825,222.843578 183.50181,221.21611 186.213287,219.572497 C188.248268,225.475296 188.778163,231.436219 188.067115,237.503702 C186.338576,252.280074 178.985265,263.694951 167.289779,272.345716 C162.61307,275.807313 157.664471,278.900793 152.83438,282.165416 C137.995363,292.191778 133.980943,303.952169 139.556634,321.059953 C139.689027,321.476507 139.807535,321.893061 140.107519,322.910228 C132.531076,319.519671 126.997041,314.582374 122.780156,308.091878 C118.326578,301.239723 116.207641,293.66102 116.096237,285.462329 C116.040374,281.471159 116.040374,277.444468 115.503697,273.511422 C114.193327,263.920988 109.690667,259.626282 101.208461,259.377641 C92.5031244,259.125771 85.6167409,264.505455 83.7906835,272.981849 C83.6511863,273.630898 83.4490445,274.27349 83.2472256,275.0291 L83.2611108,275.038787 Z" fill="url(#linearGradient-1)"></path>
        <path d="M1.70502831e-14,210.001438 C1.70502831e-14,210.001438 43.1973158,188.959639 86.5154,188.959639 L119.175832,87.8816332 C120.398693,82.9934182 123.968789,79.6713178 127.999354,79.6713178 C132.02992,79.6713178 135.600338,82.9934182 136.823199,87.8816332 L169.483308,188.959639 C220.78664,188.959639 256,210.001438 256,210.001438 C256,210.001438 182.624463,10.1167775 182.481091,9.71572295 C180.37507,3.80614286 176.820152,0 172.027195,0 L83.9792631,0 C79.1863066,0 75.77476,3.80614286 73.5253674,9.71572295 C73.3668185,10.1093505 1.70502831e-14,210.001438 1.70502831e-14,210.001438 Z" fill="#17191E"></path>
    </g>
</svg>`;
var DEMO_ICON_SRC = `data:image/svg+xml,${encodeURIComponent(DEMO_ICON_SVG)}`;

// SidebarMenuSkeletonLoading.example.tsx
import { Text } from "@mildang/design-system/Text";
import { css } from "@mildang/styled-system/css";
var SidebarMenuSkeletonLoadingExample = () => <Sidebar.Provider>
      <Sidebar.Root aria-busy="true">
        <Sidebar.Header>
          <Sidebar.Logo src={DEMO_ICON_SRC} />
          <Text variant="title-xl" className={css({ whiteSpace: "nowrap", flex: 1 })}>
            강사
          </Text>
        </Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Group.Root>
            <Sidebar.Group.Label>관리</Sidebar.Group.Label>
            <Sidebar.Menu.Root>
              {Array.from({ length: 5 }, (_, i) => <Sidebar.Menu.Item key={i}>
                  <Sidebar.Menu.Skeleton showIcon delay={0} />
                </Sidebar.Menu.Item>)}
            </Sidebar.Menu.Root>
          </Sidebar.Group.Root>
        </Sidebar.Content>
      </Sidebar.Root>
    </Sidebar.Provider>;
var SidebarMenuSkeletonLoading_example_default = SidebarMenuSkeletonLoadingExample;
export {
  SidebarMenuSkeletonLoading_example_default as default
};