steve
/
keepyourmouthshut
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

header responsive and drawer

This commit is contained in:
Muhammad Adnan 2023-09-13 15:52:31 +05:00
parent f5110f2aef
commit 7e0c6b23ed
8 changed files with 15319 additions and 9944 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18366
CustomerWebApp/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
CustomerWebApp/package.json
View File

@ -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",

136
CustomerWebApp/src/components/Headers/MainHeader/MainHeader.js
View File

@ -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;
@ -24,6 +54,12 @@ function MainHeader() {
}
}, [isLoggedIn]);
const [sidebarOpen, setSidebarOpen] = useState(false);
const toggleSidebar = () => {
setSidebarOpen(!sidebarOpen);
};
return (
<Grid container item xs={12}>
<Grid item xs={1} md={1} />
@ -31,9 +67,9 @@ function MainHeader() {
<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 (
@ -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>
@ -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>
@ -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
CustomerWebApp/src/components/HomeScreen/SearchContainer/SearchContainer.js
View File

@ -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}>
@ -18,10 +18,26 @@ 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
@ -29,7 +45,11 @@ function SearchContainer(props) {
</Button>
</Paper>
) : (
<Typography variant="h3" color="textPrimary" className={classes.bottomHeight}>
<Typography
variant="h3"
color="textPrimary"
className={classes.bottomHeight}
>
{props.heading ?? ""}
</Typography>
)}

7
CustomerWebApp/src/configuration/configurataion.js
View File

@ -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
CustomerWebApp/src/screens/Home/index.js
View File

@ -3,7 +3,13 @@ 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`
@ -11,8 +17,8 @@ const CATEGORIES = gql`
`;
function Home() {
const { data, loading} = useQuery(CATEGORIES);
const {isOpen, toggleModal} = useFilterModal()
const { data, loading } = useQuery(CATEGORIES);
const { isOpen, toggleModal } = useFilterModal();
const sections = [
{
@ -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 ? (

68
CustomerWebApp/src/screens/Registration/Login/Login.js
View File

@ -11,6 +11,7 @@ import { GetStartedWrapper } from "../../../components";
import { useRegistration } from "../../../hooks";
import useStyles from "./styles";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
import AppleSignIn from "react-apple-signin-auth";
function Login() {
const classes = useStyles();
@ -23,42 +24,24 @@ function Login() {
return (
<GetStartedWrapper>
<Grid container item xs={12} direction="row" justifyContent="space-between" className={classes.height100}>
<Grid
container
item
xs={12}
direction="row"
justifyContent="space-between"
className={classes.height100}
>
<Grid item xs={12} className={clsx(classes.width100, classes.logoView)}>
<img className={classes.imgContainer} src={Logo} alt="Logo" />
</Grid>
<Grid container item xs={12} direction="column" className={clsx(classes.width100, classes.bottomView)}>
<FacebookLogin
appId="487943819244563"
fields="name,email,picture"
callback={responseFacebook}
render={(renderProps) => (
<Button
variant="contained"
size="large"
disableElevation
fullWidth
disabled={loading || renderProps.disabled}
className={classes.loginBtn}
startIcon={<FacebookIcon />}
onClick={() => renderProps.onClick()}
>
{loading && loginButton === "FACEBOOK" ? (
<CircularProgress color="secondary" size={24} thickness={5} />
) : (
<Typography
variant="button"
color="textSecondary"
align="left"
al
className={clsx(classes.font700, classes.btnText)}
>
Continue with Facebook
</Typography>
)}
</Button>
)}
/>
<Grid
container
item
xs={12}
direction="column"
className={clsx(classes.width100, classes.bottomView)}
>
<Button
variant="contained"
size="large"
@ -85,24 +68,7 @@ function Login() {
</Typography>
)}
</Button>
<Button
variant="contained"
size="large"
disableElevation
fullWidth
disabled={loading}
className={classes.loginBtn}
startIcon={<AppleIcon />}
>
<Typography
variant="button"
color="textSecondary"
align="left"
className={clsx(classes.font700, classes.btnText)}
>
Continue With Apple
</Typography>
</Button>
<Button
component={RouterLink}
to="/Signup"

6637
CustomerWebApp/yarn.lock
View File

File diff suppressed because it is too large Load Diff