Add ability to force open EuiSideNav items.

CHANGELOG.md

@@ -9,6 +9,7 @@ No public interface changes since `0.0.27`.
 - New icons for `logoGithub` and `logoSketch` ([#494](https://github.com/elastic/eui/pull/494))
 - `EuiCard` now has an `href` and `isClickable` prop for better handling hover animations. ([#494](https://github.com/elastic/eui/pull/494))
 - Added `calculateContrast` and `rgbToHex` to services ([#494](https://github.com/elastic/eui/pull/494))
+- Add ability to force `EuiSideNav` items open by setting `item.forceOpen`. ([#497](https://github.com/elastic/eui/pull/515))
 
 **Bug fixes**
 

src-docs/src/views/side_nav/side_nav.js

@@ -37,7 +37,7 @@ export default class extends Component {
         name: 'Saved Objects',
         id: 3,
         onClick: () => { window.alert('Saved Objects'); },
-        isSelected: true,
+        isSelected: false,
       }, {
         name: 'Reporting',
         id: 4,

src-docs/src/views/side_nav/side_nav_example.js

@@ -19,6 +19,10 @@ import SideNavComplex from './side_nav_complex';
 const sideNavComplexSource = require('!!raw-loader!./side_nav_complex');
 const sideNavComplexHtml = renderToHtml(SideNavComplex);
 
+import SideNavForceOpen from './side_nav_force_open';
+const sideNavForceOpenSource = require('!!raw-loader!./side_nav_force_open');
+const sideNavForceOpenHtml = renderToHtml(SideNavForceOpen);
+
 export const SideNavExample = {
   title: 'Side Nav',
   sections: [{
@@ -34,12 +38,12 @@ export const SideNavExample = {
         <p>
           <EuiCode>SideNav</EuiCode> is a responsive menu system that usually sits on the left side of a page layout.
           It will exapand to the width of its container. This is the menu that is used on the left side of the
-          page you are looking at.
+          page you are currently looking at.
         </p>
 
         <p>
           Configure the content of a <EuiCode>SideNav</EuiCode> by passing in an <EuiCode>items</EuiCode> prop.
-          Referring to the source code for an example of this data structure&rsquo;s anatomy.
+          Refer to the source code for an example of this data structure&rsquo;s anatomy.
         </p>
       </div>
     ),
@@ -60,5 +64,20 @@ export const SideNavExample = {
       </p>
     ),
     demo: <SideNavComplex />,
+  }, {
+    title: 'Forced open side nav',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: sideNavForceOpenSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: sideNavForceOpenHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>SideNav</EuiCode> items can be forced open by setting <EuiCode>items[n].forceOpen = true</EuiCode>
+      </p>
+    ),
+    demo: <SideNavForceOpen />,
   }],
 };

src-docs/src/views/side_nav/side_nav_force_open.js

@@ -0,0 +1,94 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiIcon,
+  EuiSideNav,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSideNavOpenOnMobile: false,
+      selectedItemName: 'Lion stuff',
+    };
+  }
+
+  toggleOpenOnMobile = () => {
+    this.setState({
+      isSideNavOpenOnMobile: !this.state.isSideNavOpenOnMobile,
+    });
+  };
+
+  selectItem = name => {
+    this.setState({
+      selectedItemName: name,
+    });
+  };
+
+  createItem = (name, data = {}) => {
+    // NOTE: Duplicate `name` values will cause `id` collisions.
+    return {
+      ...data,
+      id: name,
+      name,
+      isSelected: this.state.selectedItemName === name,
+      onClick: () => this.selectItem(name),
+    };
+  };
+
+  render() {
+    const sideNav = [
+      this.createItem('Kibana', {
+        icon: <EuiIcon type="logoKibana" />,
+        items: [
+          this.createItem('Has normal children', {
+            items: [
+              this.createItem('Without forceOpen', {
+                items: [
+                  this.createItem('Child 1'),
+                  this.createItem('Child 2'),
+                ],
+              }),
+            ],
+          }),
+          this.createItem('Normally not open', {
+            items: [
+              this.createItem('Has forceOpen:true', {
+                forceOpen: true,
+                items: [
+                  this.createItem('Child 3'),
+                  this.createItem('Child 4'),
+                ],
+              }),
+            ],
+          }),
+          this.createItem('With forceOpen:true', {
+            forceOpen: true,
+            items: [
+              this.createItem('Normal child', {
+                items: [
+                  this.createItem('Child 5'),
+                  this.createItem('Child 6'),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ];
+
+    return (
+      <EuiSideNav
+        mobileTitle="Navigate within $APP_NAME"
+        toggleOpenOnMobile={this.toggleOpenOnMobile}
+        isOpenOnMobile={this.state.isSideNavOpenOnMobile}
+        items={sideNav}
+        style={{ width: 192 }}
+      />
+    );
+  }
+}