/*!
=========================================================
* 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.
*/
// Chakra imports
import {
Box,
Button,
Flex,
Grid,
HStack,
Icon,
Link,
Menu,
MenuItem,
MenuList,
MenuButton,
Stack,
Text,
useColorModeValue,
useColorMode,
useDisclosure,
} from '@chakra-ui/react';
import bgCard from 'assets/img/background-card-reports.png';
import IconBox from 'components/Icons/IconBox';
import {
CreativeTimLogo,
RocketIcon,
ChakraLogoDark,
ChakraLogoLight,
ArgonLogoDark,
ArgonLogoLight,
ChakraLogoBlue,
} from 'components/Icons/Icons';
import { SidebarResponsive } from 'components/Sidebar/Sidebar';
import PropTypes from 'prop-types';
import { Fragment } from 'react';
import { AiFillStar } from 'react-icons/ai';
import { GoChevronDown, GoChevronRight } from 'react-icons/go';
import { NavLink } from 'react-router-dom';
import { SidebarContext } from 'contexts/SidebarContext';
import routes from 'routes.js';
export default function AuthNavbar(props) {
const { logo, logoText, secondary, sidebarWidth, ...rest } = props;
const { colorMode } = useColorMode();
// Menu States
const {
isOpen: isOpenPages,
onOpen: onOpenPages,
onClose: onClosePages,
} = useDisclosure();
const {
isOpen: isOpenAuth,
onOpen: onOpenAuth,
onClose: onCloseAuth,
} = useDisclosure();
const {
isOpen: isOpenApplication,
onOpen: onOpenApplication,
onClose: onCloseApplication,
} = useDisclosure();
const {
isOpen: isOpenEcommerce,
onOpen: onOpenEcommerce,
onClose: onCloseEcommerce,
} = useDisclosure();
// Menus
let authObject = {};
routes.forEach((route) => {
if (route.items) {
authObject = route.items.find((link) => link.name === 'Authentication');
}
});
let applicationsObject = {};
routes.forEach((route) => {
if (route.items) {
applicationsObject = route.items.find(
(link) => link.name === 'Applications'
);
}
});
let ecommerceObject = {};
routes.forEach((route) => {
if (route.items) {
ecommerceObject = route.items.find((link) => link.name === 'Ecommerce');
}
});
let extraArr = [];
routes.forEach((route) => {
route.items.forEach((item) => {
if (item.items && item.name === 'Pages') {
extraArr = item.items.filter((link) => !link.collapse);
}
});
});
// Chakra color mode
let brand = (
{logoText}
);
const textColor = useColorModeValue('gray.700', '#fff');
let menuBg = useColorModeValue('white', 'navy.900');
let mainText = '#fff';
let navbarBg = 'none';
let navbarShadow = 'initial';
let bgButton = useColorModeValue('white', 'navy.900');
let colorButton = useColorModeValue('gray.700', 'white');
let navbarPosition = 'absolute';
if (props.secondary === true) {
brand = (
{colorMode === 'light' ? (
) : (
)}
{colorMode === 'light' ? (
) : (
)}
{logoText}
);
mainText = useColorModeValue('gray.700', 'gray.200');
navbarBg = useColorModeValue('white', 'navy.800');
navbarShadow = useColorModeValue(
'0px 7px 23px rgba(0, 0, 0, 0.05)',
'none'
);
bgButton = useColorModeValue('gray.700', 'white');
colorButton = useColorModeValue('white', 'gray.700');
navbarPosition = 'fixed';
}
const createPagesLinks = (routes) => {
return routes.map((link, key) => {
if (
link.name === 'Applications' ||
link.name === 'Ecommerce' ||
link.name === 'Authentication' ||
link.name === 'RTL' ||
link.name === 'Widgets' ||
link.name === 'Charts' ||
link.name === 'Alerts'
) {
return;
}
if (link.name === 'Pricing Page') {
return (
Extra
{createExtraLinks(extraArr)}
);
}
if (link.authIcon) {
return (
{link.authIcon}
{link.name}
{createPagesLinks(link.items)}
);
} else {
if (link.component) {
return (
);
} else {
return {createPagesLinks(link.items)};
}
}
});
};
const createExtraLinks = (routes) => {
return routes.map((link, key) => {
return (
);
});
};
const createAuthLinks = (routes) => {
return routes.map((link, key) => {
if (link.authIcon && link.collapse == true) {
return (
);
} else {
return (
);
}
});
};
const createApplicationLinks = (routes) => {
return routes.map((link, key) => {
return (
{link.authIcon}
{link.name}
);
});
};
const createEcommerceLinks = (routes) => {
return routes.map((link, key) => {
if (link.authIcon) {
return (
{link.authIcon}
{link.name}
{createPagesLinks(link.items)}
);
} else {
if (link.component) {
return (
);
} else {
return <>{createPagesLinks(link.items)};
}
}
});
};
const linksAuth = (
Pages
Authentications
Application
Ecommerce
);
return (
{brand}
{colorMode === 'dark' ? (
) : (
)}
{colorMode === 'dark' ? (
) : (
)}
}
logoText={props.logoText}
secondary={props.secondary}
routes={routes}
{...rest}
/>
{linksAuth}
);
}
AuthNavbar.propTypes = {
color: PropTypes.oneOf(['primary', 'info', 'success', 'warning', 'danger']),
brandText: PropTypes.string,
};