Initial commit
This commit is contained in:
222
src/components/Navbars/AdminNavbar.js
Normal file
222
src/components/Navbars/AdminNavbar.js
Normal file
@@ -0,0 +1,222 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
Flex,
|
||||
Link,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import { SidebarContext } from "contexts/SidebarContext";
|
||||
import PropTypes from "prop-types";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import AdminNavbarLinks from "./AdminNavbarLinks";
|
||||
import { HamburgerIcon } from "@chakra-ui/icons";
|
||||
|
||||
export default function AdminNavbar(props) {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
const {
|
||||
sidebarWidth,
|
||||
setSidebarWidth,
|
||||
toggleSidebar,
|
||||
setToggleSidebar,
|
||||
} = useContext(SidebarContext);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeNavbar);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeNavbar);
|
||||
};
|
||||
});
|
||||
|
||||
const {
|
||||
variant,
|
||||
children,
|
||||
fixed,
|
||||
secondary,
|
||||
brandText,
|
||||
onOpen,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
// Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
|
||||
let mainText =
|
||||
fixed && scrolled
|
||||
? useColorModeValue("gray.700", "gray.200")
|
||||
: useColorModeValue("white", "gray.200");
|
||||
let secondaryText =
|
||||
fixed && scrolled
|
||||
? useColorModeValue("gray.700", "gray.200")
|
||||
: useColorModeValue("white", "gray.200");
|
||||
let navbarPosition = "absolute";
|
||||
let navbarFilter = "none";
|
||||
let navbarBackdrop = "blur(20px)";
|
||||
let navbarShadow = "none";
|
||||
let navbarBg = "none";
|
||||
let navbarBorder = "transparent";
|
||||
let secondaryMargin = "0px";
|
||||
let paddingX = "15px";
|
||||
if (props.fixed === true)
|
||||
if (scrolled === true) {
|
||||
navbarPosition = "fixed";
|
||||
navbarShadow = useColorModeValue(
|
||||
"0px 7px 23px rgba(0, 0, 0, 0.05)",
|
||||
"none"
|
||||
);
|
||||
navbarBg = useColorModeValue(
|
||||
"linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)",
|
||||
"linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
|
||||
);
|
||||
navbarBorder = useColorModeValue("#FFFFFF", "rgba(255, 255, 255, 0.31)");
|
||||
navbarFilter = useColorModeValue(
|
||||
"none",
|
||||
"drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
|
||||
);
|
||||
}
|
||||
if (props.secondary) {
|
||||
navbarBackdrop = "none";
|
||||
navbarPosition = "absolute";
|
||||
mainText = "white";
|
||||
secondaryText = "white";
|
||||
secondaryMargin = "22px";
|
||||
paddingX = "30px";
|
||||
}
|
||||
const changeNavbar = () => {
|
||||
if (window.scrollY > 1) {
|
||||
setScrolled(true);
|
||||
} else {
|
||||
setScrolled(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
position={navbarPosition}
|
||||
boxShadow={navbarShadow}
|
||||
bg={navbarBg}
|
||||
borderColor={navbarBorder}
|
||||
filter={navbarFilter}
|
||||
backdropFilter={navbarBackdrop}
|
||||
borderWidth="1.5px"
|
||||
borderStyle="solid"
|
||||
transitionDelay="0s, 0s, 0s, 0s"
|
||||
transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
|
||||
transition-property="box-shadow, background-color, filter, border"
|
||||
transitionTimingFunction="linear, linear, linear, linear"
|
||||
alignItems={{ xl: "center" }}
|
||||
borderRadius="16px"
|
||||
display="flex"
|
||||
minH="75px"
|
||||
justifyContent={{ xl: "center" }}
|
||||
lineHeight="25.6px"
|
||||
mx="auto"
|
||||
mt={secondaryMargin}
|
||||
pb="8px"
|
||||
left={document.documentElement.dir === "rtl" ? "30px" : ""}
|
||||
right={document.documentElement.dir === "rtl" ? "" : "30px"}
|
||||
px={{
|
||||
sm: paddingX,
|
||||
md: "30px",
|
||||
}}
|
||||
ps={{
|
||||
xl: "12px",
|
||||
}}
|
||||
pt="8px"
|
||||
top="18px"
|
||||
w={{ sm: "calc(100vw - 30px)", xl: "calc(100vw - 75px - 275px)" }}
|
||||
>
|
||||
<Flex
|
||||
w="100%"
|
||||
flexDirection={{
|
||||
sm: "column",
|
||||
md: "row",
|
||||
}}
|
||||
alignItems={{ xl: "center" }}
|
||||
>
|
||||
<Box mb={{ sm: "8px", md: "0px" }}>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem color={mainText}>
|
||||
<BreadcrumbLink href="#" color={secondaryText}>
|
||||
Pages
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
|
||||
<BreadcrumbItem color={mainText}>
|
||||
<BreadcrumbLink href="#" color={mainText}>
|
||||
{brandText}
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
{/* Here we create navbar brand, based on route name */}
|
||||
<Link
|
||||
color={mainText}
|
||||
href="#"
|
||||
bg="inherit"
|
||||
borderRadius="inherit"
|
||||
fontWeight="bold"
|
||||
_hover={{ color: { mainText } }}
|
||||
_active={{
|
||||
bg: "inherit",
|
||||
transform: "none",
|
||||
borderColor: "transparent",
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
{brandText}
|
||||
</Link>
|
||||
</Box>
|
||||
<HamburgerIcon
|
||||
w="100px"
|
||||
h="20px"
|
||||
ms="20px"
|
||||
color="#fff"
|
||||
cursor="pointer"
|
||||
display={{ sm: "none", xl: "block" }}
|
||||
onClick={() => {
|
||||
setSidebarWidth(sidebarWidth === 275 ? 120 : 275);
|
||||
setToggleSidebar(!toggleSidebar);
|
||||
}}
|
||||
/>
|
||||
<Box ms="auto" w={{ sm: "100%", md: "unset" }}>
|
||||
<AdminNavbarLinks
|
||||
onOpen={props.onOpen}
|
||||
logoText={props.logoText}
|
||||
secondary={props.secondary}
|
||||
fixed={props.fixed}
|
||||
scrolled={scrolled}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
AdminNavbar.propTypes = {
|
||||
brandText: PropTypes.string,
|
||||
variant: PropTypes.string,
|
||||
secondary: PropTypes.bool,
|
||||
fixed: PropTypes.bool,
|
||||
onOpen: PropTypes.func,
|
||||
};
|
||||
253
src/components/Navbars/AdminNavbarLinks.js
Normal file
253
src/components/Navbars/AdminNavbarLinks.js
Normal file
@@ -0,0 +1,253 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 Icons
|
||||
import { BellIcon } from "@chakra-ui/icons";
|
||||
// Chakra Imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Text,
|
||||
Stack,
|
||||
Box,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
Avatar,
|
||||
HStack,
|
||||
Divider,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import avatar1 from "assets/img/avatars/avatar1.png";
|
||||
import avatar2 from "assets/img/avatars/avatar2.png";
|
||||
import avatar3 from "assets/img/avatars/avatar3.png";
|
||||
// Custom Icons
|
||||
import { ProfileIcon, SettingsIcon } from "components/Icons/Icons";
|
||||
// Custom Components
|
||||
import { ItemContent } from "components/Menu/ItemContent";
|
||||
import { SearchBar } from "components/Navbars/SearchBar/SearchBar";
|
||||
import { SidebarResponsive } from "components/Sidebar/Sidebar";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import routes from "routes.js";
|
||||
import {
|
||||
ArgonLogoDark,
|
||||
ChakraLogoDark,
|
||||
ArgonLogoLight,
|
||||
ChakraLogoLight,
|
||||
} from "components/Icons/Icons";
|
||||
import { useAuth } from "contexts/AuthContext";
|
||||
|
||||
export default function HeaderLinks(props) {
|
||||
const {
|
||||
variant,
|
||||
children,
|
||||
fixed,
|
||||
scrolled,
|
||||
secondary,
|
||||
onOpen,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
const { user, isAuthenticated, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Chakra Color Mode
|
||||
let navbarIcon =
|
||||
fixed && scrolled
|
||||
? useColorModeValue("gray.700", "gray.200")
|
||||
: useColorModeValue("white", "gray.200");
|
||||
let menuBg = useColorModeValue("white", "navy.800");
|
||||
if (secondary) {
|
||||
navbarIcon = "white";
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate("/auth/signin");
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
pe={{ sm: "0px", md: "16px" }}
|
||||
w={{ sm: "100%", md: "auto" }}
|
||||
alignItems="center"
|
||||
flexDirection="row"
|
||||
>
|
||||
<SearchBar me="18px" />
|
||||
|
||||
{/* 用户认证状态 */}
|
||||
{isAuthenticated ? (
|
||||
// 已登录用户 - 显示用户菜单
|
||||
<Menu>
|
||||
<MenuButton>
|
||||
<HStack spacing={2} cursor="pointer">
|
||||
<Avatar
|
||||
size="sm"
|
||||
name={user?.name}
|
||||
src={user?.avatar}
|
||||
bg="blue.500"
|
||||
/>
|
||||
<Text
|
||||
display={{ sm: "none", md: "flex" }}
|
||||
color={navbarIcon}
|
||||
fontSize="sm"
|
||||
fontWeight="medium"
|
||||
>
|
||||
{user?.name || user?.email}
|
||||
</Text>
|
||||
</HStack>
|
||||
</MenuButton>
|
||||
<MenuList p="16px 8px" bg={menuBg}>
|
||||
<Flex flexDirection="column">
|
||||
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
|
||||
<HStack spacing={3}>
|
||||
<Avatar size="sm" name={user?.name} src={user?.avatar} />
|
||||
<Box>
|
||||
<Text fontWeight="bold" fontSize="sm">{user?.name}</Text>
|
||||
<Text fontSize="xs" color="gray.500">{user?.email}</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
</MenuItem>
|
||||
<Divider my={2} />
|
||||
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
|
||||
<Text>个人资料</Text>
|
||||
</MenuItem>
|
||||
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/settings")}>
|
||||
<Text>设置</Text>
|
||||
</MenuItem>
|
||||
<Divider my={2} />
|
||||
<MenuItem borderRadius="8px" onClick={handleLogout}>
|
||||
<Text color="red.500">退出登录</Text>
|
||||
</MenuItem>
|
||||
</Flex>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
) : (
|
||||
// 未登录用户 - 显示登录按钮
|
||||
<NavLink to="/auth/signin">
|
||||
<Button
|
||||
ms="0px"
|
||||
px="0px"
|
||||
me={{ sm: "2px", md: "16px" }}
|
||||
color={navbarIcon}
|
||||
variant="no-effects"
|
||||
rightIcon={
|
||||
document.documentElement.dir ? (
|
||||
""
|
||||
) : (
|
||||
<ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
|
||||
)
|
||||
}
|
||||
leftIcon={
|
||||
document.documentElement.dir ? (
|
||||
<ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
>
|
||||
<Text display={{ sm: "none", md: "flex" }}>登录</Text>
|
||||
</Button>
|
||||
</NavLink>
|
||||
)}
|
||||
|
||||
<SidebarResponsive
|
||||
logo={
|
||||
<Stack direction="row" spacing="12px" align="center" justify="center">
|
||||
{colorMode === "dark" ? (
|
||||
<ArgonLogoLight w="74px" h="27px" />
|
||||
) : (
|
||||
<ArgonLogoDark w="74px" h="27px" />
|
||||
)}
|
||||
<Box
|
||||
w="1px"
|
||||
h="20px"
|
||||
bg={colorMode === "dark" ? "white" : "gray.700"}
|
||||
/>
|
||||
{colorMode === "dark" ? (
|
||||
<ChakraLogoLight w="82px" h="21px" />
|
||||
) : (
|
||||
<ChakraLogoDark w="82px" h="21px" />
|
||||
)}
|
||||
</Stack>
|
||||
}
|
||||
colorMode={colorMode}
|
||||
secondary={props.secondary}
|
||||
routes={routes}
|
||||
{...rest}
|
||||
/>
|
||||
<SettingsIcon
|
||||
cursor="pointer"
|
||||
ms={{ base: "16px", xl: "0px" }}
|
||||
me="16px"
|
||||
onClick={props.onOpen}
|
||||
color={navbarIcon}
|
||||
w="18px"
|
||||
h="18px"
|
||||
/>
|
||||
<Menu>
|
||||
<MenuButton>
|
||||
<BellIcon color={navbarIcon} w="18px" h="18px" />
|
||||
</MenuButton>
|
||||
<MenuList p="16px 8px" bg={menuBg}>
|
||||
<Flex flexDirection="column">
|
||||
<MenuItem borderRadius="8px" mb="10px">
|
||||
<ItemContent
|
||||
time="13 minutes ago"
|
||||
info="from Alicia"
|
||||
boldInfo="New Message"
|
||||
aName="Alicia"
|
||||
aSrc={avatar1}
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem borderRadius="8px" mb="10px">
|
||||
<ItemContent
|
||||
time="2 days ago"
|
||||
info="by Josh Henry"
|
||||
boldInfo="New Album"
|
||||
aName="Josh Henry"
|
||||
aSrc={avatar2}
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem borderRadius="8px">
|
||||
<ItemContent
|
||||
time="3 days ago"
|
||||
info="Payment succesfully completed!"
|
||||
boldInfo=""
|
||||
aName="Kara"
|
||||
aSrc={avatar3}
|
||||
/>
|
||||
</MenuItem>
|
||||
</Flex>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
HeaderLinks.propTypes = {
|
||||
variant: PropTypes.string,
|
||||
fixed: PropTypes.bool,
|
||||
secondary: PropTypes.bool,
|
||||
onOpen: PropTypes.func,
|
||||
};
|
||||
675
src/components/Navbars/AuthNavbar.js
Normal file
675
src/components/Navbars/AuthNavbar.js
Normal file
@@ -0,0 +1,675 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 = (
|
||||
<Link
|
||||
href={`${process.env.PUBLIC_URL}/#/`}
|
||||
target='_blank'
|
||||
display='flex'
|
||||
lineHeight='100%'
|
||||
fontWeight='bold'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
color={mainText}
|
||||
>
|
||||
<Stack direction='row' spacing='12px' align='center' justify='center'>
|
||||
<ArgonLogoLight w='74px' h='27px' />
|
||||
<Box w='1px' h='20px' bg={'white'} />
|
||||
<ChakraLogoBlue w='82px' h='21px' />
|
||||
</Stack>
|
||||
<Text fontSize='sm' mt='3px'>
|
||||
{logoText}
|
||||
</Text>
|
||||
</Link>
|
||||
);
|
||||
|
||||
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 = (
|
||||
<Link
|
||||
href={`${process.env.PUBLIC_URL}/#/`}
|
||||
target='_blank'
|
||||
display='flex'
|
||||
lineHeight='100%'
|
||||
fontWeight='bold'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
color={mainText}
|
||||
>
|
||||
<Stack direction='row' spacing='12px' align='center' justify='center'>
|
||||
{colorMode === 'light' ? (
|
||||
<ArgonLogoDark w='74px' h='27px' />
|
||||
) : (
|
||||
<ArgonLogoLight w='74px' h='27px' />
|
||||
)}
|
||||
<Box w='1px' h='20px' bg={useColorModeValue('gray.700', 'white')} />
|
||||
{colorMode === 'light' ? (
|
||||
<ChakraLogoDark w='82px' h='21px' />
|
||||
) : (
|
||||
<ChakraLogoLight w='82px' h='21px' />
|
||||
)}
|
||||
</Stack>
|
||||
<Text fontSize='sm' mt='3px'>
|
||||
{logoText}
|
||||
</Text>
|
||||
</Link>
|
||||
);
|
||||
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 (
|
||||
<Stack key={key} direction='column'>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='6px'
|
||||
align='center'
|
||||
mb='6px'
|
||||
cursor='default'
|
||||
>
|
||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
||||
<RocketIcon color='inherit' />
|
||||
</IconBox>
|
||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
||||
Extra
|
||||
</Text>
|
||||
</Stack>
|
||||
{createExtraLinks(extraArr)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
if (link.authIcon) {
|
||||
return (
|
||||
<Stack key={key} direction='column'>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='6px'
|
||||
align='center'
|
||||
mb='6px'
|
||||
cursor='default'
|
||||
>
|
||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
||||
{link.authIcon}
|
||||
</IconBox>
|
||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
||||
{link.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
{createPagesLinks(link.items)}
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
if (link.component) {
|
||||
return (
|
||||
<NavLink key={key} to={link.layout + link.path}>
|
||||
<MenuItem
|
||||
ps='36px'
|
||||
py='0px'
|
||||
_hover={{ boxShadow: 'none', bg: 'none' }}
|
||||
borderRadius='12px'
|
||||
>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
{link.name}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</NavLink>
|
||||
);
|
||||
} else {
|
||||
return <Fragment key={key}>{createPagesLinks(link.items)}</Fragment>;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createExtraLinks = (routes) => {
|
||||
return routes.map((link, key) => {
|
||||
return (
|
||||
<NavLink key={key} to={link.layout + link.path}>
|
||||
<MenuItem
|
||||
ps='36px'
|
||||
py='0px'
|
||||
_hover={{ boxShadow: 'none', bg: 'none' }}
|
||||
borderRadius='12px'
|
||||
>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
{link.name}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</NavLink>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const createAuthLinks = (routes) => {
|
||||
return routes.map((link, key) => {
|
||||
if (link.authIcon && link.collapse == true) {
|
||||
return (
|
||||
<Stack key={key} direction='column' my='auto'>
|
||||
<Menu placement='right'>
|
||||
<MenuButton
|
||||
p='5px'
|
||||
ps='10px'
|
||||
borderRadius='8px'
|
||||
_hover={{
|
||||
bg: useColorModeValue('gray.200', 'whiteAlpha.200'),
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='0px'
|
||||
align='center'
|
||||
cursor='default'
|
||||
>
|
||||
<Text
|
||||
fontWeight='bold'
|
||||
fontSize='sm'
|
||||
me='auto'
|
||||
color={textColor}
|
||||
>
|
||||
{link.name}
|
||||
</Text>
|
||||
<Icon
|
||||
as={GoChevronRight}
|
||||
color={mainText}
|
||||
w='14px'
|
||||
h='14px'
|
||||
fontWeight='2000'
|
||||
/>
|
||||
</Stack>
|
||||
</MenuButton>
|
||||
|
||||
<MenuList bg={menuBg}>{createAuthLinks(link.items)}</MenuList>
|
||||
</Menu>
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<NavLink key={key} to={link.layout + link.path}>
|
||||
<MenuItem ps='36px' py='5px' borderRadius='12px'>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
{link.name}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createApplicationLinks = (routes) => {
|
||||
return routes.map((link, key) => {
|
||||
return (
|
||||
<NavLink key={key} to={link.layout + link.path}>
|
||||
<Stack direction='row' spacing='12px' align='center' cursor='pointer'>
|
||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
||||
{link.authIcon}
|
||||
</IconBox>
|
||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
||||
{link.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</NavLink>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const createEcommerceLinks = (routes) => {
|
||||
return routes.map((link, key) => {
|
||||
if (link.authIcon) {
|
||||
return (
|
||||
<Stack key={key} direction='column'>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='6px'
|
||||
align='center'
|
||||
mb='6px'
|
||||
cursor='default'
|
||||
>
|
||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
||||
{link.authIcon}
|
||||
</IconBox>
|
||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
||||
{link.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
{createPagesLinks(link.items)}
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
if (link.component) {
|
||||
return (
|
||||
<NavLink key={key} to={link.layout + link.path}>
|
||||
<MenuItem
|
||||
ps='36px'
|
||||
py='0px'
|
||||
_hover={{ boxShadow: 'none', bg: 'none' }}
|
||||
borderRadius='12px'
|
||||
>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
{link.name}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</NavLink>
|
||||
);
|
||||
} else {
|
||||
return <>{createPagesLinks(link.items)}</>;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const linksAuth = (
|
||||
<HStack display={{ sm: 'none', lg: 'flex' }} spacing='12px'>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='4px'
|
||||
align='center'
|
||||
color='#fff'
|
||||
fontWeight='bold'
|
||||
onMouseEnter={onOpenPages}
|
||||
onMouseLeave={onClosePages}
|
||||
cursor='pointer'
|
||||
position='relative'
|
||||
>
|
||||
<Text fontSize='sm' color={mainText}>
|
||||
Pages
|
||||
</Text>
|
||||
<Icon
|
||||
as={GoChevronDown}
|
||||
color={mainText}
|
||||
w='14px'
|
||||
h='14px'
|
||||
fontWeight='2000'
|
||||
/>
|
||||
<Menu isOpen={isOpenPages}>
|
||||
<MenuList
|
||||
bg={menuBg}
|
||||
p='22px'
|
||||
minW='550px'
|
||||
cursor='default'
|
||||
borderRadius='15px'
|
||||
position='absolute'
|
||||
top='30px'
|
||||
left='-10px'
|
||||
>
|
||||
<Grid templateColumns='repeat(3, 1fr)' gap='16px'>
|
||||
{createPagesLinks(routes)}
|
||||
</Grid>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='4px'
|
||||
align='center'
|
||||
color='#fff'
|
||||
fontWeight='bold'
|
||||
onMouseEnter={onOpenAuth}
|
||||
onMouseLeave={onCloseAuth}
|
||||
cursor='pointer'
|
||||
position='relative'
|
||||
>
|
||||
<Text fontSize='sm' color={mainText}>
|
||||
Authentications
|
||||
</Text>
|
||||
<Icon
|
||||
as={GoChevronDown}
|
||||
color={mainText}
|
||||
w='14px'
|
||||
h='14px'
|
||||
fontWeight='2000'
|
||||
/>
|
||||
<Menu isOpen={isOpenAuth}>
|
||||
<MenuList
|
||||
bg={menuBg}
|
||||
p='22px'
|
||||
minW='450px'
|
||||
cursor='default'
|
||||
borderRadius='15px'
|
||||
position='absolute'
|
||||
top='30px'
|
||||
left='-10px'
|
||||
>
|
||||
<Stack direction='row' spacing='24px'>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
bgImage={bgCard}
|
||||
minW='200px'
|
||||
maxW='200px'
|
||||
minH='230px'
|
||||
borderRadius='15px'
|
||||
>
|
||||
<IconBox
|
||||
bg='white'
|
||||
color='white'
|
||||
borderRadius='50%'
|
||||
h='50px'
|
||||
w='50px'
|
||||
mb='12px'
|
||||
>
|
||||
<Icon as={AiFillStar} w='25px' h='25px' color='blue.500' />
|
||||
</IconBox>
|
||||
<Text
|
||||
fontSize='xl'
|
||||
fontWeight='bold'
|
||||
color='#fff'
|
||||
maxW='80%'
|
||||
textAlign='center'
|
||||
>
|
||||
Explore our utilities pages
|
||||
</Text>
|
||||
</Flex>
|
||||
<Grid templateColumns='1fr' width='100%'>
|
||||
{createAuthLinks(authObject.items)}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='4px'
|
||||
align='center'
|
||||
color='#fff'
|
||||
fontWeight='bold'
|
||||
onMouseEnter={onOpenApplication}
|
||||
onMouseLeave={onCloseApplication}
|
||||
cursor='pointer'
|
||||
position='relative'
|
||||
>
|
||||
<Text fontSize='sm' color={mainText}>
|
||||
Application
|
||||
</Text>
|
||||
<Icon
|
||||
as={GoChevronDown}
|
||||
color={mainText}
|
||||
w='14px'
|
||||
h='14px'
|
||||
fontWeight='2000'
|
||||
/>
|
||||
<Menu isOpen={isOpenApplication}>
|
||||
<MenuList
|
||||
bg={menuBg}
|
||||
p='22px'
|
||||
cursor='default'
|
||||
borderRadius='15px'
|
||||
position='absolute'
|
||||
top='30px'
|
||||
left='-10px'
|
||||
>
|
||||
<Grid templateColumns='1fr' gap='16px'>
|
||||
{createApplicationLinks(applicationsObject.items)}
|
||||
</Grid>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='4px'
|
||||
align='center'
|
||||
color='#fff'
|
||||
fontWeight='bold'
|
||||
onMouseEnter={onOpenEcommerce}
|
||||
onMouseLeave={onCloseEcommerce}
|
||||
cursor='pointer'
|
||||
position='relative'
|
||||
>
|
||||
<Text fontSize='sm' color={mainText}>
|
||||
Ecommerce
|
||||
</Text>
|
||||
<Icon
|
||||
as={GoChevronDown}
|
||||
color={mainText}
|
||||
w='14px'
|
||||
h='14px'
|
||||
fontWeight='2000'
|
||||
/>
|
||||
<Menu isOpen={isOpenEcommerce}>
|
||||
<MenuList
|
||||
bg={menuBg}
|
||||
p='22px'
|
||||
minW='350px'
|
||||
cursor='default'
|
||||
borderRadius='15px'
|
||||
position='absolute'
|
||||
top='30px'
|
||||
left='-10px'
|
||||
>
|
||||
<Grid templateColumns='repeat(2, 1fr)' gap='16px'>
|
||||
{createEcommerceLinks(ecommerceObject.items)}
|
||||
</Grid>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Stack>
|
||||
</HStack>
|
||||
);
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={{ sidebarWidth }}>
|
||||
<Flex
|
||||
position={navbarPosition}
|
||||
top='16px'
|
||||
left='50%'
|
||||
transform='translate(-50%, 0px)'
|
||||
background={navbarBg}
|
||||
boxShadow={navbarShadow}
|
||||
borderRadius='15px'
|
||||
px='16px'
|
||||
py='22px'
|
||||
mx='auto'
|
||||
width='1044px'
|
||||
maxW='90%'
|
||||
alignItems='center'
|
||||
zIndex='3'
|
||||
>
|
||||
<Flex w='100%' justifyContent={{ sm: 'start', lg: 'space-between' }}>
|
||||
{brand}
|
||||
<Box
|
||||
ms={{ base: 'auto', lg: '0px' }}
|
||||
display={{ base: 'flex', lg: 'none' }}
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<SidebarResponsive
|
||||
logo={
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='12px'
|
||||
align='center'
|
||||
justify='center'
|
||||
>
|
||||
{colorMode === 'dark' ? (
|
||||
<ArgonLogoLight w='74px' h='27px' />
|
||||
) : (
|
||||
<ArgonLogoDark w='74px' h='27px' />
|
||||
)}
|
||||
<Box
|
||||
w='1px'
|
||||
h='20px'
|
||||
bg={colorMode === 'dark' ? 'white' : 'gray.700'}
|
||||
/>
|
||||
{colorMode === 'dark' ? (
|
||||
<ChakraLogoLight w='82px' h='21px' />
|
||||
) : (
|
||||
<ChakraLogoDark w='82px' h='21px' />
|
||||
)}
|
||||
</Stack>
|
||||
}
|
||||
logoText={props.logoText}
|
||||
secondary={props.secondary}
|
||||
routes={routes}
|
||||
{...rest}
|
||||
/>
|
||||
</Box>
|
||||
{linksAuth}
|
||||
<Link href='https://www.creative-tim.com/product/argon-dashboard-chakra-pro'>
|
||||
<Button
|
||||
bg={bgButton}
|
||||
color={colorButton}
|
||||
fontSize='xs'
|
||||
variant='no-effects'
|
||||
px='30px'
|
||||
display={{
|
||||
sm: 'none',
|
||||
lg: 'flex',
|
||||
}}
|
||||
>
|
||||
Free Download
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
AuthNavbar.propTypes = {
|
||||
color: PropTypes.oneOf(['primary', 'info', 'success', 'warning', 'danger']),
|
||||
brandText: PropTypes.string,
|
||||
};
|
||||
1041
src/components/Navbars/HomeNavbar.js
Normal file
1041
src/components/Navbars/HomeNavbar.js
Normal file
File diff suppressed because it is too large
Load Diff
45
src/components/Navbars/SearchBar/SearchBar.js
Normal file
45
src/components/Navbars/SearchBar/SearchBar.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import {
|
||||
IconButton,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import { SearchIcon } from "@chakra-ui/icons";
|
||||
export function SearchBar(props) {
|
||||
// Pass the computed styles into the `__css` prop
|
||||
const { variant, children, ...rest } = props;
|
||||
// Chakra Color Mode
|
||||
const searchIconColor = useColorModeValue("gray.700", "gray.200");
|
||||
const inputBg = useColorModeValue("white", "navy.800");
|
||||
return (
|
||||
<InputGroup borderRadius='8px' w='200px' {...rest}>
|
||||
<InputLeftElement
|
||||
children={
|
||||
<IconButton
|
||||
bg='inherit'
|
||||
borderRadius='inherit'
|
||||
_hover={{}}
|
||||
_active={{
|
||||
bg: "inherit",
|
||||
transform: "none",
|
||||
borderColor: "transparent",
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
icon={
|
||||
<SearchIcon color={searchIconColor} w='15px' h='15px' />
|
||||
}></IconButton>
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
variant='search'
|
||||
fontSize='xs'
|
||||
bg={inputBg}
|
||||
placeholder='Type here...'
|
||||
/>
|
||||
</InputGroup>
|
||||
);
|
||||
}
|
||||
71
src/components/Navbars/Settings/SettingsBar.js
Normal file
71
src/components/Navbars/Settings/SettingsBar.js
Normal file
@@ -0,0 +1,71 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 {
|
||||
Button,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
Input,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { SettingsIcon } from "components/Icons/Icons";
|
||||
import React from "react";
|
||||
|
||||
export function SettingsBar() {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
// Chakra Color Mode
|
||||
const navbarIcon = useColorModeValue("gray.500", "gray.200");
|
||||
const settingsRef = React.useRef();
|
||||
return (
|
||||
<>
|
||||
<SettingsIcon
|
||||
ref={settingsRef}
|
||||
onClick={onOpen}
|
||||
color={navbarIcon}
|
||||
w="18px"
|
||||
h="18px"
|
||||
/>
|
||||
<Drawer
|
||||
isOpen={isOpen}
|
||||
placement="right"
|
||||
onClose={onClose}
|
||||
finalFocusRef={settingsRef}
|
||||
>
|
||||
<DrawerContent>
|
||||
<DrawerCloseButton />
|
||||
<DrawerHeader>Create your account</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<Input variant="main" placeholder="Type here..." />
|
||||
</DrawerBody>
|
||||
|
||||
<DrawerFooter>
|
||||
<Button variant="outline" me={3} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="blue">Save</Button>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user