header responsive and drawer

CustomerWebApp/package.json

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

CustomerWebApp/src/components/Headers/MainHeader/MainHeader.js

@@ -1,16 +1,46 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+// /* eslint-disable react-hooks/exhaustive-deps */
-import { AppBar, Box, Button, Divider, Grid, IconButton, Toolbar, Typography } from "@material-ui/core";
+
+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 useStyles = (theme) => ({
-  const classes = useStyle();
+  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="130px" height="100%" />
-                <LogoHorizontal width="100px" />
+            </Box>
-              </IconButton>
+            <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>
+            </Hidden>
-            <Box display="flex" flexDirection="row" className={classes.loginView} mr={3}>
+            <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

CustomerWebApp/src/components/HomeScreen/SearchContainer/SearchContainer.js

@@ -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} />
+                  <InputBase
-                  <Button onClick={props.toggleModal} size="large" color="primary" className={classes.rightBtn}>
+                    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>
               )}

CustomerWebApp/src/configuration/configurataion.js

@@ -1,5 +1,6 @@
-const SERVER_URL = "http://192.168.43.245:8000/";
+const SERVER_URL = "http://10.97.28.31:8000/";
-const WS_SERVER_URL = "ws://192.168.43.245:8000/";
+const WS_SERVER_URL = "ws://10.97.28.31:8000/";
-const GOOGLE_CLIENT_ID = "94983896797-s9qpbnjj4fg5b9fa35m25bm80h1mouaf.apps.googleusercontent.com";
+const GOOGLE_CLIENT_ID =
+  "967541328677-ge2hpr0n095d0nro56kot0t4q388dsll.apps.googleusercontent.com";
 
 export { SERVER_URL, WS_SERVER_URL, GOOGLE_CLIENT_ID };

CustomerWebApp/src/screens/Home/index.js

@@ -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`
@@ -12,7 +18,7 @@ const CATEGORIES = gql`
 
 function Home() {
   const { data, loading } = useQuery(CATEGORIES);
-  const {isOpen, toggleModal} = useFilterModal()  
+  const { isOpen, toggleModal } = useFilterModal();
 
   const sections = [
     {
@@ -27,7 +33,7 @@ function Home() {
 
   const restaurantSections = sections.map((sec) => ({
     ...sec,
-    ...data
+    ...data,
   }));
 
   return (

CustomerWebApp/src/screens/Registration/Login/Login.js

@@ -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)}>
+        <Grid
-          <FacebookLogin
+          container
-            appId="487943819244563"
+          item
-            fields="name,email,picture"
+          xs={12}
-            callback={responseFacebook}
+          direction="column"
-            render={(renderProps) => (
+          className={clsx(classes.width100, classes.bottomView)}
-              <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>
-            )}
-          />
           <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"