From 2deb63b557fc1cce45d1c72b9d1ab819926ba96d Mon Sep 17 00:00:00 2001
From: Zhongyi Tong <zhongyi.tong@foxmail.com>
Date: Fri, 21 Jul 2017 17:54:53 +0800
Subject: [PATCH] Add CollapseButton component.

---
 app/renderer/css/main.css                     |  4 ++
 app/renderer/js/components/collapse-button.js | 37 +++++++++++++++++++
 app/renderer/js/main.js                       |  3 ++
 3 files changed, 44 insertions(+)
 create mode 100644 app/renderer/js/components/collapse-button.js

diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css
index b3c9b099..35d1e89a 100644
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -254,4 +254,8 @@ webview:focus {
     height: 100%;
     width: 100%;
     position: relative;
+}
+
+.hidden {
+    display: none !important;
 }
\ No newline at end of file
diff --git a/app/renderer/js/components/collapse-button.js b/app/renderer/js/components/collapse-button.js
new file mode 100644
index 00000000..4dcaea27
--- /dev/null
+++ b/app/renderer/js/components/collapse-button.js
@@ -0,0 +1,37 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+
+class CollapseButton extends BaseComponent {
+	constructor(props) {
+		super();
+		this.init();
+	}
+
+	init() {
+        this.sidebarShown = true;
+
+        this.$sidebar = document.getElementById('sidebar');
+        this.$el = document.getElementById('collapse-button');
+        this.$icon = this.$el.querySelector('i');
+
+		this.registerListeners();
+	}
+
+	registerListeners() {
+		this.$el.addEventListener('click', this.toggleSidebar.bind(this));
+	}
+
+    toggleSidebar() {
+        if (this.sidebarShown) {
+            this.$sidebar.classList.add('hidden');
+            this.$icon.innerHTML = 'keyboard_arrow_right';
+        } else {
+            this.$sidebar.classList.remove('hidden');
+            this.$icon.innerHTML = 'keyboard_arrow_left';
+        }
+        this.sidebarShown = !this.sidebarShown;
+    }
+}
+
+module.exports = CollapseButton;
diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
index c258bdd8..2ce7b525 100644
--- a/app/renderer/js/main.js
+++ b/app/renderer/js/main.js
@@ -5,6 +5,7 @@ const {ipcRenderer} = require('electron');
 
 const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
 const WebView = require(__dirname + '/js/components/webview.js');
+const CollapseButton = require(__dirname + '/js/components/collapse-button.js');
 const ServerTab = require(__dirname + '/js/components/server-tab.js');
 const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
 
@@ -27,6 +28,8 @@ class ServerManagerView {
 	}
 
 	init() {
+		new CollapseButton();
+
 		this.initTabs();
 		this.initActions();
 		this.registerIpcs();