404 lines
11 KiB
JavaScript
404 lines
11 KiB
JavaScript
/* eslint-disable */
|
|
'use client';
|
|
|
|
import logo from '/public/logo-horizon-boilerplate.png';
|
|
import {
|
|
Image,
|
|
Button,
|
|
Flex,
|
|
Icon,
|
|
Link,
|
|
Menu,
|
|
MenuButton,
|
|
MenuItem,
|
|
MenuList,
|
|
Text,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { IoIosStar, IoMdTrophy } from 'react-icons/io';
|
|
import { IoMenuOutline } from 'react-icons/io5';
|
|
import { MdChevronRight, MdPrivacyTip } from 'react-icons/md';
|
|
|
|
export default function AdminNavbar(props) {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('scroll', changeNavbar);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', changeNavbar);
|
|
};
|
|
});
|
|
const { secondary, message } = props;
|
|
|
|
// Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
|
|
let textColor = useColorModeValue('#120F43', 'white');
|
|
let borderColor = useColorModeValue('gray.300', 'white');
|
|
let navbarPosition = 'fixed';
|
|
let navbarFilter = 'none';
|
|
let navbarShadow = '45px 76px 113px 7px rgba(112, 144, 176, 0.08)';
|
|
let navbarBorder = 'transparent';
|
|
let paddingX = '15px';
|
|
let gap = '0px';
|
|
let navbarTop = '0px';
|
|
let menuBg = useColorModeValue('white', 'navy.800');
|
|
const changeNavbar = () => {
|
|
if (window.scrollY > 1) {
|
|
setScrolled(true);
|
|
} else {
|
|
setScrolled(false);
|
|
}
|
|
};
|
|
return (
|
|
<Flex
|
|
position={navbarPosition}
|
|
boxShadow={navbarShadow}
|
|
bg="white"
|
|
direction="column"
|
|
borderColor={navbarBorder}
|
|
filter={navbarFilter}
|
|
backgroundPosition="center"
|
|
backgroundSize="cover"
|
|
zIndex="200"
|
|
borderStyle="solid"
|
|
alignItems={{ xl: 'center' }}
|
|
display={secondary ? 'block' : 'flex'}
|
|
justifyContent={{ xl: 'center' }}
|
|
lineHeight="25.6px"
|
|
mx="auto"
|
|
left="50%"
|
|
transform="translate(-50%,0px)"
|
|
w="100%"
|
|
top={navbarTop}
|
|
>
|
|
{/* Misc */}
|
|
|
|
<Flex
|
|
w="100%"
|
|
display={{ base: 'none', lg: 'flex' }}
|
|
bg="#F3F5FA"
|
|
justifyContent="center"
|
|
>
|
|
<Flex
|
|
w={{
|
|
base: 'calc(100vw - 4%)',
|
|
md: 'calc(100vw - 4%)',
|
|
lg: '100vw',
|
|
xl: 'calc(100vw - 250px)',
|
|
'2xl': '1200px',
|
|
}}
|
|
px={{
|
|
sm: paddingX,
|
|
md: '10px',
|
|
lg: '12px',
|
|
}}
|
|
py="4px"
|
|
gap="40px"
|
|
justifyContent="center"
|
|
>
|
|
<Flex direction="row" alignItems="center">
|
|
<Icon
|
|
me="6px"
|
|
w="12px"
|
|
h="12px"
|
|
color="brand.500"
|
|
as={MdPrivacyTip}
|
|
/>
|
|
<Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
|
|
Founded in EU. We respect your privacy.
|
|
</Text>
|
|
</Flex>
|
|
<Flex direction="row" alignItems="center">
|
|
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
|
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
|
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
|
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
|
<Icon me="6px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
|
<Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
|
|
Loved by 80,000+ users worldwide
|
|
</Text>
|
|
</Flex>
|
|
<Flex direction="row" alignItems="center">
|
|
<Icon
|
|
me="6px"
|
|
w="12px"
|
|
h="12px"
|
|
color="brand.500"
|
|
as={IoMdTrophy}
|
|
/>
|
|
<Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
|
|
#1 NextJS boilerplate & admin template
|
|
|
|
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
|
|
{/* Misc */}
|
|
|
|
<Flex
|
|
w={{
|
|
base: 'calc(100vw - 4%)',
|
|
md: 'calc(100vw - 4%)',
|
|
lg: '100vw',
|
|
xl: 'calc(100vw - 250px)',
|
|
'2xl': '1200px',
|
|
}}
|
|
px={{
|
|
sm: paddingX,
|
|
md: '10px',
|
|
lg: '12px',
|
|
}}
|
|
py="20px"
|
|
ps={{
|
|
xl: '12px',
|
|
}}
|
|
flexDirection={{
|
|
sm: 'row',
|
|
md: 'row',
|
|
}}
|
|
alignItems="center"
|
|
justify="space-between"
|
|
mb={gap}
|
|
>
|
|
<Link
|
|
display={'flex'}
|
|
alignItems="center"
|
|
justifyContent={'center'}
|
|
href="/"
|
|
>
|
|
<Image
|
|
alt=" "
|
|
w="36px"
|
|
src={logo.src}
|
|
/>
|
|
<Text ms="8px" me="10px" fontWeight="800" color="#120F43">
|
|
Horizon UI Boilerplate
|
|
</Text>
|
|
</Link>
|
|
<Flex>
|
|
<Link
|
|
display={{ base: 'none', lg: 'block' }}
|
|
href="/dashboard/signin"
|
|
color="gray.600"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
letterSpacing="0px"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
Generator
|
|
</Link>
|
|
<Link
|
|
display={{ base: 'none', lg: 'block' }}
|
|
href="/#features"
|
|
color="gray.600"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
letterSpacing="0px"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
Features
|
|
</Link>
|
|
<Link
|
|
display={{ base: 'none', lg: 'block' }}
|
|
href="/pricing"
|
|
color="gray.600"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
letterSpacing="0px"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
Pricing
|
|
</Link>
|
|
<Link
|
|
display={{ base: 'none', lg: 'block' }}
|
|
href="#faqs"
|
|
color="gray.600"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
letterSpacing="0px"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
FAQs
|
|
</Link>
|
|
<Menu>
|
|
<MenuButton
|
|
display={{ base: 'block', xl: 'none' }}
|
|
p="0px !important"
|
|
maxH="20px"
|
|
maxW="20px"
|
|
alignContent="end"
|
|
>
|
|
<Icon
|
|
display={{ base: 'block', lg: 'none' }}
|
|
as={IoMenuOutline}
|
|
color={textColor}
|
|
w="20px"
|
|
h="20px"
|
|
_hover={{ cursor: 'pointer' }}
|
|
/>
|
|
</MenuButton>
|
|
<MenuList
|
|
p="0px"
|
|
mt="10px"
|
|
borderRadius="10px"
|
|
border="1px solid"
|
|
borderColor="#CBD5E0"
|
|
bg={menuBg}
|
|
>
|
|
<Flex flexDirection="column" p="10px">
|
|
<MenuItem
|
|
_hover={{ bg: 'none' }}
|
|
_focus={{ bg: 'none' }}
|
|
borderRadius="8px"
|
|
px="14px"
|
|
>
|
|
<Link
|
|
href="/dashboard/signin"
|
|
color="gray.600"
|
|
fontSize="md"
|
|
fontWeight="500"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
Generator
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem
|
|
_hover={{ bg: 'none' }}
|
|
_focus={{ bg: 'none' }}
|
|
borderRadius="8px"
|
|
px="14px"
|
|
>
|
|
<Link
|
|
href="/#features"
|
|
color="gray.600"
|
|
fontSize="md"
|
|
fontWeight="500"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
Features
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem
|
|
_hover={{ bg: 'none' }}
|
|
_focus={{ bg: 'none' }}
|
|
color="red.400"
|
|
borderRadius="8px"
|
|
>
|
|
<Link
|
|
href="/pricing"
|
|
color="gray.600"
|
|
fontSize="md"
|
|
fontWeight="500"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
Pricing
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem
|
|
_hover={{ bg: 'none' }}
|
|
_focus={{ bg: 'none' }}
|
|
color="red.400"
|
|
borderRadius="8px"
|
|
>
|
|
<Link
|
|
href="#faqs"
|
|
color="gray.600"
|
|
fontSize="md"
|
|
fontWeight="500"
|
|
me="30px"
|
|
my="auto"
|
|
>
|
|
FAQs
|
|
</Link>
|
|
</MenuItem>
|
|
<MenuItem
|
|
_hover={{ bg: 'none' }}
|
|
_focus={{ bg: 'none' }}
|
|
color="red.400"
|
|
borderRadius="8px"
|
|
>
|
|
<Link
|
|
href="/dashboard/signin"
|
|
color={textColor}
|
|
fontSize="md"
|
|
fontWeight="600"
|
|
me="18px"
|
|
my="auto"
|
|
letterSpacing="0px"
|
|
>
|
|
Login
|
|
</Link>
|
|
</MenuItem>
|
|
<Button
|
|
variant="transparent"
|
|
border="1px solid"
|
|
borderColor={borderColor}
|
|
color={textColor}
|
|
fontSize="md"
|
|
borderRadius="45px"
|
|
bg="transparent"
|
|
my="auto"
|
|
>
|
|
<Link href="/dashboard/signin">
|
|
Get started for Free
|
|
<Icon
|
|
as={MdChevronRight}
|
|
mt="3px"
|
|
ms="5px"
|
|
h="16px"
|
|
w="16px"
|
|
/>
|
|
</Link>
|
|
</Button>
|
|
</Flex>
|
|
</MenuList>
|
|
</Menu>
|
|
</Flex>
|
|
<Flex display={{ base: 'none', lg: 'flex' }}>
|
|
<Link
|
|
href="/dashboard/signin"
|
|
color={textColor}
|
|
fontSize="sm"
|
|
fontWeight="600"
|
|
me="18px"
|
|
letterSpacing="0px"
|
|
my="auto"
|
|
>
|
|
Login
|
|
</Link>
|
|
|
|
<Link href="/dashboard/signin">
|
|
<Button
|
|
variant="transparent"
|
|
border="1px solid"
|
|
borderColor={borderColor}
|
|
color={textColor}
|
|
fontSize="sm"
|
|
borderRadius="45px"
|
|
px="18px"
|
|
py="12px"
|
|
bg="transparent"
|
|
my="auto"
|
|
>
|
|
{' '}
|
|
Get started for Free
|
|
<Icon as={MdChevronRight} mt="3px" h="16px" w="16px" />
|
|
</Button>
|
|
</Link>
|
|
</Flex>
|
|
</Flex>
|
|
{secondary ? <Text color="white">{message}</Text> : null}
|
|
</Flex>
|
|
);
|
|
}
|