Skip to content

Commit 9559372

Browse files
ujjavaldesai07ujjavaldesai07
committed
Redesigned navbar for mobile device
1 parent b8816b6 commit 9559372

File tree

2 files changed

+94
-93
lines changed

2 files changed

+94
-93
lines changed

‎client/src/components/routes/navbar/navBar.js

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ const NavBar = props => {
200200
};
201201

202202
const handleMobileSearchClose = () => {
203+
log.info("handleMobileSearchClose is invoked.....")
203204
setMobileSearchState(false)
204205
}
205206

@@ -209,7 +210,9 @@ const NavBar = props => {
209210

210211
const renderMobileSearchInputField = () => {
211212
if (mobileSearchState) {
212-
return <SearchBar size="medium" handleClose={handleMobileSearchClose}/>
213+
return (
214+
<SearchBar size="medium" device="mobile" handleClose={handleMobileSearchClose}/>
215+
)
213216
}
214217
}
215218

@@ -249,25 +252,26 @@ const NavBar = props => {
249252
<Toolbar classes={{root: classes.toolBarRoot}}>
250253
<Grid container alignItems="center">
251254
<Hidden lgUp>
252-
<Grid item>
253-
<IconButton
254-
edge="start"
255-
className={classes.menuButton}
256-
color="inherit"
257-
aria-label="open drawer"
258-
onClick={handleSidebarOpen}>
259-
<MenuIcon fontSize="large"/>
260-
</IconButton>
261-
</Grid>
255+
{!mobileSearchState ?
256+
<Grid item>
257+
<IconButton
258+
edge="start"
259+
className={classes.menuButton}
260+
color="inherit"
261+
aria-label="open drawer"
262+
onClick={handleSidebarOpen}>
263+
<MenuIcon fontSize="large"/>
264+
</IconButton>
265+
</Grid> : null}
262266
</Hidden>
263267

264-
<Grid item>
268+
{!mobileSearchState ? <Grid item>
265269
<Link to="/">
266270
<Typography className={classes.title}>
267271
Shoppers
268272
</Typography>
269273
</Link>
270-
</Grid>
274+
</Grid> : null}
271275

272276
<div className={classes.growHalf}/>
273277

@@ -286,12 +290,12 @@ const NavBar = props => {
286290
</Hidden>
287291

288292
<Hidden smUp>
289-
<Grid item container justify="flex-end" xs={5}>
293+
{!mobileSearchState ? <Grid item container justify="flex-end" xs={5}>
290294
<IconButton onClick={handleMobileSearchOpen}
291295
edge="end">
292296
<SearchIcon fontSize="large"/>
293297
</IconButton>
294-
</Grid>
298+
</Grid> : null}
295299
{renderMobileSearchInputField()}
296300
</Hidden>
297301

@@ -309,7 +313,7 @@ const NavBar = props => {
309313

310314

311315
<Hidden smUp>
312-
<Grid item>
316+
{!mobileSearchState ? <Grid item>
313317
<IconButton
314318
aria-label="show more"
315319
aria-controls={mobileMenuId}
@@ -319,7 +323,7 @@ const NavBar = props => {
319323
edge="end">
320324
<MoreIcon fontSize="large"/>
321325
</IconButton>
322-
</Grid>
326+
</Grid> : null}
323327
</Hidden>
324328
</Grid>
325329
</Toolbar>

‎client/src/components/routes/navbar/searchBar.js

Lines changed: 73 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,93 @@
11
import React from 'react';
22
import TextField from '@material-ui/core/TextField';
33
import Autocomplete from '@material-ui/lab/Autocomplete';
4-
import useNavBarStyles from "../../../styles/materialUI/navBarStyles";
54
import CloseIcon from '@material-ui/icons/Close';
5+
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
6+
import {Grid} from "@material-ui/core";
7+
import SearchIcon from '@material-ui/icons/Search';
68

7-
export default function SearchBar(props) {
9+
function SearchBar(props) {
810
const [value, setValue] = React.useState(null);
9-
const classes = useNavBarStyles();
1011

1112
const handleClose = () => {
1213
if (props.handleClose) {
1314
props.handleClose();
1415
}
1516
}
1617

18+
const renderDesktopTextField = (params) => {
19+
return <TextField {...params} label="Search for products, brands and more" variant="outlined"/>
20+
}
21+
22+
const renderMobileTextField = (params) => {
23+
return (
24+
<TextField
25+
style={{position: "absolute", left: 0, top: 15}}
26+
label="Search for products, brands and more"
27+
variant="outlined"
28+
{...params}
29+
InputProps={{
30+
...params.InputProps,
31+
startAdornment: <ArrowBackIcon onClick={props.handleClose} fontSize="large"/>,
32+
endAdornment: <SearchIcon fontSize="large"/>
33+
}}
34+
/>
35+
)
36+
}
37+
1738
return (
18-
<Autocomplete
19-
value={value}
20-
autoHighlight
21-
onChange={(event, newValue) => {
22-
if (typeof newValue === 'string') {
23-
setValue({
24-
title: newValue,
25-
});
26-
} else if (newValue && newValue.inputValue) {
27-
// Create a new value from the user input
28-
setValue({
29-
title: newValue.inputValue,
30-
});
31-
} else {
32-
setValue(newValue);
33-
}
34-
}}
35-
selectOnFocus
36-
clearOnBlur
37-
handleHomeEndKeys
38-
closeIcon={<CloseIcon/>}
39-
id="free-solo-with-text-demo"
40-
options={top100Films}
41-
getOptionLabel={(option) => {
42-
// Value selected with enter, right from the input
43-
if (typeof option === 'string') {
44-
return option;
45-
}
46-
// Add "xxx" option created dynamically
47-
if (option.inputValue) {
48-
return option.inputValue;
49-
}
50-
// Regular option
51-
return option.title;
52-
}}
53-
renderOption={(option) => option.title}
54-
freeSolo
55-
fullWidth
56-
onClose={handleClose}
57-
size={props.size}
58-
classes={{root: classes.autoCompleteSearchBarRoot}}
59-
renderInput={(params) => (
60-
<TextField {...params} label="Search for products, brands and more" variant="outlined"/>
61-
)}
62-
/>
39+
<Grid container alignItems="center">
40+
<Autocomplete
41+
value={value}
42+
autoHighlight
43+
onChange={(event, newValue) => {
44+
if (typeof newValue === 'string') {
45+
setValue({
46+
title: newValue,
47+
});
48+
} else if (newValue && newValue.inputValue) {
49+
// Create a new value from the user input
50+
setValue({
51+
title: newValue.inputValue,
52+
});
53+
} else {
54+
setValue(newValue);
55+
}
56+
}}
57+
selectOnFocus
58+
clearOnBlur
59+
handleHomeEndKeys
60+
closeIcon={<CloseIcon/>}
61+
id="free-solo-with-text-demo"
62+
options={top100Films}
63+
getOptionLabel={(option) => {
64+
// Value selected with enter, right from the input
65+
if (typeof option === 'string') {
66+
return option;
67+
}
68+
// Add "xxx" option created dynamically
69+
if (option.inputValue) {
70+
return option.inputValue;
71+
}
72+
// Regular option
73+
return option.title;
74+
}}
75+
renderOption={(option) => option.title}
76+
freeSolo
77+
fullWidth
78+
onClose={handleClose}
79+
size={props.size}
80+
renderInput={(params) =>
81+
props.device ? renderMobileTextField(params): renderDesktopTextField(params)}
82+
/>
83+
</Grid>
6384
);
6485
}
6586

6687
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
6788
const top100Films = [
68-
{title: 'The Shawshank Redemption', year: 1994},
69-
{title: 'The Godfather', year: 1972},
70-
{title: 'The Godfather: Part II', year: 1974},
71-
{title: 'The Dark Knight', year: 2008},
72-
{title: '12 Angry Men', year: 1957},
73-
{title: "Schindler's List", year: 1993},
74-
{title: 'Léon: The Professional', year: 1994},
75-
{title: 'Like Stars on Earth', year: 2007},
76-
{title: 'Taxi Driver', year: 1976},
77-
{title: 'Lawrence of Arabia', year: 1962},
78-
{title: 'Double Indemnity', year: 1944},
79-
{title: 'Eternal Sunshine of the Spotless Mind', year: 2004},
80-
{title: 'Amadeus', year: 1984},
81-
{title: 'To Kill a Mockingbird', year: 1962},
82-
{title: 'Toy Story 3', year: 2010},
83-
{title: 'Logan', year: 2017},
84-
{title: 'Full Metal Jacket', year: 1987},
85-
{title: 'Dangal', year: 2016},
86-
{title: 'The Sting', year: 1973},
87-
{title: '2001: A Space Odyssey', year: 1968},
88-
{title: "Singin' in the Rain", year: 1952},
89-
{title: 'Toy Story', year: 1995},
90-
{title: 'Bicycle Thieves', year: 1948},
91-
{title: 'The Kid', year: 1921},
92-
{title: 'Inglourious Basterds', year: 2009},
93-
{title: 'Snatch', year: 2000},
94-
{title: '3 Idiots', year: 2009},
95-
{title: 'Monty Python and the Holy Grail', year: 1975},
89+
{title: 'Not Working Right Now', year: 1994},
90+
9691
];
92+
93+
export default SearchBar;

0 commit comments

Comments
 (0)