Created
October 18, 2022 18:32
-
-
Save HarcourtHamsa/ed55448fcda42bfabbd05bb956bc2810 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// EXAMPLE USAGE | |
// <Wrapper> | |
// your code goes here | |
// </Wrapper> | |
import React, { useState, useEffect } from "react"; | |
import { | |
IconButton, | |
Box, | |
CloseButton, | |
Flex, | |
Icon, | |
useColorModeValue, | |
Link, | |
Drawer, | |
DrawerContent, | |
Text, | |
useDisclosure, | |
Alert, | |
} from "@chakra-ui/react"; | |
import { | |
FiHome, | |
FiTrendingUp, | |
FiCompass, | |
FiStar, | |
FiSettings, | |
FiMenu, | |
} from "react-icons/fi"; | |
import { | |
BiCloudDownload, | |
BiBox, | |
BiDollarCircle, | |
BiGridAlt, | |
BiTime, | |
BiLogOut, | |
} from "react-icons/bi"; | |
import Logo from "../../assets/images/logo.svg"; | |
import Image from "next/image"; | |
import { ImFlattr } from "react-icons/im"; | |
import helpers from "../../helpers"; | |
import { useRouter } from "next/router"; | |
const LinkItems = [ | |
{ name: "Dashboard", href: "/dashboard", icon: BiGridAlt }, | |
{ name: "Deposit", href: "/dashboard/payment", icon: BiCloudDownload }, | |
{ name: "Plans", href: "/dashboard/invest", icon: BiBox }, | |
{ name: "Withdraw", href: "/dashboard/withdraw", icon: BiDollarCircle }, | |
{ name: "History", href: "/dashboard/transactions", icon: BiTime }, | |
]; | |
export default function Wrapper({ children }) { | |
const { isOpen, onOpen, onClose } = useDisclosure(); | |
const [user, setUser] = useState(null); | |
async function fetchUser() { | |
const res = await helpers.getUserDetailsFromLocalStorage(); | |
setUser(res); | |
} | |
useEffect(() => { | |
fetchUser(); | |
}, []); | |
return ( | |
<Box minH="100vh" bg={useColorModeValue("gray.100", "gray.900")}> | |
<SidebarContent | |
onClose={() => onClose} | |
display={{ base: "none", md: "block" }} | |
/> | |
<Drawer | |
autoFocus={false} | |
isOpen={isOpen} | |
placement="left" | |
onClose={onClose} | |
returnFocusOnClose={false} | |
onOverlayClick={onClose} | |
size="full" | |
> | |
<DrawerContent> | |
<SidebarContent onClose={onClose} /> | |
</DrawerContent> | |
</Drawer> | |
{/* mobilenav */} | |
<MobileNav display={{ base: "flex", md: "none" }} onOpen={onOpen} /> | |
<Box ml={{ base: 0, md: 60 }} p="4"> | |
{children} | |
</Box> | |
</Box> | |
); | |
} | |
const SidebarContent = ({ onClose, ...rest }) => { | |
const Router = useRouter(); | |
return ( | |
<Box | |
bg={useColorModeValue("black", "gray.900")} | |
borderRight="1px" | |
borderRightColor={useColorModeValue("gray.200", "gray.700")} | |
w={{ base: "full", md: 60 }} | |
pos="fixed" | |
h="full" | |
{...rest} | |
> | |
<Flex h="20" alignItems="center" mx="8" justifyContent="space-between"> | |
<ImFlattr size={30} color="white"/> | |
<CloseButton | |
display={{ base: "flex", md: "none" }} | |
onClick={onClose} | |
color="white" | |
size={30} | |
/> | |
</Flex> | |
{LinkItems.map((link) => ( | |
<NavItem key={link.name} icon={link.icon} href={link.href}> | |
{link.name} | |
</NavItem> | |
))} | |
<Text | |
_hover={{ cursor: "pointer", color: "yellow.400" }} | |
color="white" | |
style={{ textDecoration: "none" }} | |
p="4" | |
alignItems="center" | |
display="flex" | |
// bg="red" | |
mx="4" | |
mt={30} | |
onClick={() => { | |
helpers.logout(); | |
Router.push("/"); | |
}} | |
> | |
<Icon | |
mr="4" | |
fontSize="25" | |
_groupHover={{ | |
color: "white", | |
}} | |
as={BiLogOut} | |
/> | |
Log out | |
</Text> | |
</Box> | |
); | |
}; | |
const NavItem = ({ icon, href, children, ...rest }) => { | |
return ( | |
<Link | |
href={href} | |
color="white" | |
style={{ textDecoration: "none" }} | |
_focus={{ boxShadow: "none" }} | |
> | |
<Flex | |
align="center" | |
p="4" | |
mx="4" | |
borderRadius="lg" | |
role="group" | |
cursor="pointer" | |
_hover={{ | |
color: "yellow.400", | |
}} | |
{...rest} | |
> | |
{icon && ( | |
<Icon | |
mr="4" | |
fontSize="25" | |
_groupHover={{ | |
color: "white", | |
}} | |
as={icon} | |
/> | |
)} | |
{children} | |
</Flex> | |
</Link> | |
); | |
}; | |
const MobileNav = ({ onOpen, ...rest }) => { | |
return ( | |
<Flex | |
ml={{ base: 0, md: 60 }} | |
px={{ base: 4, md: 24 }} | |
height="20" | |
alignItems="center" | |
bg={useColorModeValue("black", "gray.900")} | |
borderBottomWidth="1px" | |
borderBottomColor={useColorModeValue("gray.200", "gray.700")} | |
justifyContent="space-between" | |
{...rest} | |
> | |
<Image src={Logo} alt="" /> | |
<IconButton | |
variant="ghost" | |
onClick={onOpen} | |
aria-label="open menu" | |
icon={<FiMenu color="white" size={30} />} | |
/> | |
</Flex> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment