Page 346 - MDP2022-3

export default CreateClass;

import { Avatar, IconButton, MenuItem, Menu } from "@material-ui/core";
import { Add, Apps, Menu as MenuIcon } from "@material-ui/icons";

import React, { useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";

import { Link } from "react-router-dom";
import { useRecoilState } from "recoil";
import { auth, logout } from "../firebase";

import { createDialogAtom, joinDialogAtom } from "../utils/atoms";
import CreateClass from "./CreateClass";
import JoinClass from "./JoinClass";

import "./Navbar.css";

function Navbar() {
const [user, loading, error] = useAuthState(auth);
const [anchorEl, setAnchorEl] = useState(null);

const [createOpened, setCreateOpened] = useRecoilState(createDialogAtom);
const [joinOpened, setJoinOpened] = useRecoilState(joinDialogAtom);

const handleClick = (event) => {
setAnchorEl(event.currentTarget);

};

const handleClose = () => {
setAnchorEl(null);
};

return (

<>
<CreateClass />
<JoinClass />

<nav className="navbar">
<Link to="/">

<span className="logo">Ma:in</span>
</Link>
<div className="navbar__right">