first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,54 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Button from '@mui/material/Button';
|
||||
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
|
||||
|
||||
const DarkAndLightMode = () => {
|
||||
// Light/Dark Mode
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Retrieve the user's preference from local storage
|
||||
const storedPreference = localStorage.getItem("theme");
|
||||
if (storedPreference === "dark") {
|
||||
setIsDarkMode(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleToggle = () => {
|
||||
setIsDarkMode(!isDarkMode);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Update the user's preference in local storage
|
||||
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
|
||||
|
||||
// Update the class on the <html> element to apply the selected mode
|
||||
const htmlElement = document.querySelector("html");
|
||||
if (isDarkMode) {
|
||||
htmlElement.classList.add("dark");
|
||||
} else {
|
||||
htmlElement.classList.remove("dark");
|
||||
}
|
||||
}, [isDarkMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.darkModeBox}>
|
||||
<h3>Dark/Light Mode</h3>
|
||||
|
||||
<Button
|
||||
onClick={handleToggle}
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
className="whiteColor"
|
||||
>
|
||||
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DarkAndLightMode;
|
||||
@@ -0,0 +1,11 @@
|
||||
.darkModeBox {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.darkModeBox h3 {
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #eee !important;
|
||||
padding-bottom: 5px;
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 15px;
|
||||
color: var(--headingColor) !important;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Button from "@mui/material/Button";
|
||||
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
|
||||
|
||||
const OnlyLeftSidebarDarkMode = () => {
|
||||
// Light/Dark Mode
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Retrieve the user's preference from local storage
|
||||
const storedPreference = localStorage.getItem("leftSidebarTheme");
|
||||
if (storedPreference === "leftsidebardark") {
|
||||
setIsDarkMode(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleToggle = () => {
|
||||
setIsDarkMode(!isDarkMode);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Update the user's preference in local storage
|
||||
localStorage.setItem(
|
||||
"leftSidebarTheme", isDarkMode ? "leftsidebardark" : "light"
|
||||
);
|
||||
|
||||
// Update the class on the <leftsidebardark> element to apply the selected mode
|
||||
const htmlElement = document.querySelector("leftsidebardark");
|
||||
if (isDarkMode) {
|
||||
htmlElement.classList.add("leftsidebardark");
|
||||
} else {
|
||||
htmlElement.classList.remove("leftsidebardark");
|
||||
}
|
||||
}, [isDarkMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.darkModeBox}>
|
||||
<h3>Only Left Sidebar Dark/Light Mode</h3>
|
||||
|
||||
<Button
|
||||
onClick={handleToggle}
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
className="whiteColor"
|
||||
>
|
||||
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnlyLeftSidebarDarkMode;
|
||||
@@ -0,0 +1,54 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Button from '@mui/material/Button';
|
||||
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
|
||||
|
||||
const OnlyTopNavbarDark = () => {
|
||||
// Light/Dark Mode
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Retrieve the user's preference from local storage
|
||||
const storedPreference = localStorage.getItem("topNavbarDarkTheme");
|
||||
if (storedPreference === "TopNavbarDark") {
|
||||
setIsDarkMode(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleToggle = () => {
|
||||
setIsDarkMode(!isDarkMode);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Update the user's preference in local storage
|
||||
localStorage.setItem("topNavbarDarkTheme", isDarkMode ? "TopNavbarDark" : "light");
|
||||
|
||||
// Update the class on the <html> element to apply the selected mode
|
||||
const htmlElement = document.querySelector("topnavbardark");
|
||||
if (isDarkMode) {
|
||||
htmlElement.classList.add("dark");
|
||||
} else {
|
||||
htmlElement.classList.remove("dark");
|
||||
}
|
||||
}, [isDarkMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.darkModeBox}>
|
||||
<h3>Only Top Navbar Dark/Light Mode</h3>
|
||||
|
||||
<Button
|
||||
onClick={handleToggle}
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
className="whiteColor"
|
||||
>
|
||||
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnlyTopNavbarDark;
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
import Button from '@mui/material/Button';
|
||||
import styles from "@/components/_App/ControlPanelModal/RTLSwitch.module.css";
|
||||
|
||||
const RTLSwitch = () => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.darkModeBox}>
|
||||
<h3>LTR/RTL Demos</h3>
|
||||
|
||||
<div className="lang-sidebar">
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
className="whiteColor mr-10px"
|
||||
href="/"
|
||||
>
|
||||
Switch to LTR
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
className="whiteColor"
|
||||
href="/ar"
|
||||
>
|
||||
Switch to RTL
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RTLSwitch;
|
||||
@@ -0,0 +1,11 @@
|
||||
.darkModeBox {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.darkModeBox h3 {
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #eee !important;
|
||||
padding-bottom: 5px;
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 15px;
|
||||
color: var(--headingColor) !important;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import React, { useState } from "react";
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { Box } from "@mui/material";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Button from "@mui/material/Button";
|
||||
import RTLSwitch from '@/components/_App/ControlPanelModal/RTLSwitch';
|
||||
import DarkAndLightMode from '@/components/_App/ControlPanelModal/DarkAndLightMode';
|
||||
import OnlyLeftSidebarDarkMode from '@/components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode';
|
||||
import OnlyTopNavbarDark from '@/components/_App/ControlPanelModal/OnlyTopNavbarDark';
|
||||
|
||||
export default function ControlPanelModal() {
|
||||
|
||||
const [isActiveSearchModal, setActiveSearchModal] = useState("false");
|
||||
const handleToggleSearchModal = () => {
|
||||
setActiveSearchModal(!isActiveSearchModal);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`control-panel-modal ${
|
||||
isActiveSearchModal ? "" : "show"
|
||||
}`}
|
||||
>
|
||||
|
||||
<Tooltip title="Control Panel" placement="left" arrow>
|
||||
<div
|
||||
className='settings-btn'
|
||||
onClick={handleToggleSearchModal}
|
||||
>
|
||||
<i className="ri-settings-3-line"></i>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div
|
||||
className="control-panel-dialog"
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={handleToggleSearchModal}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon sx={{ color: "#fff !important" }} />
|
||||
</IconButton>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
flex: 1,
|
||||
color: "#fff !important"
|
||||
}}
|
||||
variant="h6"
|
||||
component="div"
|
||||
className='ml-2'
|
||||
>
|
||||
Control Panel
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Box p={3} className="control-panel-content">
|
||||
{/* DarkAndLightMode */}
|
||||
<DarkAndLightMode />
|
||||
|
||||
{/* OnlyLeftSidebarDarkMode */}
|
||||
<OnlyLeftSidebarDarkMode />
|
||||
|
||||
{/* OnlyTopNavbarDark */}
|
||||
<OnlyTopNavbarDark />
|
||||
|
||||
{/* RTLSwitch */}
|
||||
<RTLSwitch />
|
||||
</Box>
|
||||
|
||||
<div className="control-panel-footer">
|
||||
<Button
|
||||
onClick={handleToggleSearchModal}
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { Stack, Box, Typography, Link } from "@mui/material";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
sx={{
|
||||
backgroundColor: "#fff",
|
||||
p: "25px",
|
||||
borderRadius: "10px 10px 0 0",
|
||||
textAlign: "center",
|
||||
mt: "15px"
|
||||
}}
|
||||
className="footer"
|
||||
>
|
||||
<Box>
|
||||
<Typography>
|
||||
Copyright {' '}
|
||||
<strong>Admash</strong> is Proudly Owned by {' '}
|
||||
<Link
|
||||
href="https://envytheme.com/"
|
||||
target="_blank"
|
||||
underline="none"
|
||||
rel="noreferrer"
|
||||
>
|
||||
EnvyTheme
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,75 @@
|
||||
import React, { useState } from "react";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import LeftSidebar from "@/components/_App/LeftSidebar";
|
||||
import TopNavbar from "@/components/_App/TopNavbar";
|
||||
import Footer from "@/components/_App/Footer";
|
||||
import ScrollToTop from "./ScrollToTop";
|
||||
import ControlPanelModal from "./ControlPanelModal";
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
const toogleActive = () => {
|
||||
setActive(!active);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Admash - Material Design React Next Admin Dashboard Template
|
||||
</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
|
||||
<div className={`main-wrapper-content ${active && "active"}`}>
|
||||
{!(
|
||||
router.pathname === "/authentication/sign-in" ||
|
||||
router.pathname === "/authentication/sign-up" ||
|
||||
router.pathname === "/authentication/forgot-password" ||
|
||||
router.pathname === "/authentication/lock-screen" ||
|
||||
router.pathname === "/authentication/confirm-mail" ||
|
||||
router.pathname === "/authentication/logout"
|
||||
) && (
|
||||
<>
|
||||
<TopNavbar toogleActive={toogleActive} />
|
||||
|
||||
<LeftSidebar toogleActive={toogleActive} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="main-content">
|
||||
{children}
|
||||
|
||||
{!(
|
||||
router.pathname === "/authentication/sign-in" ||
|
||||
router.pathname === "/authentication/sign-up" ||
|
||||
router.pathname === "/authentication/forgot-password" ||
|
||||
router.pathname === "/authentication/lock-screen" ||
|
||||
router.pathname === "/authentication/confirm-mail" ||
|
||||
router.pathname === "/authentication/logout"
|
||||
) && <Footer />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ScrollToTop */}
|
||||
<ScrollToTop />
|
||||
|
||||
{!(
|
||||
router.pathname === "/authentication/sign-in" ||
|
||||
router.pathname === "/authentication/sign-up" ||
|
||||
router.pathname === "/authentication/forgot-password" ||
|
||||
router.pathname === "/authentication/lock-screen" ||
|
||||
router.pathname === "/authentication/confirm-mail" ||
|
||||
router.pathname === "/authentication/logout"
|
||||
) &&
|
||||
<ControlPanelModal />
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -0,0 +1,504 @@
|
||||
import React from "react";
|
||||
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import GridViewIcon from "@mui/icons-material/GridView";
|
||||
import LayersIcon from "@mui/icons-material/Layers";
|
||||
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
|
||||
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
||||
import LockIcon from "@mui/icons-material/Lock";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import PostAddIcon from "@mui/icons-material/PostAdd";
|
||||
import MailOutlineIcon from "@mui/icons-material/MailOutline";
|
||||
import AddchartIcon from "@mui/icons-material/Addchart";
|
||||
import CopyAllIcon from "@mui/icons-material/CopyAll";
|
||||
import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
|
||||
import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
|
||||
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
|
||||
|
||||
export const SidebarData = [
|
||||
{
|
||||
title: "Dashboard",
|
||||
path: "/",
|
||||
icon: <GridViewIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "eCommerce",
|
||||
path: "/ecommerce/",
|
||||
},
|
||||
{
|
||||
title: "Analytics",
|
||||
path: "/analytics/",
|
||||
},
|
||||
{
|
||||
title: "Project Management",
|
||||
path: "/project-management/",
|
||||
},
|
||||
{
|
||||
title: "LMS Courses",
|
||||
path: "/lms-courses/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Apps",
|
||||
path: "/apps/file-manager/",
|
||||
icon: <LayersIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "File Manager",
|
||||
path: "/apps/file-manager/",
|
||||
},
|
||||
{
|
||||
title: "Chat",
|
||||
path: "/apps/chat/",
|
||||
},
|
||||
{
|
||||
title: "To Do",
|
||||
path: "/apps/to-do/",
|
||||
},
|
||||
{
|
||||
title: "Calendar",
|
||||
path: "/apps/calendar/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Email",
|
||||
path: "/email/inbox/",
|
||||
icon: <MailOutlineIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Inbox",
|
||||
path: "/email/inbox/",
|
||||
},
|
||||
{
|
||||
title: "Read Email",
|
||||
path: "/email/read-email/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact List",
|
||||
path: "/contact-list/",
|
||||
icon: <PostAddIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Contact List",
|
||||
path: "/contact-list/",
|
||||
},
|
||||
{
|
||||
title: "Members Grid",
|
||||
path: "/contact-list/contact-list2/",
|
||||
},
|
||||
{
|
||||
title: "Members List",
|
||||
path: "/contact-list/members-list/",
|
||||
},
|
||||
{
|
||||
title: "Profile",
|
||||
path: "/contact-list/profile/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Projects",
|
||||
path: "/projects/",
|
||||
icon: <CopyAllIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Projects",
|
||||
path: "/projects/",
|
||||
},
|
||||
{
|
||||
title: "Project Create",
|
||||
path: "/projects/project-create/",
|
||||
},
|
||||
{
|
||||
title: "Clients",
|
||||
path: "/projects/clients/",
|
||||
},
|
||||
{
|
||||
title: "Team",
|
||||
path: "/projects/team/",
|
||||
},
|
||||
{
|
||||
title: "Task",
|
||||
path: "/projects/task/",
|
||||
},
|
||||
{
|
||||
title: "User",
|
||||
path: "/projects/user/",
|
||||
},
|
||||
{
|
||||
title: "Kanban board",
|
||||
path: "/projects/kanban-board/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Analytics",
|
||||
path: "/analytics/customers/",
|
||||
icon: <AddchartIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Customers",
|
||||
path: "/analytics/customers/",
|
||||
},
|
||||
{
|
||||
title: "Reports",
|
||||
path: "/analytics/reports/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "eCommerce",
|
||||
path: "/ecommerce/products/",
|
||||
icon: <ShoppingCartCheckoutIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Products",
|
||||
path: "/ecommerce/products/",
|
||||
},
|
||||
{
|
||||
title: "Product Details",
|
||||
path: "/ecommerce/product-details/",
|
||||
},
|
||||
{
|
||||
title: "Create Product",
|
||||
path: "/ecommerce/create-product/",
|
||||
},
|
||||
{
|
||||
title: "Orders List",
|
||||
path: "/ecommerce/orders-list/",
|
||||
},
|
||||
{
|
||||
title: "Order Details",
|
||||
path: "/ecommerce/order-details/",
|
||||
},
|
||||
{
|
||||
title: "Customers",
|
||||
path: "/ecommerce/customers/",
|
||||
},
|
||||
{
|
||||
title: "Cart",
|
||||
path: "/ecommerce/cart/",
|
||||
},
|
||||
{
|
||||
title: "Checkout",
|
||||
path: "/ecommerce/checkout/",
|
||||
},
|
||||
{
|
||||
title: "Sellers",
|
||||
path: "/ecommerce/sellers/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "UI Elements",
|
||||
path: "/ui-elements/alerts/",
|
||||
icon: <ViewQuiltIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Alerts",
|
||||
path: "/ui-elements/alerts/",
|
||||
},
|
||||
{
|
||||
title: "Autocomplete",
|
||||
path: "/ui-elements/autocomplete/",
|
||||
},
|
||||
{
|
||||
title: "Avatar",
|
||||
path: "/ui-elements/avatar/",
|
||||
},
|
||||
{
|
||||
title: "Badge",
|
||||
path: "/ui-elements/badge/",
|
||||
},
|
||||
{
|
||||
title: "Buttons",
|
||||
path: "/ui-elements/buttons/",
|
||||
},
|
||||
{
|
||||
title: "Cards",
|
||||
path: "/ui-elements/cards/",
|
||||
},
|
||||
{
|
||||
title: "Checkbox",
|
||||
path: "/ui-elements/checkbox/",
|
||||
},
|
||||
{
|
||||
title: "Swiper Slider",
|
||||
path: "/ui-elements/swiper-slider/",
|
||||
},
|
||||
{
|
||||
title: "Radio",
|
||||
path: "/ui-elements/radio/",
|
||||
},
|
||||
{
|
||||
title: "Rating",
|
||||
path: "/ui-elements/rating/",
|
||||
},
|
||||
{
|
||||
title: "Select",
|
||||
path: "/ui-elements/select/",
|
||||
},
|
||||
{
|
||||
title: "Slider",
|
||||
path: "/ui-elements/slider/",
|
||||
},
|
||||
{
|
||||
title: "Switch",
|
||||
path: "/ui-elements/switch/",
|
||||
},
|
||||
{
|
||||
title: "Chip",
|
||||
path: "/ui-elements/chip/",
|
||||
},
|
||||
{
|
||||
title: "List",
|
||||
path: "/ui-elements/list/",
|
||||
},
|
||||
{
|
||||
title: "Modal",
|
||||
path: "/ui-elements/modal/",
|
||||
},
|
||||
{
|
||||
title: "Table",
|
||||
path: "/ui-elements/table/",
|
||||
},
|
||||
{
|
||||
title: "Tooltip",
|
||||
path: "/ui-elements/tooltip/",
|
||||
},
|
||||
{
|
||||
title: "Progress",
|
||||
path: "/ui-elements/progress/",
|
||||
},
|
||||
{
|
||||
title: "Skeleton",
|
||||
path: "/ui-elements/skeleton/",
|
||||
},
|
||||
{
|
||||
title: "Snackbar",
|
||||
path: "/ui-elements/snackbar/",
|
||||
},
|
||||
{
|
||||
title: "Accordion",
|
||||
path: "/ui-elements/accordion/",
|
||||
},
|
||||
{
|
||||
title: "Pagination",
|
||||
path: "/ui-elements/pagination/",
|
||||
},
|
||||
{
|
||||
title: "Stepper",
|
||||
path: "/ui-elements/stepper/",
|
||||
},
|
||||
{
|
||||
title: "Tabs",
|
||||
path: "/ui-elements/tabs/",
|
||||
},
|
||||
{
|
||||
title: "Image List",
|
||||
path: "/ui-elements/image-list/",
|
||||
},
|
||||
{
|
||||
title: "Transitions",
|
||||
path: "/ui-elements/transitions/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Forms",
|
||||
path: "/forms/form-layouts/",
|
||||
icon: <CheckBoxOutlineBlankIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Basic Elements",
|
||||
path: "/forms/form-layouts/",
|
||||
},
|
||||
{
|
||||
title: "Advanced Elements",
|
||||
path: "/forms/advanced-elements/",
|
||||
},
|
||||
{
|
||||
title: "Editors",
|
||||
path: "/forms/editors/",
|
||||
},
|
||||
{
|
||||
title: "File Uploader",
|
||||
path: "/forms/file-uploader/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pages",
|
||||
path: "/pages/invoice/",
|
||||
icon: <ContentCopyIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Invoice",
|
||||
path: "/pages/invoice/",
|
||||
},
|
||||
{
|
||||
title: "Invoice Details",
|
||||
path: "/pages/invoice-details/",
|
||||
},
|
||||
{
|
||||
title: "ApexCharts",
|
||||
path: "/pages/apexcharts/",
|
||||
},
|
||||
{
|
||||
title: "Recharts",
|
||||
path: "/pages/recharts/",
|
||||
},
|
||||
{
|
||||
title: "Profile",
|
||||
path: "/pages/profile/",
|
||||
},
|
||||
{
|
||||
title: "Pricing",
|
||||
path: "/pages/pricing/",
|
||||
},
|
||||
{
|
||||
title: "Testimonials",
|
||||
path: "/pages/testimonials/",
|
||||
},
|
||||
{
|
||||
title: "Timeline",
|
||||
path: "/pages/timeline/",
|
||||
},
|
||||
{
|
||||
title: "FAQ",
|
||||
path: "/pages/faq/",
|
||||
},
|
||||
{
|
||||
title: "Gallery",
|
||||
path: "/pages/gallery/",
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
path: "/pages/support/",
|
||||
},
|
||||
{
|
||||
title: "Search",
|
||||
path: "/pages/search/",
|
||||
},
|
||||
{
|
||||
title: "Material Icons",
|
||||
path: "/pages/material-icons/",
|
||||
},
|
||||
{
|
||||
title: "Remixicon",
|
||||
path: "/pages/remixicon/",
|
||||
},
|
||||
{
|
||||
title: "Maps",
|
||||
path: "/pages/maps/",
|
||||
},
|
||||
{
|
||||
title: "404 Error Page",
|
||||
path: "/404/",
|
||||
},
|
||||
{
|
||||
title: "Terms & Conditions",
|
||||
path: "/pages/terms-conditions/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Authentication",
|
||||
path: "/authentication/sign-in/",
|
||||
icon: <LockIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Sign Up",
|
||||
path: "/authentication/sign-up/",
|
||||
},
|
||||
{
|
||||
title: "Forgot Password",
|
||||
path: "/authentication/forgot-password/",
|
||||
},
|
||||
{
|
||||
title: "Lock Screen",
|
||||
path: "/authentication/lock-screen/",
|
||||
},
|
||||
{
|
||||
title: "Confirm Mail",
|
||||
path: "/authentication/confirm-mail/",
|
||||
},
|
||||
{
|
||||
title: "Logout",
|
||||
path: "/authentication/logout/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Notification",
|
||||
path: "/notification/",
|
||||
icon: <NotificationsNoneIcon />,
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
path: "/settings/account/",
|
||||
icon: <SettingsIcon />,
|
||||
iconClosed: <KeyboardArrowRightIcon />,
|
||||
iconOpened: <KeyboardArrowDownIcon />,
|
||||
|
||||
subNav: [
|
||||
{
|
||||
title: "Account",
|
||||
path: "/settings/account/",
|
||||
},
|
||||
{
|
||||
title: "Security",
|
||||
path: "/settings/security/",
|
||||
},
|
||||
{
|
||||
title: "Privacy Policy",
|
||||
path: "/settings/privacy-policy/",
|
||||
},
|
||||
{
|
||||
title: "Terms & Conditions",
|
||||
path: "/pages/terms-conditions/",
|
||||
},
|
||||
{
|
||||
title: "Logout",
|
||||
path: "/authentication/logout/",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,63 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import Link from "next/link";
|
||||
import styles from "@/components/_App/LeftSidebar/SubMenu.module.css";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
const SidebarLabel = styled("span")(({ theme }) => ({
|
||||
position: "relative",
|
||||
top: "-3px",
|
||||
}));
|
||||
|
||||
const SubMenu = ({ item }) => {
|
||||
const [subnav, setSubnav] = useState(false);
|
||||
const showSubnav = () => setSubnav(!subnav);
|
||||
const [currentPath, setCurrentPath] = useState("");
|
||||
const router = useRouter();
|
||||
// console.log(router.asPath)
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPath(router.asPath);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
href={item.path}
|
||||
onClick={item.subNav && showSubnav}
|
||||
className={`${styles.sidebarLink} ${
|
||||
currentPath == item.path && "sidebarLinkActive"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
{item.icon}
|
||||
<SidebarLabel className="ml-1">{item.title}</SidebarLabel>
|
||||
</div>
|
||||
<div>
|
||||
{item.subNav && subnav
|
||||
? item.iconOpened
|
||||
: item.subNav
|
||||
? item.iconClosed
|
||||
: null}
|
||||
</div>
|
||||
</Link>
|
||||
{subnav &&
|
||||
item.subNav.map((item, index) => {
|
||||
return (
|
||||
<Link
|
||||
href={item.path}
|
||||
key={index}
|
||||
className={`${styles.sidebarLink2} ${
|
||||
currentPath == item.path && "sidebarLinkActive2"
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
{item.title}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubMenu;
|
||||
@@ -0,0 +1,92 @@
|
||||
.sidebarLink {
|
||||
display: flex;
|
||||
color: #260944;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 9px 20px;
|
||||
text-decoration: none;
|
||||
font-size: 14.5px;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.sidebarLink svg {
|
||||
fill: #818093;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.sidebarLink:hover {
|
||||
background: linear-gradient(90deg, rgba(172, 169, 255, 0.6) 0%, rgba(172, 169, 255, 0.37) 91.25%);
|
||||
}
|
||||
.sidebarLink2 {
|
||||
display: block;
|
||||
color: #5B5B98;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 9px 20px 9px 50px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
.sidebarLink2::before {
|
||||
content: "";
|
||||
background-color: #818093;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 16px;
|
||||
}
|
||||
.sidebarLink2:hover::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.sidebarLink2:hover {
|
||||
background: #757FEF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir=rtl] .sidebarLink2 {
|
||||
padding: 9px 50px 9px 20px;
|
||||
}
|
||||
[dir=rtl] .sidebarLink2::before {
|
||||
left: auto;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .sidebarLink, [class="leftsidebardark"] .sidebarLink {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
[class="dark"] .sidebarLink svg, [class="leftsidebardark"] .sidebarLink svg {
|
||||
fill: #f3f3f3;
|
||||
}
|
||||
[class="dark"] .sidebarLink span, [class="leftsidebardark"] .sidebarLink svg {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
[class="dark"] .sidebarLink:hover, [class="leftsidebardark"] .sidebarLink svg {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .sidebarLink:hover span, [class="leftsidebardark"] .sidebarLink svg {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .sidebarLink:hover svg, [class="leftsidebardark"] .sidebarLink svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
[class="dark"] .sidebarLink2, [class="leftsidebardark"] .sidebarLink2 {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .sidebarLink2 span, [class="leftsidebardark"] .sidebarLink2 {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .sidebarLink2:hover, [class="leftsidebardark"] .sidebarLink2 {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .sidebarLink2:hover span, [class="leftsidebardark"] .sidebarLink2 {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box
|
||||
} from "@mui/material";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { SidebarData } from './SidebarData';
|
||||
import SubMenu from './SubMenu';
|
||||
import Link from 'next/link';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
const SidebarNav = styled("nav")(({ theme }) => ({
|
||||
background: '#fff',
|
||||
boxShadow: "0px 4px 20px rgba(47, 143, 232, 0.07)",
|
||||
width: '300px',
|
||||
padding: '30px 10px',
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
transition: '350ms',
|
||||
zIndex: '10',
|
||||
overflowY: 'auto'
|
||||
}));
|
||||
|
||||
const SidebarWrap = styled("div")(({ theme }) => ({
|
||||
width: '100%'
|
||||
}));
|
||||
|
||||
const Sidebar = ({ toogleActive }) => {
|
||||
return (
|
||||
<>
|
||||
<leftsidebardark>
|
||||
<SidebarNav className="LeftSidebarNav">
|
||||
<SidebarWrap>
|
||||
<Box
|
||||
sx={{
|
||||
mb: '20px',
|
||||
px: '20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Link href='/'>
|
||||
<img
|
||||
src="/images/logo.png" alt="Logo"
|
||||
className='black-logo'
|
||||
/>
|
||||
|
||||
{/* For Dark Variation */}
|
||||
<img
|
||||
src="/images/logo-white.png" alt="Logo"
|
||||
className='white-logo'
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<IconButton
|
||||
onClick={toogleActive}
|
||||
size="small"
|
||||
sx={{
|
||||
background: 'rgb(253, 237, 237)',
|
||||
display: { lg: 'none' }
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{SidebarData.map((item, index) => {
|
||||
return <SubMenu item={item} key={index} />;
|
||||
})}
|
||||
</SidebarWrap>
|
||||
</SidebarNav>
|
||||
</leftsidebardark>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
const ScrollToTop = () => {
|
||||
const [showScroll, setShowScroll] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", checkScrollTop);
|
||||
return function cleanup() {
|
||||
window.removeEventListener("scroll", checkScrollTop);
|
||||
};
|
||||
});
|
||||
|
||||
const checkScrollTop = () => {
|
||||
if (!showScroll && window.pageYOffset > 100) {
|
||||
setShowScroll(true);
|
||||
} else if (showScroll && window.pageYOffset <= 100) {
|
||||
setShowScroll(false);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="scroll-to-top"
|
||||
onClick={scrollTop}
|
||||
style={{
|
||||
display: showScroll ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
<i className="ri-arrow-up-line"></i>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScrollToTop;
|
||||
@@ -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