Merge pull request #6 from jaison080/main

Added Navbar for Housing and modified the title and Navbar of Consultation to Rainbow

src/components/Profile/Tabs.js

@@ -6,7 +6,7 @@ import { ThemeProvider, createTheme } from '@mui/material';
 
 
 
-const profileTabs  = ['Posts', 'Followers', 'Following'];
+const profileTabs  = ['Posts','Bookings', 'Followers', 'Following'];
 
 function a11yProps(index) {
   return {

src/pages/booking/Navbar.js → src/components/consultation/Navbar.js

@@ -23,7 +23,7 @@ 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 Drawer from '../home/Drawer';
 import {useContext} from 'react';
 import UserContext from '@context/user/UserContext';
 
@@ -208,9 +208,9 @@ export default function PrimarySearchAppBar(props) {
             sx={{ display: {  sm: 'block' } }}
           >
 
-           <div className="rainbow-text"><strong>RAINBOW CONSULTATION</strong></div>
+           <div className="rainbow-text"><strong>RAINBOW</strong></div>
 
-          </Typography>
+          </Typography> 
 
           <Box sx={{ flexGrow: 1 }} />
           {!user ?<Button variant="outlined" color ="inherit" size = "large" onClick={signIn}>Sign In</Button> : 
@@ -232,13 +232,7 @@ export default function PrimarySearchAppBar(props) {
             </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>
+          <Button variant="text" color ="inherit" size = "large" >BOOKINGS</Button>
             <IconButton
               size="large"
               aria-label="show more"

src/components/home/Drawer.js

@@ -78,7 +78,7 @@ const Appdrawer = (props) => {
               <ListItemText primary= "Create Post" />
             </ListItem>
 
-            <ListItem button key="Consultation" sx = {{color: drawerElementColor[2]}} onClick= {()=>router.push('/booking')}>
+            <ListItem button key="Consultation" sx = {{color: drawerElementColor[2]}} onClick= {()=>router.push('/consultation')}>
               <ListItemIcon sx = {{color: drawerElementColor[2]}}>
                 <ConfirmationNumberIcon />
               </ListItemIcon>

src/components/housing/Navbar.js

@@ -0,0 +1,259 @@
+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 '../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</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' } }}>
+          <Button variant="text" color ="inherit" size = "large" >BOOKINGS</Button>
+            <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>
+  );
+}