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 · Jan 5, 2020 · d34f990 · d34f990
1 parent 8505b67
commit d34f990
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 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} />