Skip to content
This repository was archived by the owner on May 19, 2023. It is now read-only.

Commit 45833bc

Browse files
jurajpiaritofarina
jurajpiar
and
itofarina
authored
feat: adds action items to navbar (header) (#182)
Co-authored-by: Juraj Piar <[email protected]> Co-authored-by: Alvaro Fariña <[email protected]>
1 parent 657178d commit 45833bc

File tree

7 files changed

+143
-74
lines changed

7 files changed

+143
-74
lines changed

‎example/src/App.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { BrowserRouter } from 'react-router-dom';
33

44
import LiveHelpIcon from '@material-ui/icons/LiveHelp';
55
import { ThemeProvider } from '@material-ui/core/styles';
6+
import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone'
67

78
import {
89
Account,
10+
colors,
911
Footer,
1012
Header,
1113
PageTemplate,
@@ -22,13 +24,18 @@ const App = () => {
2224

2325
const headerProps = {
2426
hreflogo: '/',
25-
items: [
27+
itemsStart: [
2628
{
2729
title: 'FAQ',
2830
to: '/faq',
2931
icon: <LiveHelpIcon />
3032
},
3133
],
34+
itemsEnd: [
35+
{
36+
icon: <NotificationsNoneIcon htmlColor={colors.white} />
37+
}
38+
],
3239
login: () => (
3340
<Web3Provider.Consumer>
3441
{({ state: { web3, account, networkInfo }, actions: { setProvider }, availableProviders }) => (

‎package-lock.json‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rsksmart/rif-ui",
3-
"version": "0.3.3",
3+
"version": "0.4.0",
44
"description": "Exposes common components to be re used in RIF projects",
55
"keywords": [
66
"RIF",
@@ -86,4 +86,4 @@
8686
"last 1 safari version"
8787
]
8888
}
89-
}
89+
}

‎src/components/organisms/Header/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { HeaderProps } from './HeaderProps'
44
import HeaderDesktop from './HeaderDesktop'
55
import HeaderMobile from './HeaderMobile'
66

7-
const Header: FC<HeaderProps> = ({ hreflogo, items, login }) => (
7+
const Header: FC<HeaderProps> = (props) => (
88
<React.Fragment>
99
<Hidden smDown>
10-
<HeaderDesktop hreflogo={hreflogo} items={items} login={login} />
10+
<HeaderDesktop {...props} />
1111
</Hidden>
1212
<Hidden mdUp>
13-
<HeaderMobile hreflogo={hreflogo} items={items} login={login} />
13+
<HeaderMobile {...props} />
1414
</Hidden>
1515
</React.Fragment>
1616
)

‎src/components/organisms/Header/HeaderDesktop.tsx‎

Lines changed: 69 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
import React, { FC } from 'react'
2-
import { AppBar, Toolbar } from '@material-ui/core'
2+
import {
3+
AppBar, Grid, ListItemIcon, Toolbar,
4+
} from '@material-ui/core'
35
import { makeStyles, Theme } from '@material-ui/core/styles'
46
import { NavLink } from 'react-router-dom'
57
import Typography from '@material-ui/core/Typography'
8+
import { ActionHeaderItemProps, HeaderProps, NavItemProps } from './HeaderProps'
69
import { LogoNavbar } from '../../atoms'
710
import { colors, fonts, globalConstants } from '../../../theme'
8-
import { HeaderProps, HeaderItemProps } from './HeaderProps'
911
import { removeEmptySpaces } from '../../../utils'
1012

1113
const useStyles = makeStyles((theme: Theme) => ({
1214
activeNavlink: {
1315
color: `${colors.white} !important`,
1416
fontWeight: fonts.weight.medium,
1517
},
16-
itemsContainer: {
17-
display: 'flex',
18-
},
19-
loginContainer: {
20-
display: 'flex',
21-
marginLeft: 'auto',
22-
},
2318
navLink: {
2419
alignItems: 'center',
2520
color: colors.white,
@@ -43,38 +38,78 @@ const useStyles = makeStyles((theme: Theme) => ({
4338
},
4439
}))
4540

46-
const HeaderDesktop: FC<HeaderProps> = ({ hreflogo, items, login }) => {
41+
const HeaderDesktop: FC<HeaderProps> = ({
42+
hreflogo, itemsStart, itemsEnd, login,
43+
}) => {
4744
const classes = useStyles()
4845
const Login = login
4946

5047
return (
5148
<AppBar position="fixed" className={classes.root}>
5249
<Toolbar>
53-
<NavLink to={hreflogo}>
54-
<LogoNavbar />
55-
</NavLink>
56-
<div className={classes.itemsContainer}>
57-
{
58-
!!items.length
59-
&& items.map((navItem: HeaderItemProps) => (
60-
<Typography
61-
className={classes.navLinkContainer}
62-
key={`hi-${removeEmptySpaces(navItem.title)}`}
63-
>
64-
<NavLink
65-
className={classes.navLink}
66-
activeClassName={classes.activeNavlink}
67-
{...navItem}
50+
<Grid
51+
container
52+
>
53+
<Grid item xs={1}>
54+
<NavLink to={hreflogo}>
55+
<LogoNavbar />
56+
</NavLink>
57+
</Grid>
58+
<Grid
59+
item
60+
xs={6}
61+
xl={8}
62+
container
63+
justify="flex-start"
64+
>
65+
{
66+
!!itemsStart?.length
67+
&& itemsStart.map((navItem: NavItemProps) => (
68+
<Typography
69+
className={classes.navLinkContainer}
70+
key={`hi-${removeEmptySpaces(navItem.title)}`}
6871
>
69-
{navItem.title}
70-
</NavLink>
71-
</Typography>
72-
))
73-
}
74-
</div>
75-
<div className={classes.loginContainer}>
76-
<Login />
77-
</div>
72+
<NavLink
73+
className={classes.navLink}
74+
activeClassName={classes.activeNavlink}
75+
{...navItem}
76+
>
77+
{navItem.title}
78+
</NavLink>
79+
</Typography>
80+
))
81+
}
82+
</Grid>
83+
<Grid
84+
item
85+
xs={3}
86+
xl={2}
87+
container
88+
justify="flex-end"
89+
alignContent="center"
90+
>
91+
{
92+
!!itemsEnd?.length
93+
&& itemsEnd.map(({ icon, ...rest }: ActionHeaderItemProps) => (
94+
<ListItemIcon key={icon.key} {...rest}>
95+
{icon}
96+
</ListItemIcon>
97+
))
98+
}
99+
</Grid>
100+
<Grid
101+
item
102+
container
103+
xs={2}
104+
xl={1}
105+
justify="flex-end"
106+
alignContent="center"
107+
>
108+
<div>
109+
<Login />
110+
</div>
111+
</Grid>
112+
</Grid>
78113
</Toolbar>
79114
</AppBar>
80115
)

‎src/components/organisms/Header/HeaderMobile.tsx‎

Lines changed: 45 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,20 @@ import {
44
Divider,
55
Drawer, Toolbar,
66
IconButton, List, ListItem,
7-
ListItemText, ListItemIcon,
7+
ListItemText, ListItemIcon, Grid,
88
} from '@material-ui/core'
99
import { NavLink } from 'react-router-dom'
1010
import MenuIcon from '@material-ui/icons/Menu'
1111
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
1212
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
13+
import { ActionHeaderItemProps, HeaderProps, NavItemProps } from './HeaderProps'
1314
import { colors, globalConstants } from '../../../theme'
1415
import { LogoNavbar } from '../../atoms'
15-
import { HeaderProps, HeaderItemProps } from './HeaderProps'
1616
import { removeEmptySpaces } from '../../../utils'
1717

1818
const drawerWidth = 240
1919

2020
const useStyles = makeStyles((theme: Theme) => createStyles({
21-
loginContainer: {
22-
display: 'flex',
23-
marginLeft: 'auto',
24-
},
2521
drawerHeader: {
2622
display: 'flex',
2723
alignItems: 'center',
@@ -66,12 +62,12 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
6662
},
6763
}))
6864

69-
const HeaderMobile: FC<HeaderProps> = ({ hreflogo, items, login }) => {
65+
const HeaderMobile: FC<HeaderProps> = ({
66+
hreflogo, itemsStart, itemsEnd, login: Login,
67+
}) => {
7068
const classes = useStyles()
7169
const [open, setOpen] = useState(false)
7270

73-
const Login = login
74-
7571
const toggleDrawer = (isOpen: boolean) => (
7672
event: React.KeyboardEvent | React.MouseEvent,
7773
): void => {
@@ -98,21 +94,45 @@ const HeaderMobile: FC<HeaderProps> = ({ hreflogo, items, login }) => {
9894
>
9995
<Toolbar>
10096
{!open && (
101-
<React.Fragment>
102-
<IconButton
103-
color="inherit"
104-
aria-label="open drawer"
105-
onClick={toggleDrawer(true)}
97+
<Grid container>
98+
<Grid item xs={1}>
99+
<IconButton
100+
color="inherit"
101+
aria-label="open drawer"
102+
onClick={toggleDrawer(true)}
103+
>
104+
<MenuIcon />
105+
</IconButton>
106+
</Grid>
107+
<Grid item xs={3}>
108+
<NavLink to={hreflogo}>
109+
<LogoNavbar />
110+
</NavLink>
111+
</Grid>
112+
<Grid
113+
item
114+
md={6}
115+
sm={5}
116+
xs={4}
117+
container
118+
justify="flex-end"
119+
alignContent="center"
106120
>
107-
<MenuIcon />
108-
</IconButton>
109-
<NavLink to={hreflogo}>
110-
<LogoNavbar />
111-
</NavLink>
112-
<div className={classes.loginContainer}>
113-
<Login />
114-
</div>
115-
</React.Fragment>
121+
{
122+
!!itemsEnd?.length
123+
&& itemsEnd.map(({ icon, ...rest }: ActionHeaderItemProps) => (
124+
<ListItemIcon key={icon.key} {...rest}>
125+
{icon}
126+
</ListItemIcon>
127+
))
128+
}
129+
</Grid>
130+
<Grid item md={2} sm={3} xs={4} container justify="flex-end" alignContent="center">
131+
<div>
132+
<Login />
133+
</div>
134+
</Grid>
135+
</Grid>
116136
)}
117137
</Toolbar>
118138
</AppBar>
@@ -133,8 +153,8 @@ const HeaderMobile: FC<HeaderProps> = ({ hreflogo, items, login }) => {
133153
<Divider />
134154
<List>
135155
{
136-
!!items.length
137-
&& items.map((headerItem: HeaderItemProps) => (
156+
!!itemsStart?.length
157+
&& itemsStart.map((headerItem: NavItemProps) => (
138158
<ListItem
139159
button
140160
key={`him-${removeEmptySpaces(headerItem.title)}`}

‎src/components/organisms/Header/HeaderProps.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { NavLinkProps } from 'react-router-dom'
2-
import { ReactElement } from 'react'
2+
import { HTMLAttributes, ReactElement } from 'react'
33

44
export interface HeaderProps {
55
hreflogo: string
6-
items: HeaderItemProps[]
6+
itemsStart: NavItemProps[]
7+
itemsEnd?: ActionHeaderItemProps[]
78
login: React.ElementType
89
}
910

10-
export interface HeaderItemProps extends NavLinkProps {
11+
export type NavItemProps = NavLinkProps & NavHeaderItemProps
12+
13+
export type NavHeaderItemProps = {
1114
icon?: ReactElement
1215
title: string
1316
}
17+
18+
export type ActionHeaderItemProps = {
19+
icon: ReactElement
20+
} & Partial<HTMLAttributes<HTMLElement>>

0 commit comments

Comments
 (0)