first commit

This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
+504
View File
@@ -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/",
},
],
},
];
+63
View File
@@ -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;
}
+82
View File
@@ -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;