Skip to content

I worked on sidebar specifically #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eneskokay wants to merge 1 commit into
base: main
Choose a base branch
from
Open

I worked on sidebar specifically #238

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 164 additions & 22 deletions src/components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ import {
Flex,
Link,
Image,
Drawer,
DrawerBody,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
useDisclosure,
} from "@chakra-ui/react";
import { GiHamburgerMenu } from "@react-icons/all-files/gi/GiHamburgerMenu";
// import { BiSun } from "@react-icons/all-files/bi/BiSun";
Expand All @@ -20,11 +28,22 @@ import { useCore } from "@/providers/CoreProvider";
import ConnectWalletTag from "./ConnectWalletTag";
import { sidebarArr } from "@/utils/json";
import { webColor } from "@/theme/index";
import { useEffect, useState } from "react";

const Layout = ({ children, currentApp }) => {
const { isSidebar, setIsSidebar } = useCore();
const [deviceIsMobile, setDeviceIsMobile] = useState(null);
const { isOpen, onOpen, onClose } = useDisclosure()
// const { colorMode, toggleColorMode } = useColorMode();

useEffect(() => {
if (window.innerWidth < 768) {
setDeviceIsMobile(true);
} else {
setDeviceIsMobile(false);
}
}, []);

const sidebarBG = useColorModeValue(
webColor.sidebarBg[0],
webColor.sidebarBg[1],
Expand Down Expand Up @@ -71,25 +90,25 @@ const Layout = ({ children, currentApp }) => {
color={defaultColor}
fontSize="16pt"
_hover={{ bg: "transparent", color: defaultColor }}
onClick={() => setIsSidebar(!isSidebar)}
onClick={() => { deviceIsMobile === false ? setIsSidebar(!isSidebar) : onOpen() }}
>
<GiHamburgerMenu />
</IconButton>
</HStack>
<HStack spacing="2em">
{/* <IconButton
aria-label='Toggle Color Mode'
bg='transparent'
color={defaultColor}
_hover={{ bg: 'transparent', color: defaultColor }}
onClick={toggleColorMode}
>
{colorMode === 'light' ? <BiMoon /> : <BiSun />}
</IconButton> */}
{/* <IconButton
aria-label='Toggle Color Mode'
bg='transparent'
color={defaultColor}
_hover={{ bg: 'transparent', color: defaultColor }}
onClick={toggleColorMode}
>
{colorMode === 'light' ? <BiMoon /> : <BiSun />}
</IconButton> */}
<ConnectWalletTag isUserProfile isPayments isCopyAddress />
</HStack>
</HStack>
{isSidebar && (
</HStack >
{isSidebar && deviceIsMobile === false && (
<VStack
position="fixed"
top="0"
Expand All @@ -106,11 +125,11 @@ const Layout = ({ children, currentApp }) => {
zIndex="1337 !important"
>
{sidebarArr?.map((item, idx) => (
<VStack key={idx} spacing="1.5em" alignItems="flex-start" w="full">
<Text fontSize="10pt">{item.parent.toUpperCase()}</Text>
<VStack spacing=".25em" w="full">
<VStack key={idx} alignItems="flex-start" w="full">
<Text fontSize="10pt" color={"#D4D4D4"}>{item.parent.toUpperCase()}</Text>
<VStack spacing=".25em" w="full" >
{item.items.map((nav, idx) => (
<Box key={idx} w="full">
<Box key={idx} w="full" >
{!nav.isExternal ? (
<NextLink href={`/dashboard${nav.link}`} shallow passHref>
<Button
Expand All @@ -126,7 +145,7 @@ const Layout = ({ children, currentApp }) => {
_focus={{ bg: "transparent" }}
color={
currentApp ===
nav.name.replace(" ", "").toLowerCase()
nav.name.replace(" ", "").toLowerCase()
? "rgb(52,140,212)"
: null
}
Expand Down Expand Up @@ -154,7 +173,7 @@ const Layout = ({ children, currentApp }) => {
_focus={{ bg: "transparent" }}
color={
currentApp ===
nav.name.replace(" ", "").toLowerCase()
nav.name.replace(" ", "").toLowerCase()
? "rgb(52,140,212)"
: null
}
Expand All @@ -163,14 +182,14 @@ const Layout = ({ children, currentApp }) => {
</Button>
</Link>
)}
<VStack spacing="0" pl="1.5em">
<VStack spacing="0" pl="1.4em" >
{nav.children.map((children, idx) => (
<NextLink
href={`/dashboard${children.link}`}
shallow
passHref
key={idx}
style={{ width: "100%" }}
style={{ width: '100%', borderLeft: 'solid 2px #2D2F39', position: 'relative' }}
>
<Button
borderRadius="0"
Expand All @@ -189,7 +208,12 @@ const Layout = ({ children, currentApp }) => {
: null
}
>
{children.name}
<div style={{ position: 'absolute', left: '-2px', transform: 'translate(0px, -2px)' }}>
<svg width="13" height="8" viewBox="0 0 13 8" fill="#2D2F39" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C4.68629 6 2 3.31371 2 0H0C0 4.41828 3.58172 8 8 8H13V6H8Z" fill="#2D2F39" />
</svg>
</div>
<span style={{ paddingLeft: '2px' }}>{children.name}</span>
</Button>
</NextLink>
))}
Expand All @@ -201,11 +225,129 @@ const Layout = ({ children, currentApp }) => {
))}
</VStack>
)}
{deviceIsMobile &&
<>
<Drawer
isOpen={isOpen}
placement='left'
onClose={onClose}
size="full"
>
<DrawerOverlay />
<DrawerContent
bg={sidebarBG}
>
<DrawerCloseButton />
<DrawerBody>
{sidebarArr?.map((item, idx) => (
<VStack key={idx} alignItems="flex-start" w="full">
<Text fontSize="10pt" color={"#D4D4D4"}>{item.parent.toUpperCase()}</Text>
<VStack spacing=".25em" w="full" >
{item.items.map((nav, idx) => (
<Box key={idx} w="full" >
{!nav.isExternal ? (
<NextLink href={`/dashboard${nav.link}`} shallow passHref>
<Button
borderRadius="0"
leftIcon={nav.icon}
w="full"
justifyContent="flex-start"
bg="transparent"
_hover={{
bg: "transparent",
color: "rgb(52,140,212)",
}}
_focus={{ bg: "transparent" }}
color={
currentApp ===
nav.name.replace(" ", "").toLowerCase()
? "rgb(52,140,212)"
: null
}
>
{nav.name}
</Button>
</NextLink>
) : (
<Link
href={nav.link}
isExternal
style={{ textDecoration: "none" }}
color="inherit"
>
<Button
borderRadius="0"
leftIcon={nav.icon}
w="full"
justifyContent="flex-start"
bg="transparent"
_hover={{
bg: "transparent",
color: "rgb(52,140,212)",
}}
_focus={{ bg: "transparent" }}
color={
currentApp ===
nav.name.replace(" ", "").toLowerCase()
? "rgb(52,140,212)"
: null
}
>
{nav.name}
</Button>
</Link>
)}
<VStack spacing="0" pl="1.4em" >
{nav.children.map((children, idx) => (
<NextLink
href={`/dashboard${children.link}`}
shallow
passHref
key={idx}
style={{ width: '100%', borderLeft: 'solid 2px #2D2F39', position: 'relative' }}
>
<Button
borderRadius="0"
w="full"
justifyContent="flex-start"
bg="transparent"
fontSize="10pt"
_hover={{
bg: "transparent",
color: "rgb(52,140,212)",
}}
_focus={{ bg: "transparent" }}
color={
currentApp === children.name.toLowerCase()
? "rgb(52,140,212)"
: null
}
>
<div style={{ position: 'absolute', left: '-2px', transform: 'translate(0px, -2px)' }}>
<svg width="13" height="8" viewBox="0 0 13 8" fill="#2D2F39" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C4.68629 6 2 3.31371 2 0H0C0 4.41828 3.58172 8 8 8H13V6H8Z" fill="#2D2F39" />
</svg>
</div>
<span style={{ paddingLeft: '2px' }}>{children.name}</span>
</Button>
</NextLink>
))}
</VStack>
</Box>
))}
</VStack>
</VStack>
))}
</DrawerBody>
</DrawerContent>
</Drawer>
</>
}
<Flex
flexDir="column"
pt="80px"
pb="102px"
ml={isSidebar ? "245px" : "0"}
ml={(isSidebar && deviceIsMobile === false) ? "245px" : "0"}
px="2rem"
minH="100vh"
>
Expand Down