Repository: react-materialize/react-materialize
Pull request #981 (2019-12-14 20:53:30)

Navbar: places brand on right if navbar is left aligned for both web and mobile
# Description #982  #980 

The navbar is supposed to align the Brand to the right when the Navbar links are left aligned

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

<br>

# How Has This Been Tested?

1. I updated the tests:
`jest Navbar.spec.js`, 
   <img width="1255" alt="Navbar tests updated" src="https://user-images.githubusercontent.com/8462791/70854192-89870680-1e86-11ea-913a-829e19f041dd.png">

2. I ran all tests as well:
   `npm run test`
   <img width="454" alt="all tests" src="https://user-images.githubusercontent.com/8462791/70854201-94da3200-1e86-11ea-8b4d-e202880b2dee.png">

3. I rendered the Navbar locally with `alignLinks="left"`:
   <img width="1679" alt="expected logo right" src="https://user-images.githubusercontent.com/8462791/70866339-52702e00-1f36-11ea-8b32-f80df3b7212e.png">
   E.g.
```
<Navbar brand={<a href="/">Logo</a>} alignLinks="left">
  <a href="get-started.html">Getting started</a>
  <a href="components.html">Components</a>
</Navbar>
```

4. I rendered the Navbar locally with `alignLinks="right"`:
   <img width="1679" alt="expected logo left" src="https://user-images.githubusercontent.com/8462791/70866446-bcd59e00-1f37-11ea-8c71-23f0731645cc.png">

   E.g.
```
<Navbar brand={<a href="/">Logo</a>} alignLinks="right">
  <a href="get-started.html">Getting started</a>
  <a href="components.html">Components</a>
</Navbar>
```


5. I rendered the Navbar locally: `<Navbar brand={<a href="/">Logo</a>} alignLinks="left" />`
   <img width="1680" alt="expected behaviour" src="https://user-images.githubusercontent.com/8462791/70854412-63169a80-1e89-11ea-80bf-48116058cf94.png">


<br>

# Checklist:

- [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..42fc638 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -35,6 +35,7 @@ class Navbar extends Component {
 
     const brandClasses = cx({
       'brand-logo': true,
+      right: alignLinks == 'left',
       center: centerLogo
     });
 


Test patch:
diff --git a/test/Navbar.spec.js b/test/Navbar.spec.js
index dffad43..79ed3bf 100644
--- a/test/Navbar.spec.js
+++ b/test/Navbar.spec.js
@@ -64,7 +64,7 @@ describe('<Navbar />', () => {
       <Navbar brand={<a href="/">Logo</a>} alignLinks="left" />
     );
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('a.brand-logo').hasClass('right'));
+    expect(wrapper.find('a.brand-logo').hasClass('right')).toBe(true);
   });
 
   test('adds a brand node', () => {
diff --git a/test/__snapshots__/Navbar.spec.js.snap b/test/__snapshots__/Navbar.spec.js.snap
index 40b71b9..6f4f99b 100644
--- a/test/__snapshots__/Navbar.spec.js.snap
+++ b/test/__snapshots__/Navbar.spec.js.snap
@@ -263,7 +263,7 @@ exports[`<Navbar /> can have custom sidenav 1`] = `
       className="nav-wrapper"
     >
       <a
-        className="brand-logo"
+        className="brand-logo right"
         href="/"
       >
         Logo
@@ -304,7 +304,7 @@ exports[`<Navbar /> places brand on right if navbar is left aligned 1`] = `
       className="nav-wrapper"
     >
       <a
-        className="brand-logo"
+        className="brand-logo right"
         href="/"
       >
         Logo