feat: adds action items to navbar (header)

example/src/App.js

@@ -3,9 +3,11 @@ import { BrowserRouter } from 'react-router-dom';
 
 import LiveHelpIcon from '@material-ui/icons/LiveHelp';
 import { ThemeProvider } from '@material-ui/core/styles';
+import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone'
 
 import {
   Account,
+  colors,
   Footer,
   Header,
   PageTemplate,
@@ -22,13 +24,18 @@ const App = () => {
 
   const headerProps = {
     hreflogo: '/',
-    items: [
+    itemsStart: [
       {
         title: 'FAQ',
         to: '/faq',
         icon: <LiveHelpIcon />
       },
     ],
+    itemsEnd: [
+      {
+        icon: <NotificationsNoneIcon htmlColor={colors.white} />
+      }
+    ],
     login: () => (
       <Web3Provider.Consumer>
         {({ state: { web3, account, networkInfo }, actions: { setProvider }, availableProviders }) => (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsksmart/rif-ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Exposes common components to be re used in RIF projects",
   "keywords": [
     "RIF",
@@ -86,4 +86,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/organisms/Header/Header.tsx

@@ -4,13 +4,13 @@ import { HeaderProps } from './HeaderProps'
 import HeaderDesktop from './HeaderDesktop'
 import HeaderMobile from './HeaderMobile'
 
-const Header: FC<HeaderProps> = ({ hreflogo, items, login }) => (
+const Header: FC<HeaderProps> = (props) => (
   <React.Fragment>
     <Hidden smDown>
-      <HeaderDesktop hreflogo={hreflogo} items={items} login={login} />
+      <HeaderDesktop {...props} />
     </Hidden>
     <Hidden mdUp>
-      <HeaderMobile hreflogo={hreflogo} items={items} login={login} />
+      <HeaderMobile {...props} />
     </Hidden>
   </React.Fragment>
 )

src/components/organisms/Header/HeaderDesktop.tsx

@@ -1,25 +1,20 @@
 import React, { FC } from 'react'
-import { AppBar, Toolbar } from '@material-ui/core'
+import {
+  AppBar, Grid, ListItemIcon, Toolbar,
+} from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import { NavLink } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography'
+import { ActionHeaderItemProps, HeaderProps, NavItemProps } from './HeaderProps'
 import { LogoNavbar } from '../../atoms'
 import { colors, fonts, globalConstants } from '../../../theme'
-import { HeaderProps, HeaderItemProps } from './HeaderProps'
 import { removeEmptySpaces } from '../../../utils'
 
 const useStyles = makeStyles((theme: Theme) => ({
   activeNavlink: {
     color: `${colors.white} !important`,
     fontWeight: fonts.weight.medium,
   },
-  itemsContainer: {
-    display: 'flex',
-  },
-  loginContainer: {
-    display: 'flex',
-    marginLeft: 'auto',
-  },
   navLink: {
     alignItems: 'center',
     color: colors.white,
@@ -43,38 +38,78 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-const HeaderDesktop: FC<HeaderProps> = ({ hreflogo, items, login }) => {
+const HeaderDesktop: FC<HeaderProps> = ({
+  hreflogo, itemsStart, itemsEnd, login,
+}) => {
   const classes = useStyles()
   const Login = login
 
   return (
     <AppBar position="fixed" className={classes.root}>
       <Toolbar>
-        <NavLink to={hreflogo}>
-          <LogoNavbar />
-        </NavLink>
-        <div className={classes.itemsContainer}>
-          {
-            !!items.length
-            && items.map((navItem: HeaderItemProps) => (
-              <Typography
-                className={classes.navLinkContainer}
-                key={`hi-${removeEmptySpaces(navItem.title)}`}
-              >
-                <NavLink
-                  className={classes.navLink}
-                  activeClassName={classes.activeNavlink}
-                  {...navItem}
+        <Grid
+          container
+        >
+          <Grid item xs={1}>
+            <NavLink to={hreflogo}>
+              <LogoNavbar />
+            </NavLink>
+          </Grid>
+          <Grid
+            item
+            xs={6}
+            xl={8}
+            container
+            justify="flex-start"
+          >
+            {
+              !!itemsStart?.length
+              && itemsStart.map((navItem: NavItemProps) => (
+                <Typography
+                  className={classes.navLinkContainer}
+                  key={`hi-${removeEmptySpaces(navItem.title)}`}
                 >
-                  {navItem.title}
-                </NavLink>
-              </Typography>
-            ))
-          }
-        </div>
-        <div className={classes.loginContainer}>
-          <Login />
-        </div>
+                  <NavLink
+                    className={classes.navLink}
+                    activeClassName={classes.activeNavlink}
+                    {...navItem}
+                  >
+                    {navItem.title}
+                  </NavLink>
+                </Typography>
+              ))
+            }
+          </Grid>
+          <Grid
+            item
+            xs={3}
+            xl={2}
+            container
+            justify="flex-end"
+            alignContent="center"
+          >
+            {
+              !!itemsEnd?.length
+              && itemsEnd.map(({ icon, ...rest }: ActionHeaderItemProps) => (
+                <ListItemIcon key={icon.key} {...rest}>
+                  {icon}
+                </ListItemIcon>
+              ))
+            }
+          </Grid>
+          <Grid
+            item
+            container
+            xs={2}
+            xl={1}
+            justify="flex-end"
+            alignContent="center"
+          >
+            <div>
+              <Login />
+            </div>
+          </Grid>
+        </Grid>
       </Toolbar>
     </AppBar>
   )

src/components/organisms/Header/HeaderMobile.tsx

@@ -4,24 +4,20 @@ import {
   Divider,
   Drawer, Toolbar,
   IconButton, List, ListItem,
-  ListItemText, ListItemIcon,
+  ListItemText, ListItemIcon, Grid,
 } from '@material-ui/core'
 import { NavLink } from 'react-router-dom'
 import MenuIcon from '@material-ui/icons/Menu'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { ActionHeaderItemProps, HeaderProps, NavItemProps } from './HeaderProps'
 import { colors, globalConstants } from '../../../theme'
 import { LogoNavbar } from '../../atoms'
-import { HeaderProps, HeaderItemProps } from './HeaderProps'
 import { removeEmptySpaces } from '../../../utils'
 
 const drawerWidth = 240
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
-  loginContainer: {
-    display: 'flex',
-    marginLeft: 'auto',
-  },
   drawerHeader: {
     display: 'flex',
     alignItems: 'center',
@@ -66,12 +62,12 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   },
 }))
 
-const HeaderMobile: FC<HeaderProps> = ({ hreflogo, items, login }) => {
+const HeaderMobile: FC<HeaderProps> = ({
+  hreflogo, itemsStart, itemsEnd, login: Login,
+}) => {
   const classes = useStyles()
   const [open, setOpen] = useState(false)
 
-  const Login = login
-
   const toggleDrawer = (isOpen: boolean) => (
     event: React.KeyboardEvent | React.MouseEvent,
   ): void => {
@@ -98,21 +94,45 @@ const HeaderMobile: FC<HeaderProps> = ({ hreflogo, items, login }) => {
       >
         <Toolbar>
           {!open && (
-            <React.Fragment>
-              <IconButton
-                color="inherit"
-                aria-label="open drawer"
-                onClick={toggleDrawer(true)}
+            <Grid container>
+              <Grid item xs={1}>
+                <IconButton
+                  color="inherit"
+                  aria-label="open drawer"
+                  onClick={toggleDrawer(true)}
+                >
+                  <MenuIcon />
+                </IconButton>
+              </Grid>
+              <Grid item xs={3}>
+                <NavLink to={hreflogo}>
+                  <LogoNavbar />
+                </NavLink>
+              </Grid>
+              <Grid
+                item
+                md={6}
+                sm={5}
+                xs={4}
+                container
+                justify="flex-end"
+                alignContent="center"
               >
-                <MenuIcon />
-              </IconButton>
-              <NavLink to={hreflogo}>
-                <LogoNavbar />
-              </NavLink>
-              <div className={classes.loginContainer}>
-                <Login />
-              </div>
-            </React.Fragment>
+                {
+                  !!itemsEnd?.length
+                  && itemsEnd.map(({ icon, ...rest }: ActionHeaderItemProps) => (
+                    <ListItemIcon key={icon.key} {...rest}>
+                      {icon}
+                    </ListItemIcon>
+                  ))
+                }
+              </Grid>
+              <Grid item md={2} sm={3} xs={4} container justify="flex-end" alignContent="center">
+                <div>
+                  <Login />
+                </div>
+              </Grid>
+            </Grid>
           )}
         </Toolbar>
       </AppBar>
@@ -133,8 +153,8 @@ const HeaderMobile: FC<HeaderProps> = ({ hreflogo, items, login }) => {
         <Divider />
         <List>
           {
-            !!items.length
-            && items.map((headerItem: HeaderItemProps) => (
+            !!itemsStart?.length
+            && itemsStart.map((headerItem: NavItemProps) => (
               <ListItem
                 button
                 key={`him-${removeEmptySpaces(headerItem.title)}`}

src/components/organisms/Header/HeaderProps.ts

@@ -1,13 +1,20 @@
 import { NavLinkProps } from 'react-router-dom'
-import { ReactElement } from 'react'
+import { HTMLAttributes, ReactElement } from 'react'
 
 export interface HeaderProps {
   hreflogo: string
-  items: HeaderItemProps[]
+  itemsStart: NavItemProps[]
+  itemsEnd?: ActionHeaderItemProps[]
   login: React.ElementType
 }
 
-export interface HeaderItemProps extends NavLinkProps {
+export type NavItemProps = NavLinkProps & NavHeaderItemProps
+
+export type NavHeaderItemProps = {
   icon?: ReactElement
   title: string
 }
+
+export type ActionHeaderItemProps = {
+  icon: ReactElement
+} & Partial<HTMLAttributes<HTMLElement>>