first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,516 @@
|
||||
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: "Crypto",
|
||||
path: "/crypto/",
|
||||
},
|
||||
{
|
||||
title: "Help/Support Desk",
|
||||
path: "/help-desk/",
|
||||
},
|
||||
{
|
||||
title: "SaaS App",
|
||||
path: "/saas-app/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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 dark"] .sidebarLink {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
[class="dark"] .sidebarLink svg, [class="leftSidebarDark dark"] .sidebarLink svg {
|
||||
fill: #f3f3f3;
|
||||
}
|
||||
[class="dark"] .sidebarLink span, [class="leftSidebarDark dark"] .sidebarLink svg {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
[class="dark"] .sidebarLink:hover, [class="leftSidebarDark dark"] .sidebarLink svg {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .sidebarLink:hover span, [class="leftSidebarDark dark"] .sidebarLink svg {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .sidebarLink:hover svg, [class="leftSidebarDark dark"] .sidebarLink svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
[class="dark"] .sidebarLink2, [class="leftSidebarDark dark"] .sidebarLink2 {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .sidebarLink2 span, [class="leftSidebarDark dark"] .sidebarLink2 {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .sidebarLink2:hover, [class="leftSidebarDark dark"] .sidebarLink2 {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .sidebarLink2:hover span, [class="leftSidebarDark dark"] .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 (
|
||||
<>
|
||||
<div className='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>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
Reference in New Issue
Block a user