Flex nav

src-docs/src/components/guide_components.scss

@@ -1,4 +1,4 @@
-$guideSideNavWidth: 200px;
+$guideSideNavWidth: 240px;
 $guideZLevelHighest: $euiZLevel9 + 1000;
 
 @mixin whenNarrowerThan($browserWidth) {
@@ -30,56 +30,56 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
+.guideBody {
+  background: linear-gradient(90deg, $euiColorLightestShade 50%, $euiColorEmptyShade 50%);
+}
+
+#guide {
+  margin: auto;
+  max-width: 1240px;
+}
+
 .guidePage {
   padding: 0;
 }
 
 .guideSideNav {
-  @include scrollbar;
   width: $guideSideNavWidth;
-  padding: $euiSize $euiSizeS $euiSize $euiSize;
   position: fixed;
   top: 0;
   bottom: 0;
-  left: 0;
-  overflow: auto;
 
-  @include screenXSmall {
-    position: relative;
-    width: auto;
-    overflow: hidden;
+  .guideSideNav__identity {
+    border-bottom: $euiBorderThin;
+    padding: $euiSize;
+  }
+
+  .guideSideNav__theme {
+    font-size: $euiFontSizeS;
+    color: $euiColorDarkShade;
+  }
+
+  .guideSideNav__content {
+    width: $guideSideNavWidth;
+    padding: $euiSize;
+    position: absolute;
+    bottom: 0;
+    top: 132px;
+    @include scrollbar;
+    overflow-y: auto;
   }
 }
 
 .guidePageContent {
   flex: 1 1 auto;
-  margin-left: $guideSideNavWidth;
   padding: $euiSize $euiSizeXL;
   min-height: 100vh;
   background-color: $euiColorEmptyShade;
   border-left: $euiBorderThin;
-
-  @include screenXSmall {
-    margin-left: 0;
-  }
+  max-width: 1000px;
+  margin-left: 240px;
 }
 
-.guideLogo {
-  width: 40px;
-  height: 40px;
-  background: $euiColorEmptyShade;
-  border-radius: 40px;
-  margin: auto;
-  border: $euiBorderThin;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  &:hover {
-    border-color: $euiColorMediumShade;
-  }
-}
 
 .guideDemo__highlightLayout {
   div {
@@ -152,3 +152,43 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 
 @import "guide_section/index";
 @import "guide_rule/index";
+
+@include screenXSmall {
+
+  .guideBody {
+    background: none;
+  }
+
+  .guideSideNav {
+    position: relative;
+    width: auto;
+
+    // This is a temporary hack till we fix how classes pass into form controls
+    .euiFormControlLayout, input[type=search] {
+      max-width: 100%;
+    }
+
+    .guideSideNav__content {
+      position: relative;
+      width: auto;
+      top: auto;
+      bottom: auto;
+      padding: 0;
+      overflow-y: hidden;
+    }
+
+    .guideSideNav__identity {
+      position: relative;
+      width: auto;
+    }
+
+    .guideSideNav__mobileToggle {
+      background: $euiColorPrimary;
+      color: $euiColorEmptyShade !important;
+    }
+  }
+
+  .guidePageContent {
+    margin-left: 0;
+  }
+}

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -39,6 +39,7 @@ export class GuidePageChrome extends Component {
   onSearchChange = event => {
     this.setState({
       search: event.target.value,
+      isSideNavOpenOnMobile: event.target.value !== '',
     });
   };
 
@@ -51,6 +52,11 @@ export class GuidePageChrome extends Component {
   onClickLink = id => {
     // Scroll to element.
     this.scrollTo($(`#${id}`).offset().top - 20);
+
+    this.setState({
+      search: '',
+      isSideNavOpenOnMobile: false,
+    });
   };
 
   renderIdentity() {
@@ -154,19 +160,23 @@ export class GuidePageChrome extends Component {
 
     return (
       <div className="guideSideNav">
-        {this.renderIdentity()}
-
-        <EuiSpacer size="m" />
-
-        <EuiFieldSearch
-          placeholder="Search"
-          value={this.state.search}
-          onChange={this.onSearchChange}
-        />
-
-        <EuiSpacer size="m" />
-
-        {sideNavContent}
+        <div className="guideSideNav__identity">
+          {this.renderIdentity()}
+
+          <EuiSpacer size="m" />
+
+          <div className="guideSideNav__search">
+            <EuiFieldSearch
+              placeholder="Search"
+              value={this.state.search}
+              onChange={this.onSearchChange}
+            />
+          </div>
+        </div>
+
+        <div className="guideSideNav__content">
+          {sideNavContent}
+        </div>
       </div>
     );
   }

src-docs/src/components/guide_theme_selector/guide_theme_selector.js

@@ -38,7 +38,7 @@ export class GuideThemeSelector extends Component {
         iconSide="right"
         onClick={this.onThemeButtonClick}
       >
-        Theme
+        Elastic UI <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
       </EuiButtonEmpty>
     );