Implemented sidebar and changed linting rules

This commit is contained in:
qt-coder 2021-07-05 18:01:49 +08:00
parent 371c567604
commit 074709b607
4 changed files with 47 additions and 26 deletions

View file

@ -1,3 +1,7 @@
{ {
"extends": ["next", "next/core-web-vitals"] "extends": ["next", "next/core-web-vitals"],
"rules": {
"react/no-unescaped-entities": "off",
"@next/next/no-page-custom-font": "off"
}
} }

View file

@ -20,7 +20,10 @@ import { AiFillGift } from "react-icons/ai";
import { FiMenu, FiSearch } from "react-icons/fi"; import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode } from "react-icons/hi"; import { HiCode } from "react-icons/hi";
import { MdKeyboardArrowRight, MdHome } from "react-icons/md"; import { MdKeyboardArrowRight, MdHome } from "react-icons/md";
import AuthButton from '../AuthButton'
import Link from 'next/link'
import React from "react"; import React from "react";
import {session} from 'next-auth/client'
export default function Sidebar({children}) { export default function Sidebar({children}) {
const sidebar = useDisclosure(); const sidebar = useDisclosure();
@ -77,16 +80,18 @@ export default function Sidebar({children}) {
w="60" w="60"
{...props} {...props}
> >
<Flex px="4" py="5" align="center"> <Link href='/'>
<Text <Flex px="4" py="5" align="center">
fontSize="2xl" <Text
ml="2" fontSize="2xl"
color={useColorModeValue("brand.500", "white")} ml="2"
fontWeight="semibold" color={useColorModeValue("brand.500", "white")}
> fontWeight="semibold"
Cath.exe >
</Text> Cath.exe
</Flex> </Text>
</Flex>
</Link>
<Flex <Flex
direction="column" direction="column"
as="nav" as="nav"
@ -104,14 +109,19 @@ export default function Sidebar({children}) {
/> />
</NavItem> </NavItem>
<Collapse in={integrations.isOpen}> <Collapse in={integrations.isOpen}>
<NavItem pl="12" py="2"> <Link href='/controlpanel'>
Main <NavItem pl="12" py="2">
</NavItem> Main
<NavItem pl="12" py="2"> </NavItem>
Commands </Link>
</NavItem> <Link href='controlpanel/commands'>
<NavItem pl="12" py="2">
Commands
</NavItem>
</Link>
</Collapse> </Collapse>
<NavItem icon={AiFillGift}>Coming Soon</NavItem> <NavItem icon={AiFillGift}>Coming Soon</NavItem>
<AuthButton/>
</Flex> </Flex>
</Box> </Box>
); );
@ -151,10 +161,8 @@ export default function Sidebar({children}) {
icon={<FiMenu />} icon={<FiMenu />}
size="sm" size="sm"
/> />
<InputGroup w="96" display={{ base: "none", md: "flex" }}> <Flex w="96">
<InputLeftElement color="gray.500" children={<FiSearch />} /> </Flex>
<Input placeholder="Search for articles..." />
</InputGroup>
<Flex align="center"> <Flex align="center">
<Icon color="gray.500" as={FaBell} cursor="pointer" /> <Icon color="gray.500" as={FaBell} cursor="pointer" />
@ -162,7 +170,7 @@ export default function Sidebar({children}) {
ml="4" ml="4"
size="sm" size="sm"
name="anubra266" name="anubra266"
src="https://avatars.githubusercontent.com/u/30869823?v=4" src=''
cursor="pointer" cursor="pointer"
/> />
</Flex> </Flex>

View file

@ -19,10 +19,17 @@ function MyApp({ Component, pageProps }) {
<link rel="icon" href="/logo.png" type="image/png" /> <link rel="icon" href="/logo.png" type="image/png" />
</Head> </Head>
<ColorModeScript initialColorMode={theme.config.initialColorMode} /> <ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Header/> {!session && <Sidebar>
<div className='page-container'> <div className='page-container'>
<Component {...pageProps} /> <Component {...pageProps} />
</div> </div>
</Sidebar>}
{session && <>
<Header/>
<div className='page-container'>
<Component {...pageProps} />
</div>
</>}
</ChakraProvider> </ChakraProvider>
</Provider> </Provider>
) )

View file

@ -49,6 +49,8 @@ export default function Home() {
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<StatCard/> <StatCard/>
</motion.div> </motion.div>
<AuthButton/>
{JSON.stringify(session.user)}
</> </>
} }
</> </>