Merge pull request #3 from commitd/je-custom-props

Support outside customisation of menu button and close button props

Author: stuarthendren

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@committed/layout",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Committed layout library",
   "author": "Committed",
   "license": "MIT",

src/Header.tsx

@@ -18,6 +18,7 @@ export type HeaderProps = {
   position?: Position
   children?: ReactNode
   toolbarProps?: any
+  menuButtonProps?: any
   menuIcon?: {
     active: ReactNode
     inactive: ReactNode
@@ -82,7 +83,8 @@ const Header = ({
   style = {},
   color = 'primary',
   children,
-  toolbarProps = {}
+  toolbarProps = {},
+  menuButtonProps = {}
 }: HeaderProps) => {
   const theme = useTheme<Theme>()
   const classes = useStyles()
@@ -126,6 +128,7 @@ const Header = ({
             color="inherit"
             onClick={setOpen}
             className={classes.menuButton}
+            {...menuButtonProps}
           >
             {open ? menuIcon.active : menuIcon.inactive || menuIcon.active}
           </IconButton>

src/Nav.tsx

@@ -58,6 +58,7 @@ export interface NavProps {
   component?: React.ElementType<React.HTMLAttributes<HTMLElement>>
   children?: ReactNode
   header?: ReactNode
+  closeButtonProps?: any
   collapsedIcon?: {
     active: ReactNode
     inactive: ReactNode
@@ -73,6 +74,7 @@ const Nav = ({
     inactive: <Icons.ChevronLeft />
   },
   children,
+  closeButtonProps = {},
   ...props
 }: NavProps) => {
   const classes = useStyles()
@@ -127,6 +129,7 @@ const Nav = ({
           className={classes.closeButton}
           style={{ left: navWidth + 16 }}
           onClick={setOpen}
+          {...closeButtonProps}
         >
           {collapsedIcon.inactive}
         </IconButton>