# Sidebar App

A simple example that shows a sidebar app widget and closes it by clicking the X button.

To put an image in a widget, you need to **base64 encode the image** and wrap it in **an img tag** as shown in the example html code.

**1) File**

{% file src="<https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2F0PblRcGopHj45pBITMkX%2F%EC%98%88%EC%A0%9C_%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94.zip?alt=media&token=b350659b-7015-4cd8-aca5-d711a4b95e1b>" %}

**2) main.js**

```jsx
// Function that works when the sidebar app is touched (clicked).
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("Widget has been closed.");
			player.tag.widget.destroy();
			player.tag.widget = null;
		}
	});
});

// Function is called when the player enters
App.onJoinPlayer.Add(function (p) {
	p.tag = {
		widget: null,
	};
});

// Function is called when the player exits 
App.onLeavePlayer.Add(function (p) {
	if (p.tag.widget) {
		p.tag.widget.destroy();
		p.tag.widget = null;
	}
});
```

**3) Image of the Sidebar App Running**

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FOBb07mfZKrmQqEieVm9J%2FUntitled.png?alt=media&#x26;token=215588fc-5794-445a-b68f-9c13b8797ee3" alt=""><figcaption></figcaption></figure></div>

***