feat: Set Sidebar as home and make main content popover

WideChat · Nov 10, 2019 · 6f94c7f · 6f94c7f
1 parent 0c862e0
commit 6f94c7f
Show file tree

Hide file tree

Showing 5 changed files with 811 additions and 972 deletions.
diff --git a/app/theme/client/imports/components/main-content.css b/app/theme/client/imports/components/main-content.css
@@ -2,7 +2,7 @@
 
 	position: relative;
 
-	z-index: 0;
+	z-index: 2;
 
 	display: flex;
 	flex-direction: column;
@@ -11,6 +11,9 @@
 	width: 1vw;
 
 	height: 100%;
+
+	transition: transform 0.3s;
+	transform: translate3d(100%, 0, 0);
 }
 
 .messages-container .room-icon {

diff --git a/app/theme/client/imports/components/sidebar/sidebar.css b/app/theme/client/imports/components/sidebar/sidebar.css
@@ -2,14 +2,15 @@
 
 	position: relative;
 
-	z-index: 2;
+	z-index: 0;
 
 	display: flex;
 	flex-direction: column;
 	flex: 0 0 var(--sidebar-width);
 
-	width: var(--sidebar-width);
-	max-width: var(--sidebar-width);
+	width: 100%;
+
+	/* max-width: var(--sidebar-width); */
 
 	height: 100%;
 
@@ -75,7 +76,7 @@
 
 	.sidebar:not(.sidebar-light) {
 		user-select: none;
-		transform: translate3d(-100%, 0, 0);
+		transform: translate3d(0, 0, 0);
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		touch-action: pan-y;
 		-webkit-user-drag: none;
@@ -91,15 +92,16 @@
 	.sidebar {
 		flex: 0 0 var(--sidebar-small-width);
 
-		width: var(--sidebar-small-width);
-		max-width: var(--sidebar-small-width);
+		width: 100%;
+
+		/* max-width: var(--sidebar-width); */
 
 		&__footer {
 			display: none;
 		}
 
 		&:not(&--light) {
-			transform: translate3d(-100%, 0, 0);
+			transform: translate3d(0, 0, 0);
 		}
 	}
 

diff --git a/app/ui-utils/client/lib/menu.js b/app/ui-utils/client/lib/menu.js
@@ -156,6 +156,8 @@ export const menu = new class extends EventEmitter {
 		this.sidebar = this.menu;
 		this.sidebarWrap = $('.sidebar-wrap');
 		this.wrapper = $('.messages-box > .wrapper');
+		this.mainContent = $('.main-content');
+
 		const ignore = (fn) => (event) => document.body.clientWidth <= 780 && fn(event);
 
 		document.body.addEventListener('touchstart', ignore((e) => this.touchstart(e)));
@@ -165,21 +167,13 @@ export const menu = new class extends EventEmitter {
 			e.target === this.sidebarWrap[0] && this.isOpen() && this.emit('clickOut', e);
 		}));
 		this.on('close', () => {
-			this.sidebarWrap.css('width', '');
-			// this.sidebarWrap.css('z-index', '');
-			this.sidebarWrap.css('background-color', '');
-			this.sidebar.css('transform', '');
-			this.sidebar.css('box-shadow', '');
-			this.sidebar.css('transition', '');
-			this.sidebarWrap.css('transition', '');
-			this.wrapper && this.wrapper.css('overflow', '');
+			// WIDECHAT open main content
+			this.mainContent.css('transform', 'translate3d( 0, 0 , 0)');
 		});
 		this.on('open', ignore(() => {
-			this.sidebar.css('box-shadow', '0 0 15px 1px rgba(0,0,0,.3)');
-			// this.sidebarWrap.css('z-index', '9998');
-			this.translate();
+			// WIDECHAT close main content
+			this.mainContent.css('transform', 'translate3d( 100%, 0 , 0)');
 		}));
-		this.mainContent = $('.main-content');
 
 		this.list = $('.rooms-list');
 		this._open = false;