Skip to content

Commit

Permalink
header responsive and drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
@MuhammadAdnan111
MuhammadAdnan111 committed Sep 13, 2023
1 parent f5110f2 commit 7e0c6b2
Show file tree
Hide file tree
Showing 8 changed files with 15,211 additions and 9,836 deletions.
18,158 changes: 11,354 additions & 6,804 deletions CustomerWebApp/package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions CustomerWebApp/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"graphql": "^15.5.1",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-apple-signin-auth": "^1.0.9",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-geocode": "^0.2.3",
Expand Down
136 changes: 118 additions & 18 deletions CustomerWebApp/src/components/Headers/MainHeader/MainHeader.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,46 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { AppBar, Box, Button, Divider, Grid, IconButton, Toolbar, Typography } from "@material-ui/core";
// /* eslint-disable react-hooks/exhaustive-deps */

import React, { useCallback, useContext, useState } from "react";
import {
AppBar,
Box,
Button,
Divider,
Drawer,
Grid,
Hidden,
IconButton,
List,
ListItem,
ListItemText,
Toolbar,
Typography,
withStyles,
} from "@material-ui/core";
import ShoppingCartOutlinedIcon from "@material-ui/icons/ShoppingCartOutlined";
import MenuIcon from "@material-ui/icons/Menu";
import clsx from "clsx";
import React, { useCallback, useContext } from "react";
import { Link as RouterLink, useHistory, useLocation } from "react-router-dom";
import LogoHorizontal from "../../../assets/icons/LogoHorizontal";
import { UserContext } from "../../../context/User";
import { HEADER_NAV } from "../../../utils/constant";
import useStyle from "./styles";

function MainHeader() {
const classes = useStyle();
const useStyles = (theme) => ({
drawerPaper: {
width: 300,
},
selectedListItem: {
backgroundColor: "#febb2c",
"&:hover": {
backgroundColor: "#B1821E",
},
},
});

function MainHeader({ classes }) {
const headerClasses = useStyle();
const mobileClasses = useStyles(); // Mobile-specific styles
const navigation = useHistory();
const location = useLocation();
const urlPath = location.pathname;
Expand All @@ -24,16 +54,22 @@ function MainHeader() {
}
}, [isLoggedIn]);

const [sidebarOpen, setSidebarOpen] = useState(false);

const toggleSidebar = () => {
setSidebarOpen(!sidebarOpen);
};

return (
<Grid container item xs={12}>
<Grid item xs={1} md={1} />
<Grid container item xs={9}>
<AppBar position="static" color="transparent" elevation={0}>
<Toolbar disableGutters>
<Box display="flex" alignItems="center" flexGrow={1}>
<IconButton disableRipple edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<LogoHorizontal width="100px" />
</IconButton>
<LogoHorizontal width="130px" height="100%" />
</Box>
<Hidden smDown>
{HEADER_NAV.map((element) => {
const isSelected = urlPath === element.navigate;
return (
Expand All @@ -44,23 +80,35 @@ function MainHeader() {
key={element.id}
color="inherit"
classes={{
text: classes.MR2,
text: headerClasses.MR2,
}}
>
<Typography
variant="subtitle2"
color={"textPrimary"}
className={clsx({ [classes.unSelectedMenu]: !isSelected, [classes.selectedMenu]: isSelected })}
className={clsx({
[headerClasses.unSelectedMenu]: !isSelected,
[headerClasses.selectedMenu]: isSelected,
})}
>
{element.name}
</Typography>
</Button>
);
})}
</Box>
<Box display="flex" flexDirection="row" className={classes.loginView} mr={3}>
</Hidden>
<Box
display="flex"
flexDirection="row"
className={headerClasses.loginView}
mr={3}
>
<Button color="inherit">
<Typography variant="body2" color={"textPrimary"} className={classes.upperCase}>
<Typography
variant="body2"
color={"textPrimary"}
className={headerClasses.upperCase}
>
EN
</Typography>
</Button>
Expand All @@ -72,7 +120,11 @@ function MainHeader() {
authorization();
}}
>
<Typography variant="body2" color={"textPrimary"} className={classes.upperCase}>
<Typography
variant="body2"
color={"textPrimary"}
className={headerClasses.upperCase}
>
{isLoggedIn ? "Logout" : "Login"}
</Typography>
</Button>
Expand All @@ -82,28 +134,76 @@ function MainHeader() {
color="primary"
size="medium"
classes={{
containedPrimary: classes.cartBtn,
containedPrimary: headerClasses.cartBtn,
}}
>
<ShoppingCartOutlinedIcon />
<Box bgcolor="info.main" borderRadius={20} className={classes.tagView}>
<Box
bgcolor="info.main"
borderRadius={20}
className={headerClasses.tagView}
>
<Typography
component="p"
color="textPrimary"
variant="subtitle2"
classes={{
subtitle2: classes.tagIcon,
subtitle2: headerClasses.tagIcon,
}}
>
2
</Typography>
</Box>
</Button>
<Hidden mdUp>
<IconButton
edge="end"
className={clsx(
headerClasses.menuButton,
mobileClasses.menuButtonMobile
)}
color="inherit"
aria-label="menu"
onClick={toggleSidebar}
>
<MenuIcon style={{ color: "white" }} />
</IconButton>
</Hidden>
</Toolbar>
</AppBar>
<Hidden mdUp>
{/* Customize the Drawer */}
<Drawer
anchor="right"
open={sidebarOpen}
onClose={toggleSidebar}
classes={{
paper: classes.drawerPaper, // Apply custom styles to the Drawer
}}
>
<List>
{HEADER_NAV.map((element) => (
<ListItem
button
component={RouterLink}
to={element.navigate}
key={element.id}
onClick={toggleSidebar}
className={
urlPath === element.navigate
? classes.selectedListItem
: null
} // Apply selected style
>
<ListItemText primary={element.name} />
</ListItem>
))}
</List>
</Drawer>
</Hidden>
</Grid>
</Grid>
);
}

export default React.memo(MainHeader);
export default withStyles(useStyles)(React.memo(MainHeader)); // Apply custom styles using withStyles
30 changes: 25 additions & 5 deletions CustomerWebApp/src/components/HomeScreen/SearchContainer/SearchContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import useStyle from "./styles";

function SearchContainer(props) {
const classes = useStyle();

return (
<Grid container className={classes.mainContainer}>
<Grid container item xs={12} className={classes.headingContainer}>
Expand All @@ -18,18 +18,38 @@ function SearchContainer(props) {
<Grid container item xs={10} sm={10} md={9} lg={8}>
<Grid item xs={12} sm={9}>
{props.showSearch ? (
<Paper component="form" className={clsx(classes.searchContainer, classes.bottomHeight)}>
<Paper
component="form"
className={clsx(
classes.searchContainer,
classes.bottomHeight
)}
>
<SearchIcon color="action" />
<InputBase fullWidth color="primary" placeholder="Search" className={classes.input} />
<Button onClick={props.toggleModal} size="large" color="primary" className={classes.rightBtn}>
<InputBase
fullWidth
color="primary"
placeholder="Search"
className={classes.input}
/>
<Button
onClick={props.toggleModal}
size="large"
color="primary"
className={classes.rightBtn}
>
<TuneIcon color="primary" />
<Typography variant="body1" color="primary">
Filters
</Typography>
</Button>
</Paper>
) : (
<Typography variant="h3" color="textPrimary" className={classes.bottomHeight}>
<Typography
variant="h3"
color="textPrimary"
className={classes.bottomHeight}
>
{props.heading ?? ""}
</Typography>
)}
Expand Down
7 changes: 4 additions & 3 deletions CustomerWebApp/src/configuration/configurataion.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const SERVER_URL = "http://192.168.43.245:8000/";
const WS_SERVER_URL = "ws://192.168.43.245:8000/";
const GOOGLE_CLIENT_ID = "94983896797-s9qpbnjj4fg5b9fa35m25bm80h1mouaf.apps.googleusercontent.com";
const SERVER_URL = "http://10.97.28.31:8000/";
const WS_SERVER_URL = "ws://10.97.28.31:8000/";
const GOOGLE_CLIENT_ID =
"967541328677-ge2hpr0n095d0nro56kot0t4q388dsll.apps.googleusercontent.com";

export { SERVER_URL, WS_SERVER_URL, GOOGLE_CLIENT_ID };
18 changes: 12 additions & 6 deletions CustomerWebApp/src/screens/Home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,22 @@ import { Grid, LinearProgress, Typography } from "@material-ui/core";
import React, { useEffect } from "react";
import { gql, useQuery } from "@apollo/client";
import { categories } from "../../apollo/graphQL";
import { RestaurantRow, SearchContainer, Footer, PaymentModal, FilterModal } from "../../components";
import {
RestaurantRow,
SearchContainer,
Footer,
PaymentModal,
FilterModal,
} from "../../components";
import useFilterModal from "../../hooks/useFilterModal";

const CATEGORIES = gql`
${categories}
`;

function Home() {
const { data, loading} = useQuery(CATEGORIES);
const {isOpen, toggleModal} = useFilterModal()
const { data, loading } = useQuery(CATEGORIES);
const { isOpen, toggleModal } = useFilterModal();

const sections = [
{
Expand All @@ -27,14 +33,14 @@ function Home() {

const restaurantSections = sections.map((sec) => ({
...sec,
...data
...data,
}));

return (
<Grid container>
{<FilterModal isOpen={isOpen} toggleModal={toggleModal}/>}
{<FilterModal isOpen={isOpen} toggleModal={toggleModal} />}
<Grid container item>
<SearchContainer showSearch toggleModal={toggleModal}/>
<SearchContainer showSearch toggleModal={toggleModal} />
</Grid>
<Grid container item>
{loading ? (
Expand Down
Loading

0 comments on commit 7e0c6b2

Please sign in to comment.