scroll to top, scroll styles, reuse header vars

src-docs/src/views/nav_drawer/nav_drawer.js

@@ -519,6 +519,10 @@ export default class extends Component {
         outsideClickDisaled: true,
       });
     }, 350);
+
+    // Scrolls the menu and flyout back to top when the nav drawer collapses
+    document.getElementById('navDrawerMenu').scroll(0, 0);
+    document.getElementById('navDrawerFlyout').scroll(0, 0);
   };
 
   focusOut = () => {
@@ -555,7 +559,11 @@ export default class extends Component {
     this.setState({ flyoutIsAnimating: true });
 
     setTimeout(() => {
-      this.setState({ flyoutIsCollapsed: true });
+      this.setState({
+        flyoutIsCollapsed: true,
+        navFlyoutTitle: null,
+        navFlyoutContent: null
+      });
     }, 250);
   };
 
@@ -611,7 +619,7 @@ export default class extends Component {
               showScrollbar={showScrollbar}
               style={{ position: 'absolute' }} // This is for the embedded docs example only
             >
-              <EuiNavDrawerMenu>
+              <EuiNavDrawerMenu id="navDrawerMenu">
                 <EuiListGroup listItems={this.topLinks} />
                 <EuiHorizontalRule margin="none" />
                 <EuiListGroup listItems={this.exploreLinks} />
@@ -621,6 +629,7 @@ export default class extends Component {
                 <EuiListGroup listItems={this.adminLinks} />
               </EuiNavDrawerMenu>
               <EuiNavDrawerFlyout
+                id="navDrawerFlyout"
                 title={navFlyoutTitle}
                 isCollapsed={flyoutIsCollapsed}
                 listItems={navFlyoutContent}

src/components/header/_index.scss

@@ -1,11 +1,6 @@
-// Themable colors
-$euiHeaderBackgroundColor: $euiColorEmptyShade;
-$euiHeaderBreadcrumbColor: $euiColorDarkestShade;
-
-// Layout vars
-$euiHeaderChildSize: $euiSizeXXL + $euiSizeS;
-
 // Components
+@import '../header/variables';
+@import 'variables';
 @import 'header';
 @import 'header_profile';
 @import 'header_links/index';

src/components/header/_variables.scss

@@ -0,0 +1,7 @@
+// Note - these are also used by the EuiNavDrawer (/nav_drawer) component
+// Themable colors
+$euiHeaderBackgroundColor: $euiColorEmptyShade;
+$euiHeaderBreadcrumbColor: $euiColorDarkestShade;
+
+// Layout vars
+$euiHeaderChildSize: $euiSizeXXL + $euiSizeS;

src/components/nav_drawer/_nav_drawer.scss

@@ -1,7 +1,6 @@
 // Nav drawer. Global application navigation.
 
 .euiNavDrawer {
-  @include euiScrollBar;
   width: $euiNavDrawerWidthCollapsed;
   height: calc(100% - #{$euiHeaderSize});
   position: fixed;

src/components/nav_drawer/_nav_drawer_flyout.scss

@@ -1,4 +1,5 @@
 .euiNavDrawerFlyout {
+  @include euiScrollBar;
   position: absolute;
   left: $euiNavDrawerWidthExpanded;
   top: 0;

src/components/nav_drawer/_nav_drawer_menu.scss

@@ -1,3 +1,4 @@
 .euiNavDrawerMenu {
+  @include euiScrollBar;
   max-width: $euiNavDrawerWidthExpanded;
 }

src/components/nav_drawer/_variables.scss

@@ -1,14 +1,14 @@
 // Themable colors
-$euiNavDrawerBackgroundColor: $euiColorEmptyShade;
+$euiNavDrawerBackgroundColor: $euiHeaderBackgroundColor;
 
 // Drawer variables
 $euiNavDrawerWidthExpanded: 240px;
-$euiNavDrawerWidthCollapsed: 48px;
+$euiNavDrawerWidthCollapsed: $euiHeaderChildSize;
 $euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3);
 
 // Layout variables
-$euiHeaderSize: $euiSizeXXL + $euiSizeS + 1px;
-$euiHeaderSizeMobile: $euiSizeXL + $euiSizeXS + 1px;
+$euiHeaderSize: $euiHeaderChildSize + 1px;
+$euiHeaderSizeMobile: ($euiHeaderChildSize * .75) + 1px;
 
 // Animation variables
 $euiNavDrawerExpandingDelay: $euiAnimSpeedNormal;