Make it sexier in macOS

src/background.js

@@ -40,6 +40,7 @@ app.on('ready', function () {
 
     var mainWindow = createWindow('main', {
         width: 1000,
+        titleBarStyle: 'hidden',
         height: 600
     });
 

src/scripts/sidebar.js

@@ -192,12 +192,20 @@ class SideBar extends EventEmitter {
         document.body.classList.add('hide-server-list');
         localStorage.setItem('sidebar-closed', 'true');
         this.emit('hide');
+        if (process.platform === 'darwin') {
+            document.querySelectorAll('webview').forEach(
+              (webviewObj) => { if (webviewObj.insertCSS) { webviewObj.insertCSS('aside.side-nav{margin-top:15px;overflow:hidden; transition: margin .5s ease-in-out; }'); } });
+        }
     }
 
     show () {
         document.body.classList.remove('hide-server-list');
         localStorage.setItem('sidebar-closed', 'false');
         this.emit('show');
+        if (process.platform === 'darwin') {
+            document.querySelectorAll('webview').forEach(
+                (webviewObj) => { if (webviewObj.insertCSS) { webviewObj.insertCSS('aside.side-nav{margin-top:0; overflow:hidden; transition: margin .5s ease-in-out; }'); } });
+        }
     }
 
     toggle () {

src/stylesheets/main.less

@@ -291,6 +291,7 @@ input[type='password'] {
 		padding: 45px 0 35px;
 		z-index: 10;
 		position: relative;
+		-webkit-app-region: no-drag;
 	}
 	.share {
 		border-radius: 50%;

src/stylesheets/start-page.less

@@ -30,9 +30,10 @@ div.server-list {
 	bottom: 0;
 	height: 100%;
 	width: 80px;
-	padding-top: 5px;
+	padding-top: 22px;
 	background-color: #0F354C;
 	z-index: 100000;
+	-webkit-app-region: drag;
 }
 
 div.server-list ul {
@@ -175,6 +176,7 @@ div.server-list li:before {
 
 .hide-server-list webview {
 	left: 0;
+	transition: left 0.5s ease-in-out;
 }
 
 @-webkit-keyframes wrong {
@@ -238,4 +240,10 @@ webview.active {
 
 .landing-page {
 	z-index: 1;
+	-webkit-app-region: drag;
+}
+
+body,
+html {
+	-webkit-app-region: drag;
 }