> For the complete documentation index, see [llms.txt](https://docs-kr.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-kr.zep.us/creator/tutor/sample/sidebarapp.md).

# 사이드바 앱

사이드바 앱 위젯을 표시하고, x 버튼을 눌러 닫는 간단한 예제입니다.

위젯에 이미지를 넣으려면 예제 html 코드처럼 **이미지를 base64 인코딩**해서 **img 태그로 감싸**주어야 합니다.

#### **1) 파일**

{% file src="/files/uP7hB8LCKs66XNmC1LXk" %}

#### **2) main.js**

```jsx
// 사이드바 앱이 터치(클릭)되었을 때 동작하는 함수
App.onSidebarTouched.Add(function (p) {
	p.tag.widget = p.showWidget("widget.html", "sidebar", 350, 350);
	p.tag.widget.onMessage.Add(function (player, data) {
		if (data.type == "close") {
			player.showCenterLabel("위젯이 닫혔습니다.");
			player.tag.widget.destroy();
			player.tag.widget = null;
		}
	});
});

// 플레이어가 입장 할 때 동작하는 함수
App.onJoinPlayer.Add(function (p) {
	p.tag = {
		widget: null,
	};
});

// 플레이어가 퇴장 할 때 동작하는 함수
App.onLeavePlayer.Add(function (p) {
	if (p.tag.widget) {
		p.tag.widget.destroy();
		p.tag.widget = null;
	}
});
```

#### **3) 사이드바 앱이 실행된 모습**

<div align="left"><figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FNN4a88w8nE9DnHhwEBjf%2FUntitled.png?alt=media&amp;token=f7cf0abb-7f16-4a8d-b4ce-95250d102a4a" alt=""><figcaption></figcaption></figure></div>