/* eslint-disable */
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { HamburgerIcon } from '@chakra-ui/icons';
// chakra imports
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerOverlay,
Flex,
HStack,
Icon,
List,
ListItem,
Stack,
Text,
useColorModeValue,
useDisclosure
} from '@chakra-ui/react';
import IconBox from 'components/Icons/IconBox';
import {
renderThumbDark,
renderThumbLight,
renderTrack,
renderTrackRTL,
renderView,
renderViewRTL
} from 'components/Scrollbar/Scrollbar';
import { HSeparator } from 'components/Separator/Separator';
import { SidebarContext } from 'contexts/SidebarContext';
import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars-2';
import { FaCircle } from 'react-icons/fa';
import { NavLink, useLocation } from 'react-router-dom';
import SidebarDocs from './SidebarDocs';
// FUNCTIONS
function Sidebar(props) {
// to check for active links and opened collapses
let location = useLocation();
const { routes, landing } = props;
// this is for the rest of the collapses
const { sidebarWidth, setSidebarWidth, toggleSidebar } = React.useContext(SidebarContext);
let variantChange = '0.2s linear';
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return location.pathname.includes(routeName);
};
// this function creates the links and collapses that appear in the sidebar (left menu)
const createLinks = (routes) => {
// Chakra Color Mode
let activeBg = 'blue.500';
let inactiveBg = useColorModeValue('transparent', 'navy.700');
let activeColor = useColorModeValue('gray.700', 'white');
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
let sidebarActiveShadow = '0px 7px 11px rgba(0, 0, 0, 0.04)';
let activeAccordionBg = useColorModeValue('white', 'navy.700');
let activeColorIcon = 'white';
let inactiveColorIcon = 'blue.500';
if (landing) {
activeBg = 'white';
inactiveBg = 'transparent';
activeColor = 'white';
inactiveColor = 'white';
sidebarActiveShadow = '0px 7px 11px rgba(0, 0, 0, 0.04)';
activeAccordionBg = 'rgba(255, 255, 255, 0.11)';
activeColorIcon = 'blue.500';
inactiveColorIcon = 'white';
}
return routes.map((prop, key) => {
if (prop.category) {
return (
{prop.name}
{createLinks(prop.items)}
);
}
if (prop.collapse) {
return (
{activeRoute(prop.path) ? (
{prop.icon ? (
{prop.icon}
{prop.name}
) : (
{sidebarWidth === 275 ? prop.name : prop.name[0]}
)}
) : (
{prop.icon ? (
{prop.icon}
{prop.name}
) : (
{sidebarWidth === 275 ? prop.name : prop.name[0]}
)}
)}
{prop.icon ? (
createLinks(prop.items) // for bullet accordion links
) : (
createAccordionLinks(prop.items)
) // for non-bullet accordion links
}
);
} else {
return (
{prop.icon ? (
{prop.icon}
{prop.name}
) : (
{sidebarWidth === 275 ? prop.name : prop.name[0]}
)}
);
}
});
};
const createAccordionLinks = (routes) => {
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
let activeColor = useColorModeValue('gray.700', 'white');
if (landing) {
inactiveColor = 'white';
activeColor = 'white';
}
return routes.map((prop, key) => {
return (
{sidebarWidth === 275 ? prop.name : prop.name[0]}
);
});
};
let isWindows = navigator.platform.startsWith('Win');
let links = {createLinks(routes)};
// BRAND
// Chakra Color Mode
let sidebarBg = useColorModeValue('white', 'navy.800');
let sidebarRadius = '20px';
let sidebarMargins = '0px';
var brand = (
{props.logo}
);
let sidebarContent = (
{brand}
{links}
);
// SIDEBAR
return (
setSidebarWidth(sidebarWidth === 120 ? 275 : 120) : null}
onMouseLeave={toggleSidebar ? () => setSidebarWidth(sidebarWidth === 275 ? 120 : 275) : null}>
{sidebarContent}
);
}
// FUNCTIONS
export function SidebarResponsive(props) {
// to check for active links and opened collapses
let location = useLocation();
let variantChange = '0.2s linear';
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return location.pathname.includes(routeName);
};
// Chakra Color Mode
let activeBg = 'blue.500';
let inactiveBg = useColorModeValue('transparent', 'navy.700');
let activeColor = useColorModeValue('gray.700', 'white');
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
let activeAccordionBg = useColorModeValue('white', 'navy.700');
let sidebarActiveShadow = useColorModeValue('0px 7px 11px rgba(0, 0, 0, 0.04)', 'none');
let activeColorIcon = 'white';
let inactiveColorIcon = 'blue.500';
let sidebarBackgroundColor = useColorModeValue('white', 'navy.900');
// this function creates the links and collapses that appear in the sidebar (left menu)
const createLinks = (routes) => {
return routes.map((prop, key) => {
if (prop.category) {
return (
{prop.name}
{createLinks(prop.items)}
);
}
if (prop.collapse) {
return (
{activeRoute(prop.path) ? (
{prop.icon ? (
{prop.icon}
{prop.name}
) : (
{prop.name}
)}
) : (
{prop.icon ? (
{prop.icon}
{prop.name}
) : (
{prop.name}
)}
)}
{prop.icon ? (
createLinks(prop.items) // for bullet accordion links
) : (
createAccordionLinks(prop.items)
) // for non-bullet accordion links
}
);
} else {
return (
{prop.icon ? (
{prop.icon}
{prop.name}
) : (
{prop.name}
)}
);
}
});
};
const createAccordionLinks = (routes) => {
return routes.map((prop, key) => {
return (
{prop.name}
);
});
};
const { logo, display, routes } = props;
let links = {createLinks(routes)};
// BRAND
// Chakra Color Mode
let hamburgerColor = 'white';
var brand = (
{logo}
);
// SIDEBAR
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
// Color variables
return (
{brand}
{links}
);
}
// PROPS
export default Sidebar;