first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,24 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styles from "@/components/_App/TopNavbar/CurrentDate.module.css";
|
||||
|
||||
function CurrentDate() {
|
||||
const [currentDate, setCurrentDate] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const options = { day: '2-digit', month: 'long', year: 'numeric' };
|
||||
const formatter = new Intl.DateTimeFormat('en-US', options);
|
||||
const date = new Date();
|
||||
setCurrentDate(formatter.format(date));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.currentDate}>
|
||||
<i className="ri-calendar-2-line"></i>
|
||||
{currentDate}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CurrentDate;
|
||||
@@ -0,0 +1,28 @@
|
||||
.currentDate {
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--primaryColor);
|
||||
padding: 10px 20px 10px 50px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.currentDate i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.currentDate {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .currentDate {
|
||||
border: 1px solid #373a40;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
import * as React from "react";
|
||||
import styles from "@/components/_App/TopNavbar/Email.module.css";
|
||||
import {
|
||||
IconButton,
|
||||
Button,
|
||||
Typography,
|
||||
Tooltip,
|
||||
Menu,
|
||||
Link,
|
||||
} from "@mui/material";
|
||||
import MailOutlineIcon from "@mui/icons-material/MailOutline";
|
||||
|
||||
const Email = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="Emails">
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
p: 0
|
||||
}}
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
className="ml-2 for-dark-email"
|
||||
>
|
||||
<MailOutlineIcon color="action" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
padding: "5px 20px 5px",
|
||||
borderRadius: "10px",
|
||||
boxShadow: "0px 10px 35px rgba(50, 110, 189, 0.2)",
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<Typography variant="h4">Emails</Typography>
|
||||
<Button variant="text">clear all</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.notification}>
|
||||
<div className={styles.notificationList}>
|
||||
<div className={styles.notificationListContent}>
|
||||
<img
|
||||
src="/images/user2.png"
|
||||
alt="User"
|
||||
width={35}
|
||||
height={35}
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Typography component="div">
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: "#5B5B98",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Invoices have been paid
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#8a8aab",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur...
|
||||
</Typography>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography sx={{ fontSize: "12px", color: "#A9A9C8", mt: 1 }}>
|
||||
1 min ago
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<div className={styles.notificationList}>
|
||||
<div className={styles.notificationListContent}>
|
||||
<img
|
||||
src="/images/user3.png"
|
||||
alt="User"
|
||||
width={35}
|
||||
height={35}
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Typography component="div">
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: "#5B5B98",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Allow users to like products
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#8a8aab",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Sed ut perspiciatis unde omnis iste natus...
|
||||
</Typography>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography sx={{ fontSize: "12px", color: "#A9A9C8", mt: 1 }}>
|
||||
2 min ago
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<div className={styles.notificationList}>
|
||||
<div className={styles.notificationListContent}>
|
||||
<img
|
||||
src="/images/user4.png"
|
||||
alt="User"
|
||||
width={35}
|
||||
height={35}
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Typography component="div">
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: "#5B5B98",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Sales report
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#8a8aab",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
At vero eos et accusamus et iusto odio...
|
||||
</Typography>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography sx={{ fontSize: "12px", color: "#A9A9C8", mt: 1 }}>
|
||||
3 min ago
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography component="div" textAlign="center">
|
||||
<Link
|
||||
href="/email/inbox/"
|
||||
underline="none"
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#757FEF",
|
||||
fontWeight: "500",
|
||||
mt: "10px",
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
View All{" "}
|
||||
<span className={styles.rightArrow}>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</span>
|
||||
</Link>
|
||||
</Typography>
|
||||
</div>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Email;
|
||||
@@ -0,0 +1,41 @@
|
||||
.header {
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header h4 {
|
||||
font-size: 16px;
|
||||
color: #030229;
|
||||
font-weight: 500;
|
||||
}
|
||||
.header button {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.notificationList {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #EEF0F7;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.notificationListContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.rightArrow {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
/* For Dark Mode */
|
||||
[class="dark"] .header {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
[class="dark"] .header h4 {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .notificationList {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import * as React from "react";
|
||||
import styles from "@/components/_App/TopNavbar/Notification.module.css";
|
||||
import {
|
||||
IconButton,
|
||||
Button,
|
||||
Typography,
|
||||
Tooltip,
|
||||
Menu,
|
||||
Link,
|
||||
Badge,
|
||||
} from "@mui/material";
|
||||
import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive";
|
||||
|
||||
const Notification = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="Notification">
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
p: 0
|
||||
}}
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
className="ml-2 for-dark-notification"
|
||||
>
|
||||
<Badge color="danger" variant="dot">
|
||||
<NotificationsActiveIcon color="action" />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
padding: "5px 20px 5px",
|
||||
borderRadius: "10px",
|
||||
boxShadow: "0px 10px 35px rgba(50, 110, 189, 0.2)",
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<Typography variant="h4">Notifications</Typography>
|
||||
<Button variant="text">clear all</Button>
|
||||
</div>
|
||||
<div className={styles.notification}>
|
||||
<div className={styles.notificationList}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: "#260944",
|
||||
fontWeight: "500",
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
8 Invoices have been paid
|
||||
</Typography>
|
||||
|
||||
<div className={styles.notificationListContent}>
|
||||
<img src="/images/pdf-icon.png" alt="PDF Icon" width={27} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#5B5B98",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Invoices have been paid to the company.
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography sx={{ fontSize: "12px", color: "#A9A9C8", mt: 1 }}>
|
||||
11:47 PM Wednesday
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<div className={styles.notificationList}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: "#260944",
|
||||
fontWeight: "500",
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
Create a new project for client
|
||||
</Typography>
|
||||
|
||||
<div className={styles.notificationListContent}>
|
||||
<img src="/images/man.png" alt="avatar Img" width={27} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#5B5B98",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
Allow users to like products in your WooCommerce
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography sx={{ fontSize: "12px", color: "#A9A9C8", mt: 1 }}>
|
||||
2:00 PM Wednesday
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<Typography component="div" textAlign="center">
|
||||
<Link
|
||||
href="/notification/"
|
||||
underline="none"
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#757FEF",
|
||||
fontWeight: "500",
|
||||
mt: "10px",
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
View All{" "}
|
||||
<span className={styles.rightArrow}>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</span>
|
||||
</Link>
|
||||
</Typography>
|
||||
</div>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
@@ -0,0 +1,64 @@
|
||||
.header {
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header h4 {
|
||||
font-size: 16px;
|
||||
color: #030229;
|
||||
font-weight: 500;
|
||||
}
|
||||
.header button {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.notificationList {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #EEF0F7;
|
||||
max-width: 255px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.notificationList::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 17px;
|
||||
background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
|
||||
box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.notificationListContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.rightArrow {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir=rtl] .notificationList {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
[dir=rtl] .notificationList::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* For Dark Mode */
|
||||
[class="dark"] .header {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
[class="dark"] .header h4 {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .notificationList {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
IconButton,
|
||||
Typography,
|
||||
Box,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Link,
|
||||
ListItemIcon,
|
||||
Divider,
|
||||
} from "@mui/material";
|
||||
import PersonIcon from "@mui/icons-material/Person";
|
||||
import Settings from "@mui/icons-material/Settings";
|
||||
import MailOutlineIcon from "@mui/icons-material/MailOutline";
|
||||
import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
|
||||
import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
|
||||
import Logout from "@mui/icons-material/Logout";
|
||||
|
||||
const Profile = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="Account settings">
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
sx={{ p: 0 }}
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
className="ml-2"
|
||||
>
|
||||
<Avatar
|
||||
src="/images/user1.png"
|
||||
alt="Adison Jeck"
|
||||
sx={{ width: 40, height: 40 }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
boxShadow: "0px 10px 35px rgba(50, 110, 189, 0.2)",
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
className="for-dark-top-navList"
|
||||
>
|
||||
<MenuItem>
|
||||
<Avatar src="/images/user1.png" className="mr-1" />
|
||||
<Box>
|
||||
<Typography sx={{ fontSize: "11px", color: "#757FEF" }}>
|
||||
Admin
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
color: "#260944",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Adison Jeck
|
||||
</Typography>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<MenuItem>
|
||||
<ListItemIcon sx={{ mr: "-8px", mt: "-3px" }}>
|
||||
<PersonIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Link
|
||||
href="/pages/profile/"
|
||||
fontSize="13px"
|
||||
color="inherit"
|
||||
underline="none"
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem>
|
||||
<ListItemIcon sx={{ mr: "-8px", mt: "-3px" }}>
|
||||
<MailOutlineIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Link
|
||||
href="/email/inbox/"
|
||||
fontSize="13px"
|
||||
color="inherit"
|
||||
underline="none"
|
||||
>
|
||||
Inbox
|
||||
</Link>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem>
|
||||
<ListItemIcon sx={{ mr: "-8px", mt: "-3px" }}>
|
||||
<ChatBubbleOutlineIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Link
|
||||
href="/apps/chat/"
|
||||
fontSize="13px"
|
||||
color="inherit"
|
||||
underline="none"
|
||||
>
|
||||
Chat
|
||||
</Link>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem>
|
||||
<ListItemIcon sx={{ mr: "-8px", mt: "-3px" }}>
|
||||
<Settings fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Link
|
||||
href="/settings/account/"
|
||||
fontSize="13px"
|
||||
color="inherit"
|
||||
underline="none"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem>
|
||||
<ListItemIcon sx={{ mr: "-8px", mt: "-3px" }}>
|
||||
<AttachMoneyIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Link
|
||||
href="/pages/pricing/"
|
||||
fontSize="13px"
|
||||
color="inherit"
|
||||
underline="none"
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
</MenuItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<MenuItem>
|
||||
<ListItemIcon sx={{ mr: "-8px", mt: "-3px" }}>
|
||||
<Logout fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
<Link
|
||||
href="/authentication/logout/"
|
||||
fontSize="13px"
|
||||
color="inherit"
|
||||
underline="none"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@@ -0,0 +1,69 @@
|
||||
import * as React from "react";
|
||||
import { styled, alpha } from "@mui/material/styles";
|
||||
import InputBase from "@mui/material/InputBase";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
|
||||
const Search = styled("div")(({ theme }) => ({
|
||||
position: "relative",
|
||||
borderRadius: 100,
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
||||
"&:hover": {
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
||||
},
|
||||
marginRight: 0,
|
||||
marginLeft: "15px",
|
||||
width: "100%",
|
||||
[theme.breakpoints.up("sm")]: {
|
||||
marginRight: theme.spacing(1),
|
||||
width: "auto",
|
||||
},
|
||||
}));
|
||||
|
||||
const SearchIconWrapper = styled("div")(({ theme }) => ({
|
||||
color: "#757FEF",
|
||||
padding: theme.spacing(0, 2),
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
right: "0",
|
||||
pointerEvents: "none",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: "5",
|
||||
}));
|
||||
|
||||
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
||||
color: "inherit",
|
||||
"& .MuiInputBase-input": {
|
||||
backgroundColor: "#F5F7FA",
|
||||
borderRadius: "30px",
|
||||
padding: theme.spacing(1.4, 0, 1.4, 2),
|
||||
// vertical padding + font size from searchIcon
|
||||
paddingRight: `calc(1em + ${theme.spacing(4)})`,
|
||||
transition: theme.transitions.create("width"),
|
||||
width: "100%",
|
||||
[theme.breakpoints.up("sm")]: {
|
||||
width: "260px",
|
||||
"&:focus": {
|
||||
width: "280px",
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export default function SearchForm() {
|
||||
return (
|
||||
<>
|
||||
<Search className="search-form">
|
||||
<SearchIconWrapper sx={{display: { xs: 'none', sm: 'inline-flex' }}}>
|
||||
<SearchIcon />
|
||||
</SearchIconWrapper>
|
||||
|
||||
<StyledInputBase
|
||||
placeholder="Search here.."
|
||||
inputProps={{ "aria-label": "search" }}
|
||||
/>
|
||||
</Search>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import * as React from "react";
|
||||
import { AppBar, Toolbar, IconButton, Stack, Typography } from "@mui/material";
|
||||
import SearchForm from "./SearchForm";
|
||||
import Email from "./Email";
|
||||
import Notification from "./Notification";
|
||||
import Profile from "./Profile";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import CurrentDate from "./CurrentDate";
|
||||
|
||||
const TopNavbar = ({ toogleActive }) => {
|
||||
return (
|
||||
<>
|
||||
<topnavbardark>
|
||||
<AppBar
|
||||
color="inherit"
|
||||
sx={{
|
||||
backgroundColor: "#fff",
|
||||
boxShadow: "0px 4px 20px rgba(47, 143, 232, 0.07)",
|
||||
py: "6px",
|
||||
mb: "30px",
|
||||
position: "sticky",
|
||||
}}
|
||||
className="top-navbar-for-dark"
|
||||
>
|
||||
<Toolbar>
|
||||
<Tooltip title="Hide/Show" arrow>
|
||||
<IconButton
|
||||
size="sm"
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={toogleActive}
|
||||
>
|
||||
<i className="ri-align-left"></i>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
{/* Search form */}
|
||||
<SearchForm />
|
||||
|
||||
<Typography component="div" sx={{ flexGrow: 1 }}></Typography>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
{/* CurrentDate */}
|
||||
<CurrentDate />
|
||||
|
||||
{/* Notification */}
|
||||
<Email />
|
||||
|
||||
{/* Notification */}
|
||||
<Notification />
|
||||
|
||||
{/* Profile */}
|
||||
<Profile />
|
||||
</Stack>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</topnavbardark>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopNavbar;
|
||||
Reference in New Issue
Block a user