Notes

export default function PrimarySearchAppBar() {
const [anchorEl, setAnchorEl] = React.useState(null);
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

const [tabData, setTabData] = React.useState(
<div>
<HomeTab />
</div>
);

const [cartArr, setCartArr] = useState([]);

const isMenuOpen = Boolean(anchorEl);
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};

const handleMobileMenuClose = () => {
setMobileMoreAnchorEl(null);
};

const handleMenuClose = () => {
setAnchorEl(null);
handleMobileMenuClose();
};

const handleMobileMenuOpen = (event) => {
setMobileMoreAnchorEl(event.currentTarget);
};

// const holdCart = [];
// const handleCart = (item)=>{
// // holdCart.push(item);
// const newItems = [...cartArr,item]
// setCartArr(newItems);
// // alert(holdCart.length)
// }

const handleCart = (cartitem) => {
const newItems = [...cartArr, cartitem];
setCartArr(newItems);
};
const handleTabs = (tabVal) => {
if (tabVal == "products") {
setTabData(
<div>
<Products onAddToCart={handleCart} />
</div>
);
}
if (tabVal == "offers") {
setTabData(
<div>
<Offers />
</div>
);
}
if (tabVal == "home") {
setTabData(
<div>
<HomeTab />
</div>
);
}
if (tabVal == "contactus") {
setTabData(<div>Contact Us</div>);
}
};

const searchedProduct = (val) => {
alert(val);
};

const menuId = "primary-search-account-menu";
const renderMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
id={menuId}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
</Menu>
);

const mobileMenuId = "primary-search-account-menu-mobile";
const renderMobileMenu = (
<Menu
anchorEl={mobileMoreAnchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
id={mobileMenuId}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={isMobileMenuOpen}
onClose={handleMobileMenuClose}
>
<MenuItem>
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
<MenuItem>
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
>
<Badge badgeContent={17} color="error">
<NotificationsIcon />
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle />
</IconButton>
<p>Profile</p>
</MenuItem>
</Menu>
);

return (
<div>
<Box sx={{ flexGrow: 1 }} className="fixed-top">
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
style={{ marginTop: "-9px" }}
>
<TemporaryDrawer />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ display: { xs: "none", sm: "block" } }}
className="me-5"
>
<BsFillBasketFill
className="mx-2"
style={{ marginTop: "-10px" }}
/>
E - KART
</Typography>
<BasicTabs onSelectTab={handleTabs} />
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search…"
inputProps={{ "aria-label": "search" }}
onChange={(e) => searchedProduct(e.target.value)}
/>
</Search>
<Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: { xs: "none", md: "flex" } }}>
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
className="mt-1"
>
<Badge badgeContent={cartArr.length} color="error">
<ShoppingCartIcon />
</Badge>
</IconButton>
<IconButton
size="large"
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
</Box>
<Box sx={{ display: { xs: "flex", md: "none" } }}>
<IconButton
size="large"
aria-label="show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon />
</IconButton>
</Box>
</Toolbar>
</AppBar>
{renderMobileMenu}
{renderMenu}
</Box>
{tabData}
</div>
);
}