Repository: react-materialize/react-materialize
Pull request #979 (2019-12-13 03:04:32)

Navbar centerChildren
# Description
The Navbar children will be constrained in a container rather than spread out to the far edges.
 
I wanted to center the NavBar items as I previously did when using the materializecss library
<img width="1680" alt="navbar" src="https://user-images.githubusercontent.com/8462791/70765808-e620df00-1d29-11ea-8ae3-275f7f99ae3c.png">

By just adding the centerChildren property it allows us to bound the Navbar items in a container, thus the Navbar items will be aligned in a container rather than spread out to the far edges

### I added documentation:
#### View:
<img width="1676" alt="docs Navbar view" src="https://user-images.githubusercontent.com/8462791/70765381-a4dbff80-1d28-11ea-8d13-41540e882eb6.png">

#### Info:
<img width="1676" alt="docs Navbar info" src="https://user-images.githubusercontent.com/8462791/70765403-b1605800-1d28-11ea-859c-eea69649e257.png">

#### Someone already talked in #348 about this feature as well:

## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)
- [x] This change requires a documentation update

# How Has This Been Tested?

### I created new tests to verify this functionality:
#### Navbar.spec.js
<img width="901" alt="jest Navbar" src="https://user-images.githubusercontent.com/8462791/70765366-9beb2e00-1d28-11ea-9abe-4bd9fdd6753e.png">

#### All tests pass:
<img width="901" alt="npm run test" src="https://user-images.githubusercontent.com/8462791/70765437-cc32cc80-1d28-11ea-97e3-dd08d67f077a.png">



# 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 6909bba..28ae5bb 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -28,6 +28,7 @@ class Navbar extends Component {
       fixed,
       alignLinks,
       centerLogo,
+      centerChildren,
       search,
       menuIcon,
       sidenav
@@ -61,7 +62,9 @@ class Navbar extends Component {
 
     let navbar = (
       <nav className={navCSS}>
-        <div className="nav-wrapper">
+        <div
+          className={centerChildren ? 'nav-wrapper container' : 'nav-wrapper'}
+        >
           {search ? (
             <SearchForm />
           ) : (
@@ -122,6 +125,10 @@ Navbar.propTypes = {
    * Specifying centerLogo as a prop the logo will always be centered
    */
   centerLogo: PropTypes.bool,
+  /**
+   * The Navbar children will be constrained in a container rather than spread out to the far edges
+   */
+  centerChildren: PropTypes.bool,
   /**
    * Makes the navbar fixed
    */
diff --git a/stories/Navbar.stories.js b/stories/Navbar.stories.js
index d7bd789..ea0cb1a 100644
--- a/stories/Navbar.stories.js
+++ b/stories/Navbar.stories.js
@@ -59,6 +59,21 @@ stories.add('Center Logo', () => (
   </Navbar>
 ));
 
+stories.add('Center Children', () => (
+  <Navbar
+    brand={
+      <a href="#" className="brand-logo">
+        Logo
+      </a>
+    }
+    centerChildren
+    alignLinks="right"
+  >
+    <NavItem href="">Getting started</NavItem>
+    <NavItem href="components.html">Components</NavItem>
+  </Navbar>
+));
+
 stories.add('Extended Navbar with Tabs', () => (
   <Navbar
     brand={


Test patch:
diff --git a/test/Navbar.spec.js b/test/Navbar.spec.js
index dffad43..3876d6d 100644
--- a/test/Navbar.spec.js
+++ b/test/Navbar.spec.js
@@ -59,6 +59,17 @@ describe('<Navbar />', () => {
     expect(wrapper.find('a.brand-logo').hasClass('center'));
   });
 
+  test('can constrain its children to a container', () => {
+    wrapper = shallow(
+      <Navbar brand={<a href="/">Logo</a>} centerChildren>
+        <a href="get-started.html">Getting started</a>
+        <a href="components.html">Components</a>
+      </Navbar>
+    );
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('div').hasClass('nav-wrapper container')).toBe(true);
+  });
+
   test('places brand on right if navbar is left aligned', () => {
     wrapper = shallow(
       <Navbar brand={<a href="/">Logo</a>} alignLinks="left" />
diff --git a/test/__snapshots__/Navbar.spec.js.snap b/test/__snapshots__/Navbar.spec.js.snap
index 40b71b9..c341af0 100644
--- a/test/__snapshots__/Navbar.spec.js.snap
+++ b/test/__snapshots__/Navbar.spec.js.snap
@@ -187,6 +187,79 @@ exports[`<Navbar /> can center the brand logo 1`] = `
 </Fragment>
 `;
 
+exports[`<Navbar /> can constrain its children to a container 1`] = `
+<Fragment>
+  <nav
+    className=""
+  >
+    <div
+      className="nav-wrapper container"
+    >
+      <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"
+      >
+        <li
+          key="0/.0"
+        >
+          <a
+            href="get-started.html"
+          >
+            Getting started
+          </a>
+        </li>
+        <li
+          key="1/.1"
+        >
+          <a
+            href="components.html"
+          >
+            Components
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <ul
+    className="sidenav"
+    id="mobile-nav"
+  >
+    <li
+      key="0/.0"
+    >
+      <a
+        href="get-started.html"
+      >
+        Getting started
+      </a>
+    </li>
+    <li
+      key="1/.1"
+    >
+      <a
+        href="components.html"
+      >
+        Components
+      </a>
+    </li>
+  </ul>
+</Fragment>
+`;
+
 exports[`<Navbar /> can have children with custom ids 1`] = `
 <Fragment>
   <nav