Implemented sidebar and changed linting rules

.eslintrc

@@ -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"
+  }
 }

components/Sidebar/Sidebar.js

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

pages/_app.js

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

pages/index.js

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