fix(nav-open): removed conditional styles related to drawer state

mostly because it is no longer needed, but also because it was causing header content to shift during initial render
travi-org · Dec 15, 2019 · 7bca279 · 7bca279
1 parent a0f6f9a
commit 7bca279
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 20 deletions.
diff --git a/src/molecules/header/presentational.js b/src/molecules/header/presentational.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {bool, func, shape, string} from 'prop-types';
+import {func, shape, string} from 'prop-types';
 import {AppBar, IconButton, Toolbar, Typography, withStyles} from '@material-ui/core';
 import {Menu as MenuIcon} from '@material-ui/icons';
 import travi from 'travi';
@@ -26,20 +26,18 @@ function styles(theme) {
   });
 }
 
-export function Header({navigationOpen, onNavigationDrawerToggle, classes}) {
+export function Header({onNavigationDrawerToggle, classes}) {
   return (
     <AppBar position="fixed" className={classNames(classes.appBar/* , {[classes.appBarShift]: navigationOpen} */)}>
-      <Toolbar disableGutters={!navigationOpen}>
-        {!navigationOpen && (
-          <IconButton
-            color="inherit"
-            aria-label="Open navigation drawer"
-            onClick={onNavigationDrawerToggle}
-            css={{marginLeft: 12, marginRight: 20}}
-          >
-            <MenuIcon />
-          </IconButton>
-        )}
+      <Toolbar disableGutters>
+        <IconButton
+          color="inherit"
+          aria-label="Open navigation drawer"
+          onClick={onNavigationDrawerToggle}
+          css={{marginLeft: 12, marginRight: 20}}
+        >
+          <MenuIcon />
+        </IconButton>
         <Typography component="h1" variant="h5">
           <a href={travi.contact.website} css={{textDecoration: 'none'}}>
             <Logo />
@@ -52,7 +50,6 @@ export function Header({navigationOpen, onNavigationDrawerToggle, classes}) {
 
 Header.displayName = 'Header';
 Header.propTypes = {
-  navigationOpen: bool,
   onNavigationDrawerToggle: func.isRequired,
   classes: shape({appBar: string, appBarShift: string})
 };

diff --git a/src/organisms/layout/presentational.js b/src/organisms/layout/presentational.js
@@ -37,7 +37,7 @@ export function Layout({children, navigationOpen, onNavigationDrawerToggle, clas
     <ThemeProvider theme={createTheme(prefersDarkMode ? 'dark' : 'light')}>
       <CssBaseline />
       <div css={{display: 'flex'}}>
-        <Header navigationOpen={navigationOpen} onNavigationDrawerToggle={onNavigationDrawerToggle} />
+        <Header onNavigationDrawerToggle={onNavigationDrawerToggle} />
         <NavigationDrawer open={navigationOpen} onToggle={onNavigationDrawerToggle} />
         <main id="main-content" className={classNames(classes.content/* , {[classes.contentShift]: navigationOpen} */)}>
           <div className={classes.drawerHeader} />

diff --git a/test/unit/molecules/header/presentational-test.js b/test/unit/molecules/header/presentational-test.js
@@ -8,11 +8,8 @@ import {Header} from '../../../../src/molecules/header/presentational';
 suite('header', () => {
   test('that the app-bar from material-ui is used', () => {
     const navigationToggleHandler = () => undefined;
-    const navigationOpen = false;
 
-    const wrapper = shallow(
-      <Header navigationOpen={navigationOpen} onNavigationDrawerToggle={navigationToggleHandler} />
-    );
+    const wrapper = shallow(<Header onNavigationDrawerToggle={navigationToggleHandler} />);
     const bar = wrapper.find(AppBar);
     const toolbar = bar.find(Toolbar);
     const navigationToggleButton = toolbar.find(IconButton);

diff --git a/test/unit/organisms/layout/presentational-test.js b/test/unit/organisms/layout/presentational-test.js
@@ -46,7 +46,6 @@ suite('layout', () => {
     assert.isTrue(themeProvider.find('Child').exists());
 
     assert.equal(header.prop('onNavigationDrawerToggle'), navigationToggleHandler);
-    assert.equal(header.prop('navigationOpen'), navigationOpen);
 
     assert.equal(navDrawer.prop('onToggle'), navigationToggleHandler);
     assert.equal(navDrawer.prop('open'), navigationOpen);