Repository: react-materialize/react-materialize
Pull request #878 (2019-06-05 00:48:12)

Allows custom sidenav node for navbar
# Description

This request allows one to define a custom sidebar node when using a navbar. I ran into this issue when using dropdowns from the sidenav as they rendered really weird and ugly (not any fault of this package) so I thought it'd be nice to be able to define a custom node for the sidenav

## Type of change

- [X] New feature (non-breaking change which adds functionality)
- [X] This change requires a documentation update

# How Has This Been Tested?

This falls back to the old way if the sidenav prop is not defined

# Checklist:

- [X] I have commented my code, particularly in hard-to-understand areas
- [X] My changes generate no new warnings
- [X] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/Navbar.js b/src/Navbar.js
index 4f39fd4..76d7947 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -28,7 +28,8 @@ class Navbar extends Component {
       fixed,
       alignLinks,
       centerLogo,
-      search
+      search,
+      sidenav
     } = this.props;
 
     const brandClasses = cx({
@@ -44,6 +45,8 @@ class Navbar extends Component {
       <li key={index}>{link}</li>
     ));
 
+    const sidenavLinks = sidenav ? sidenav : links;
+
     let navbar = (
       <nav className={navCSS}>
         <div className="nav-wrapper">
@@ -85,7 +88,7 @@ class Navbar extends Component {
             this._sidenav = ul;
           }}
         >
-          {links}
+          {sidenavLinks}
         </ul>
       </Fragment>
     );
@@ -98,6 +101,10 @@ Navbar.propTypes = {
   className: PropTypes.string,
   extendWith: PropTypes.node,
   search: PropTypes.bool,
+  /**
+   * Allows for custom sidenav node, used for mobile view
+   */
+  sidenav: PropTypes.node,
   /**
    * left makes the navbar links left aligned, right makes them right aligned
    */
diff --git a/stories/Navbar.stories.js b/stories/Navbar.stories.js
index d5c7989..d7bd789 100644
--- a/stories/Navbar.stories.js
+++ b/stories/Navbar.stories.js
@@ -197,3 +197,18 @@ stories.add('Search Bar', () => (
     <NavItem href="components.html">Components</NavItem>
   </Navbar>
 ));
+
+stories.add('Custom Sidenav', () => (
+  <Navbar
+    brand={
+      <a href="#" className="brand-logo">
+        Logo
+      </a>
+    }
+    alignLinks="right"
+    sidenav={<li>Custom node!</li>}
+  >
+    <NavItem href="">Getting started</NavItem>
+    <NavItem href="components.html">Components</NavItem>
+  </Navbar>
+));


Test patch:
diff --git a/test/Navbar.spec.js b/test/Navbar.spec.js
index 6008168..0a588fb 100644
--- a/test/Navbar.spec.js
+++ b/test/Navbar.spec.js
@@ -103,4 +103,16 @@ describe('<Navbar />', () => {
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('.breadcrumb')).toHaveLength(3);
   });
+
+  test('can have custom sidenav', () => {
+    wrapper = shallow(
+      <Navbar
+        brand={<a href="/">Logo</a>}
+        alignLinks="left"
+        sidenav={<li className="custom-node">Custom node!</li>}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('li').hasClass('custom-node'));
+  });
 });
diff --git a/test/__snapshots__/Navbar.spec.js.snap b/test/__snapshots__/Navbar.spec.js.snap
index f054be7..2e6995b 100644
--- a/test/__snapshots__/Navbar.spec.js.snap
+++ b/test/__snapshots__/Navbar.spec.js.snap
@@ -182,6 +182,41 @@ exports[`<Navbar /> can center the brand logo 1`] = `
 </Fragment>
 `;
 
+exports[`<Navbar /> can have custom sidenav 1`] = `
+<Fragment>
+  <nav
+    className=""
+  >
+    <div
+      className="nav-wrapper"
+    >
+      <a
+        className="brand-logo"
+        href="/"
+      >
+        Logo
+      </a>
+      <a
+        className="sidenav-trigger"
+        data-target="mobile-nav"
+        href="#!"
+      >
+        <Icon>
+          menu
+        </Icon>
+      </a>
+      <ul
+        className="hide-on-med-and-down left"
+      />
+    </div>
+  </nav>
+  <ul
+    className="sidenav left"
+    id="mobile-nav"
+  />
+</Fragment>
+`;
+
 exports[`<Navbar /> places brand on right if navbar is left aligned 1`] = `
 <Fragment>
   <nav
@@ -289,3 +324,44 @@ exports[`<Navbar /> renders 1`] = `
   </ul>
 </Fragment>
 `;
+
+exports[`<Navbar /> can have custom sidenav 1`] = `
+<Fragment>
+  <nav
+    className=""
+  >
+    <div
+      className="nav-wrapper"
+    >
+      <a
+        className="brand-logo"
+        href="/"
+      >
+        Logo
+      </a>
+      <a
+        className="sidenav-trigger"
+        data-target="mobile-nav"
+        href="#!"
+      >
+        <Icon>
+          menu
+        </Icon>
+      </a>
+      <ul
+        className="hide-on-med-and-down left"
+      />
+    </div>
+  </nav>
+  <ul
+    className="sidenav left"
+    id="mobile-nav"
+  >
+    <li
+      className="custom-node"
+    >
+      Custom node!
+    </li>
+  </ul>
+</Fragment>
+`;
\ No newline at end of file