first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,375 @@
|
||||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Box } from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Button from "@mui/material/Button";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import SendIcon from "@mui/icons-material/Send";
|
||||
import styles from "@/components/Email/LeftSidebar.module.css";
|
||||
import Badge from "@mui/material/Badge";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
const RichTextEditor = dynamic(() => import("@mantine/rte"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
// Compose Modal
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
||||
"& .MuiDialogContent-root": {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
"& .MuiDialogActions-root": {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
function BootstrapDialogTitle(props) {
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
}
|
||||
|
||||
BootstrapDialogTitle.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
// End Compose Modal
|
||||
|
||||
const LeftSidebar = () => {
|
||||
const router = useRouter();
|
||||
|
||||
// Compose modal
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get("email"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
};
|
||||
// End Compose Modal
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={handleClickOpen}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
padding: "12px 20px",
|
||||
mb: "30px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Compose
|
||||
</Button>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontSize: "13px",
|
||||
color: "#A9A9C8",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
mailbox
|
||||
</Typography>
|
||||
|
||||
{/* Nav */}
|
||||
<ul className={styles.leftNav}>
|
||||
<li
|
||||
className={router.pathname == "/email/inbox" ? styles.active : ""}
|
||||
>
|
||||
<Link href="/email/inbox">
|
||||
<span>
|
||||
<i className="ri-mail-line"></i> Inbox
|
||||
</span>
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="primary"
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "15px",
|
||||
}}
|
||||
className="float-right right-10px for-dark-text-white"
|
||||
></Badge>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.FormDataactive : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-star-fill"></i> Important
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-time-line"></i> Snooozed
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-file-text-line"></i> Draft
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="info"
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "15px",
|
||||
}}
|
||||
className="float-right right-10px for-dark-text-white"
|
||||
></Badge>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-send-plane-2-line"></i> Sent Mail
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-error-warning-line"></i> Spam
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="danger"
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "15px",
|
||||
color: "#fff",
|
||||
}}
|
||||
className="float-right right-10px for-dark-text-white"
|
||||
></Badge>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-delete-bin-line"></i> Trash
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontSize: "13px",
|
||||
color: "#A9A9C8",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
labels
|
||||
</Typography>
|
||||
|
||||
{/* Nav */}
|
||||
<ul className={styles.leftNav}>
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<span>
|
||||
<i className="ri-price-tag-3-line"></i> Personal
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Company
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Wallet Balance
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Friends
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Family
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
{/* Compose Modal */}
|
||||
<BootstrapDialog
|
||||
onClose={handleClose}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
background: "#EDEFF5",
|
||||
borderRadius: "8px",
|
||||
padding: "15px 20px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
New Message
|
||||
</Typography>
|
||||
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
onClick={handleClose}
|
||||
className="modal-close"
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
autoComplete="to"
|
||||
name="to"
|
||||
required
|
||||
fullWidth
|
||||
id="to"
|
||||
label="To"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
autoComplete="subject"
|
||||
name="subject"
|
||||
required
|
||||
fullWidth
|
||||
id="subject"
|
||||
label="Subject"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<RichTextEditor
|
||||
id="rte"
|
||||
controls={[
|
||||
["bold", "italic", "underline", "link", "image"],
|
||||
["unorderedList", "h1", "h2", "h3"],
|
||||
["sup", "sub"],
|
||||
["alignLeft", "alignCenter", "alignRight"],
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} textAlign="end">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 20px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
<SendIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className="mr-5px"
|
||||
/>{" "}
|
||||
Send
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</BootstrapDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeftSidebar;
|
||||
Reference in New Issue
Block a user