navbars
() => {const bg = useColorModeValue("white", "gray.800");const mobileNav = useDisclosure();return (<React.Fragment><chakra.headerbg={bg}w="full"px={{base: 2,sm: 4,}}py={4}shadow="md"><Flex alignItems="center" justifyContent="space-between" mx="auto"><Flex><chakra.ahref="/"title="Choc Home Page"display="flex"alignItems="center"><Logo /><VisuallyHidden>Choc</VisuallyHidden></chakra.a><chakra.h1 fontSize="xl" fontWeight="medium" ml="2">Choc</chakra.h1></Flex><HStack display="flex" alignItems="center" spacing={1}><HStackspacing={1}mr={1}color="brand.500"display={{base: "none",md: "inline-flex",}}><Button variant="ghost">Features</Button><Button variant="ghost">Pricing</Button><Button variant="ghost">Blog</Button><Button variant="ghost">Company</Button><Button variant="ghost">Sign in</Button></HStack><Button colorScheme="brand" size="sm">Get Started</Button><Boxdisplay={{base: "inline-flex",md: "none",}}><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/><VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"onClick={mobileNav.onClose}/><Button w="full" variant="ghost">Features</Button><Button w="full" variant="ghost">Pricing</Button><Button w="full" variant="ghost">Blog</Button><Button w="full" variant="ghost">Company</Button><Button w="full" variant="ghost">Sign in</Button></VStack></Box></HStack></Flex></chakra.header></React.Fragment>);};
() => {const bg = useColorModeValue("white", "gray.800");const mobileNav = useDisclosure();return (<React.Fragment><chakra.headerbg={bg}w="full"px={{base: 2,sm: 4,}}py={4}shadow="md"><Flex alignItems="center" justifyContent="space-between" mx="auto"><HStack display="flex" spacing={3} alignItems="center"><Boxdisplay={{base: "inline-flex",md: "none",}}><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/><VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Buttonw="full"variant="ghost"leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack></Box><chakra.ahref="/"title="Choc Home Page"display="flex"alignItems="center"><Logo /><VisuallyHidden>Choc</VisuallyHidden></chakra.a><HStackspacing={3}display={{base: "none",md: "inline-flex",}}><Button variant="ghost" leftIcon={<AiFillHome />} size="sm">Dashboard</Button><Buttonvariant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}size="sm">Inbox</Button><Buttonvariant="ghost"leftIcon={<BsFillCameraVideoFill />}size="sm">Videos</Button></HStack></HStack><HStackspacing={3}display={mobileNav.isOpen ? "none" : "flex"}alignItems="center"><InputGroup><InputLeftElement pointerEvents="none"><AiOutlineSearch /></InputLeftElement><Input type="tel" placeholder="Search..." /></InputGroup><chakra.ap={3}color="gray.800"_dark={{color: "inherit",}}rounded="sm"_hover={{color: "gray.800",_dark: {color: "gray.600",},}}><AiFillBell /><VisuallyHidden>Notifications</VisuallyHidden></chakra.a><Avatarsize="sm"name="Dan Abrahmov"src="https://bit.ly/dan-abramov"/></HStack></Flex></chakra.header></React.Fragment>);};
() => {const bg = useColorModeValue("white", "gray.800");const mobileNav = useDisclosure();return (<Box shadow="md"><chakra.headerbg={bg}borderColor="gray.600"borderBottomWidth={1}w="full"px={{base: 2,sm: 4,}}py={4}><Flex alignItems="center" justifyContent="space-between" mx="auto"><HStack spacing={4} display="flex" alignItems="center"><Boxdisplay={{base: "inline-flex",md: "none",}}><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/><VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Buttonw="full"variant="ghost"leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack></Box><chakra.ahref="/"title="Choc Home Page"display="flex"alignItems="center"><Logo /><VisuallyHidden>Choc</VisuallyHidden></chakra.a><chakra.h1 fontSize="xl">Settings</chakra.h1></HStack><HStack spacing={3} display="flex" alignItems="center"><HStackspacing={3}display={{base: "none",md: "inline-flex",}}><Button variant="ghost" leftIcon={<AiFillHome />} size="sm">Dashboard</Button><Buttonvariant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}size="sm">Inbox</Button><Buttonvariant="ghost"leftIcon={<BsFillCameraVideoFill />}size="sm">Videos</Button></HStack><chakra.ap={3}color="gray.800"_dark={{color: "inherit",}}rounded="sm"_hover={{color: "gray.800",_dark: {color: "gray.600",},}}><AiFillBell /><VisuallyHidden>Notifications</VisuallyHidden></chakra.a><Avatarsize="sm"name="Dan Abrahmov"src="https://bit.ly/dan-abramov"/></HStack></Flex></chakra.header><FlexalignItems="center"justifyContent="space-between"mx={2}borderWidth={0}overflowX="auto"><Tabs defaultIndex={1} borderBottomColor="transparent"><TabList><Tabpy={4}m={0}_focus={{boxShadow: "none",}}>Basic</Tab><Tabpy={4}m={0}_focus={{boxShadow: "none",}}>Integrations</Tab><Tabpy={4}m={0}_focus={{boxShadow: "none",}}>Notifications</Tab><Tabpy={4}m={0}_focus={{boxShadow: "none",}}>Usage</Tab><Tabpy={4}m={0}_focus={{boxShadow: "none",}}>Billing</Tab>{" "}<Tab isDisabled py={4} m={0}>Advanced</Tab></TabList></Tabs><Spacer /><HStack spacing={3} alignItems="center"><InputGroupdisplay={{base: "none",lg: "block",}}ml="auto"><InputLeftElement pointerEvents="none"><AiOutlineSearch /></InputLeftElement><Input type="tel" placeholder="Search..." /></InputGroup></HStack></Flex></Box>);};
() => {const bg = useColorModeValue("white", "gray.800");const mobileNav = useDisclosure();return (<React.Fragment><chakra.headerbg={bg}w="full"px={{base: 2,sm: 4,}}py={4}shadow="md"><Flex alignItems="center" justifyContent="space-between" mx="auto"><HStack display="flex" spacing={3} alignItems="center"><Boxdisplay={{base: "inline-flex",md: "none",}}><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/><VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Buttonw="full"variant="ghost"leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack></Box><chakra.ahref="/"title="Choc Home Page"display="flex"alignItems="center"><Logo /><VisuallyHidden>Choc</VisuallyHidden></chakra.a><HStackspacing={3}display={{base: "none",md: "inline-flex",}}><Button variant="ghost" leftIcon={<AiFillHome />} size="sm">Dashboard</Button><Buttonvariant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}size="sm">Inbox</Button><Buttonvariant="ghost"leftIcon={<BsFillCameraVideoFill />}size="sm">Videos</Button></HStack></HStack><HStackspacing={3}display={mobileNav.isOpen ? "none" : "flex"}alignItems="center"><Button colorScheme="brand" leftIcon={<BsPlus />}>New Wallet</Button><chakra.ap={3}color="gray.800"_dark={{color: "inherit",}}rounded="sm"_hover={{color: "gray.800",_dark: {color: "gray.600",},}}><AiFillBell /><VisuallyHidden>Notifications</VisuallyHidden></chakra.a><Avatarsize="sm"name="Dan Abrahmov"src="https://bit.ly/dan-abramov"/></HStack></Flex></chakra.header></React.Fragment>);};
Proudly developed in by Anuoluwapo Abraham