Make sidebar responsive to mobile.

When on mobile, the sidebar covers the whole screen. You have to toggle it off.
WordPress · May 3, 2017 · 0d83968 · 0d83968
1 parent d06cb9e
commit 0d83968
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/editor/layout/style.scss b/editor/layout/style.scss
@@ -14,9 +14,15 @@
 }
 
 .editor-layout.is-sidebar-opened .editor-sidebar {
-	display: none;	/* Hide sidebar on mobile breakpoint */
+	/* Sidebar covers screen on mobile */
+	width: 100%;
 
+	/* Sidebar sits on the side on larger breakpoints */
 	@include break-medium() {
-		display: block;		/* Show sidebar on larger breakpoint */
+		width: $sidebar-width-small;
+	}
+
+	@include break-large() {
+		width: $sidebar-width;
 	}
 }
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
@@ -1,13 +1,13 @@
 .editor-sidebar {
 	position: fixed;
 	right: 0;
-	top: $admin-bar-height + $header-height;
+	top: $admin-bar-height-big + $header-height;
 	bottom: 0;
 	width: $sidebar-width-small;
 	border-left: 1px solid $light-gray-500;
 	background: $light-gray-300;
 
-	@include break-large() {
-		width: $sidebar-width;
+	@include break-medium() {
+		top: $admin-bar-height + $header-height;
 	}
 }