-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from jaison080/main
Have added Navbar for all Pages - Create Post,Rainbow Consultation.Ha…
- Loading branch information
Showing
4 changed files
with
272 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,265 @@ | ||
| import * as React from 'react'; | ||
| import { styled, alpha } from '@mui/material/styles'; | ||
| import AppBar from '@mui/material/AppBar'; | ||
| import Box from '@mui/material/Box'; | ||
| import Toolbar from '@mui/material/Toolbar'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import InputBase from '@mui/material/InputBase'; | ||
| import Badge from '@mui/material/Badge'; | ||
| import MenuItem from '@mui/material/MenuItem'; | ||
| import Menu from '@mui/material/Menu'; | ||
| import MenuIcon from '@mui/icons-material/Menu'; | ||
| import SearchIcon from '@mui/icons-material/Search'; | ||
| import AccountCircle from '@mui/icons-material/AccountCircle'; | ||
| import MailIcon from '@mui/icons-material/Mail'; | ||
| import NotificationsIcon from '@mui/icons-material/Notifications'; | ||
| import MoreIcon from '@mui/icons-material/MoreVert'; | ||
| import { useRouter} from 'next/router'; | ||
| import { ThemeProvider, createTheme } from "@mui/material/styles"; | ||
| import { signOut } from "firebase/auth"; | ||
| import { db, auth } from "../../../utils/firebase"; | ||
| import { collection, addDoc, query, where , getDocs} from "firebase/firestore"; | ||
| import Button from '@mui/material/Button'; | ||
| import Avatar from '@mui/material/Avatar'; | ||
| import AddCircleIcon from '@mui/icons-material/AddCircle'; | ||
| import Drawer from '../../components/home/Drawer'; | ||
| import {useContext} from 'react'; | ||
| import UserContext from '@context/user/UserContext'; | ||
|
|
||
| import {signIn} from '@firebaseUtils/userControl'; | ||
|
|
||
| const theme = createTheme({ | ||
| //createTheme is a function that takes in a theme object and returns a ThemeProvider | ||
| palette: { | ||
| primary: { | ||
| light: "#ffffff", | ||
| main: "#f8f8ff", | ||
| dark: "#ffffff", | ||
| contrastText: "#000000" | ||
| }, | ||
| secondary: { | ||
| light: "#ffffff", | ||
| main: "#ffffff", | ||
| dark: "#ffffff", | ||
| contrastText: "#000000" | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| const Search = styled('div')(({ theme }) => ({ | ||
| position: 'relative', | ||
| borderRadius: theme.shape.borderRadius, | ||
| backgroundColor: alpha(theme.palette.common.white, 0.15), | ||
| '&:hover': { | ||
| backgroundColor: alpha(theme.palette.common.white, 0.25), | ||
| }, | ||
| marginRight: theme.spacing(2), | ||
| marginLeft: 0, | ||
| width: '100%', | ||
| [theme.breakpoints.up('sm')]: { | ||
| marginLeft: theme.spacing(3), | ||
| width: 'auto', | ||
| }, | ||
| })); | ||
|
|
||
| const SearchIconWrapper = styled('div')(({ theme }) => ({ | ||
| padding: theme.spacing(0, 2), | ||
| height: '100%', | ||
| position: 'absolute', | ||
| pointerEvents: 'none', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| })); | ||
|
|
||
| const StyledInputBase = styled(InputBase)(({ theme }) => ({ | ||
| color: 'inherit', | ||
| '& .MuiInputBase-input': { | ||
| padding: theme.spacing(1, 1, 1, 0), | ||
| // vertical padding + font size from searchIcon | ||
| paddingLeft: `calc(1em + ${theme.spacing(4)})`, | ||
| transition: theme.transitions.create('width'), | ||
| width: '100%', | ||
| [theme.breakpoints.up('md')]: { | ||
| width: '20ch', | ||
| }, | ||
| }, | ||
| })); | ||
|
|
||
|
|
||
|
|
||
| export default function PrimarySearchAppBar(props) { | ||
| const router = useRouter(); | ||
| const {user, userLoading, userError, logout} = useContext(UserContext); | ||
| const [anchorEl, setAnchorEl] = React.useState(null); | ||
| const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null); | ||
| const [userSignedIn, setUserSignedIn] = React.useState(false); | ||
| const [drawerOpen, setDrawerOpen] = React.useState(false); | ||
| const Offset = styled('div')(({ theme }) => theme.mixins.toolbar); | ||
|
|
||
| const isMenuOpen = Boolean(anchorEl); | ||
| const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); | ||
|
|
||
| const handleDrawerOpen = () => { | ||
| setDrawerOpen(true); | ||
| } | ||
| const handleProfileMenuOpen = (event) => { | ||
| setAnchorEl(event.currentTarget); | ||
| }; | ||
|
|
||
| const handleMobileMenuClose = () => { | ||
| setMobileMoreAnchorEl(null); | ||
| }; | ||
|
|
||
| const handleMenuClose = () => { | ||
| setAnchorEl(null); | ||
| handleMobileMenuClose(); | ||
| }; | ||
|
|
||
| const handleMobileMenuOpen = (event) => { | ||
| setMobileMoreAnchorEl(event.currentTarget); | ||
| }; | ||
|
|
||
| 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={()=>{router.push(`/u/${user.uid}`)}}>Profile</MenuItem> | ||
| <MenuItem onClick={ | ||
| ()=>{ | ||
| signOut(auth).then(() => { | ||
|
|
||
| handleMenuClose(); | ||
| })} | ||
| }>Log out</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 onClick={handleProfileMenuOpen}> | ||
| <IconButton | ||
| size="large" | ||
| aria-label="account of current user" | ||
| aria-controls="primary-search-account-menu" | ||
| aria-haspopup="true" | ||
| color="inherit" | ||
| > {user ? <Avatar alt={user.displayName} src={user.photoURL} /> : <AccountCircle /> } | ||
|
|
||
| </IconButton> | ||
| <p>{user?.displayName}</p> | ||
| </MenuItem> | ||
| </Menu> | ||
| ); | ||
|
|
||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <Box sx={{ flexGrow: 1 }}> | ||
|
|
||
| <AppBar position="fixed" > | ||
| <Toolbar> | ||
| <IconButton | ||
| size="large" | ||
| edge="start" | ||
| color="inherit" | ||
| aria-label="open drawer" | ||
| sx={{ mr: 2 }} | ||
| onClick={handleDrawerOpen} | ||
| > | ||
| <MenuIcon /> | ||
| </IconButton> | ||
|
|
||
| <Typography | ||
| variant="h6" | ||
|
|
||
| component="div" | ||
| sx={{ display: { sm: 'block' } }} | ||
| > | ||
|
|
||
| <div className="rainbow-text"><strong>RAINBOW CONSULTATION</strong></div> | ||
|
|
||
| </Typography> | ||
|
|
||
| <Box sx={{ flexGrow: 1 }} /> | ||
| {!user ?<Button variant="outlined" color ="inherit" size = "large" onClick={signIn}>Sign In</Button> : | ||
| <div> | ||
|
|
||
| <Box sx={{ display: { xs: 'none', md: 'flex' } }}> | ||
| <Button variant="text" color ="inherit" size = "large" >VIEW BOOKINGS</Button> | ||
|
|
||
| <IconButton | ||
| size="large" | ||
| edge="end" | ||
| aria-label="account of current user" | ||
| aria-controls={menuId} | ||
| aria-haspopup="true" | ||
| onClick={handleProfileMenuOpen} | ||
| color="inherit" | ||
| > | ||
| {user ? <Avatar alt={user.displayName} src={user.photoURL} /> : <AccountCircle /> } | ||
| </IconButton> | ||
| </Box> | ||
| <Box sx={{ display: { xs: 'flex', md: 'none' } }}> | ||
| <IconButton | ||
| size="large" | ||
| aria-label="show 4 new mails" | ||
| color="inherit" | ||
| onClick={()=>{router.push("/addBlog")}}> | ||
| <AddCircleIcon /> | ||
| </IconButton> | ||
| <IconButton | ||
| size="large" | ||
| aria-label="show more" | ||
| aria-controls={mobileMenuId} | ||
| aria-haspopup="true" | ||
| onClick={handleMobileMenuOpen} | ||
| color="inherit" | ||
| > | ||
| <MoreIcon /> | ||
| </IconButton> | ||
| </Box> | ||
| </div> | ||
| } | ||
| </Toolbar> | ||
| </AppBar> | ||
| <Offset /> | ||
| {renderMobileMenu} | ||
| {renderMenu} | ||
| </Box> | ||
| <Drawer setDrawerOpen = {setDrawerOpen} drawerOpen = {drawerOpen} /> | ||
|
|
||
| </ThemeProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters