Changed Navbar to use Chakra UI

2021-06-27 18:44:22 +08:00 · 2021-06-27 18:44:22 +08:00 · 6e2722c8ab
commit 6e2722c8ab
parent 250340d33e
8 changed files with 1325 additions and 20 deletions
--- a/chakra_config/theme.js
+++ b/chakra_config/theme.js
@ -0,0 +1,9 @@
+import { extendTheme, ThemeConfig } from "@chakra-ui/react"
+// 2. Add your color mode config
+const config = {
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+}
+// 3. extend the theme
+const theme = extendTheme({ config })
+export default theme
--- a/components/AuthButton.js
+++ b/components/AuthButton.js
@ -1,15 +1,39 @@
 import { signIn, signOut, useSession } from 'next-auth/client'
-import { Button } from '@material-ui/core'
+import {Button} from '@chakra-ui/react' 

 export default function Page() {
    const [session, loading] = useSession()

    return <>
        {!session && <>
-            <Button onClick={() => signIn()}>Sign in</Button>
+            <Button
+                display={{ base: 'none', md: 'inline-flex' }}
+                fontSize={'sm'}
+                fontWeight={600}
+                color={'white'}
+                bg={'pink.400'}
+                href={'#'}
+                _hover={{
+                bg: 'pink.300',
+                }}
+                onClick={()=>signIn()}>
+                Sign In
+            </Button>
        </>}
        {session && <>
-            <Button onClick={() => signOut()}>Sign out</Button>
+            <Button
+                display={{ base: 'none', md: 'inline-flex' }}
+                fontSize={'sm'}
+                fontWeight={600}
+                color={'white'}
+                bg={'pink.400'}
+                href={'#'}
+                _hover={{
+                    bg: 'pink.300',
+                }}
+                onClick={() => signOut()}>
+                Sign Out
+            </Button>
        </>}
    </>
 }
--- a/components/Nav/Header.js
+++ b/components/Nav/Header.js
@ -0,0 +1,260 @@
+import {
+  Box,
+  Flex,
+  Text,
+  IconButton,
+  Button,
+  Stack,
+  Collapse,
+  Icon,
+  Link,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  useColorModeValue,
+  useBreakpointValue,
+  useDisclosure,
+} from '@chakra-ui/react';
+import {
+  HamburgerIcon,
+  CloseIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from '@chakra-ui/icons';
+import AuthButton from '../AuthButton'
+
+export default function WithSubnavigation() {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Box>
+      <Flex
+        bg={useColorModeValue('white', 'gray.800')}
+        color={useColorModeValue('gray.600', 'white')}
+        minH={'60px'}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        borderBottom={1}
+        borderStyle={'solid'}
+        borderColor={useColorModeValue('gray.200', 'gray.900')}
+        align={'center'}>
+        <Flex
+          flex={{ base: 1, md: 'auto' }}
+          ml={{ base: -2 }}
+          display={{ base: 'flex', md: 'none' }}>
+          <IconButton
+            onClick={onToggle}
+            icon={
+              isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
+            }
+            variant={'ghost'}
+            aria-label={'Toggle Navigation'}
+          />
+        </Flex>
+        <Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
+          <Text
+            textAlign={useBreakpointValue({ base: 'center', md: 'left' })}
+            fontFamily={'heading'}
+            color={useColorModeValue('gray.800', 'white')}>
+            Cath.exe
+          </Text>
+
+          <Flex display={{ base: 'none', md: 'flex' }} ml={10}>
+            <DesktopNav />
+          </Flex>
+        </Flex>
+
+        <Stack
+          flex={{ base: 1, md: 0 }}
+          justify={'flex-end'}
+          direction={'row'}
+          spacing={6}>
+          <AuthButton/>
+          <Button
+            as={'a'}
+            fontSize={'sm'}
+            fontWeight={400}
+            variant={'link'}
+            href={'https://github.com/night0721/cath.gq'}>
+            Github
+          </Button>
+        </Stack>
+      </Flex>
+
+      <Collapse in={isOpen} animateOpacity>
+        <MobileNav />
+      </Collapse>
+    </Box>
+  );
+}
+
+const DesktopNav = () => {
+  const linkColor = useColorModeValue('gray.600', 'gray.200');
+  const linkHoverColor = useColorModeValue('gray.800', 'white');
+  const popoverContentBgColor = useColorModeValue('white', 'gray.800');
+
+  return (
+    <Stack direction={'row'} spacing={4}>
+      {NAV_ITEMS.map((navItem) => (
+        <Box key={navItem.label}>
+          <Popover trigger={'hover'} placement={'bottom-start'}>
+            <PopoverTrigger>
+              <Link
+                p={2}
+                href={navItem.href ?? '#'}
+                fontSize={'sm'}
+                fontWeight={500}
+                color={linkColor}
+                _hover={{
+                  textDecoration: 'none',
+                  color: linkHoverColor,
+                }}>
+                {navItem.label}
+              </Link>
+            </PopoverTrigger>
+
+            {navItem.children && (
+              <PopoverContent
+                border={0}
+                boxShadow={'xl'}
+                bg={popoverContentBgColor}
+                p={4}
+                rounded={'xl'}
+                minW={'sm'}>
+                <Stack>
+                  {navItem.children.map((child) => (
+                    <DesktopSubNav key={child.label} {...child} />
+                  ))}
+                </Stack>
+              </PopoverContent>
+            )}
+          </Popover>
+        </Box>
+      ))}
+    </Stack>
+  );
+};
+
+const DesktopSubNav = ({ label, href, subLabel }) => {
+  return (
+    <Link
+      href={href}
+      role={'group'}
+      display={'block'}
+      p={2}
+      rounded={'md'}
+      _hover={{ bg: useColorModeValue('pink.50', 'gray.900') }}>
+      <Stack direction={'row'} align={'center'}>
+        <Box>
+          <Text
+            transition={'all .3s ease'}
+            _groupHover={{ color: 'pink.400' }}
+            fontWeight={500}>
+            {label}
+          </Text>
+          <Text fontSize={'sm'}>{subLabel}</Text>
+        </Box>
+        <Flex
+          transition={'all .3s ease'}
+          transform={'translateX(-10px)'}
+          opacity={0}
+          _groupHover={{ opacity: '100%', transform: 'translateX(0)' }}
+          justify={'flex-end'}
+          align={'center'}
+          flex={1}>
+          <Icon color={'pink.400'} w={5} h={5} as={ChevronRightIcon} />
+        </Flex>
+      </Stack>
+    </Link>
+  );
+};
+
+const MobileNav = () => {
+  return (
+    <Stack
+      bg={useColorModeValue('white', 'gray.800')}
+      p={4}
+      display={{ md: 'none' }}>
+      {NAV_ITEMS.map((navItem) => (
+        <MobileNavItem key={navItem.label} {...navItem} />
+      ))}
+    </Stack>
+  );
+};
+
+const MobileNavItem = ({ label, children, href }) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Stack spacing={4} onClick={children && onToggle}>
+      <Flex
+        py={2}
+        as={Link}
+        href={href ?? '#'}
+        justify={'space-between'}
+        align={'center'}
+        _hover={{
+          textDecoration: 'none',
+        }}>
+        <Text
+          fontWeight={600}
+          color={useColorModeValue('gray.600', 'gray.200')}>
+          {label}
+        </Text>
+        {children && (
+          <Icon
+            as={ChevronDownIcon}
+            transition={'all .25s ease-in-out'}
+            transform={isOpen ? 'rotate(180deg)' : ''}
+            w={6}
+            h={6}
+          />
+        )}
+      </Flex>
+
+      <Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}>
+        <Stack
+          mt={2}
+          pl={4}
+          borderLeft={1}
+          borderStyle={'solid'}
+          borderColor={useColorModeValue('gray.200', 'gray.700')}
+          align={'start'}>
+          {children &&
+            children.map((child) => (
+              <Link key={child.label} py={2} href={child.href}>
+                {child.label}
+              </Link>
+            ))}
+        </Stack>
+      </Collapse>
+    </Stack>
+  );
+};
+
+
+const NAV_ITEMS = [
+  {
+    label: 'Home',
+    href: '/',
+  },
+  {
+    label: 'Control Panel',
+    children: [
+      {
+        label: 'Main',
+        subLabel: 'Control Everything',
+        href: '/controlpanel',
+      },
+      {
+        label: 'Commands',
+        subLabel: 'Control Caths commands',
+        href: '/controlpanel/commands',
+      },
+    ],
+  },
+  {
+    label: 'Coming soon...',
+    href: '#',
+  },
+];
--- a/components/Nav/Logo.js
+++ b/components/Nav/Logo.js
@ -0,0 +1,12 @@
+import React from "react";
+import { Box, Text } from "@chakra-ui/react";
+
+export default function Logo(props) {
+    return (
+        <Box {...props}>
+            <Text fontSize="lg" fontWeight="bold">
+                Logo
+            </Text>
+        </Box>
+    );
+}
--- a/package.json
+++ b/package.json
@ -9,8 +9,13 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@chakra-ui/icons": "^1.0.13",
+    "@chakra-ui/react": "^1.6.4",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
+    "framer-motion": "^4",
    "mongodb": "^3.6.9",
    "next": "11.0.0",
    "next-auth": "^3.27.0",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -2,17 +2,24 @@ import '../styles/globals.css'
 import Navbar from '../components/Navbar'
 import Head from 'next/head'
 import { Provider } from 'next-auth/client'
+import { ChakraProvider } from "@chakra-ui/react"
+import Header from '../components/Nav/Header'
+import theme from '../chakra_config/theme'
+import { ColorModeScript } from "@chakra-ui/react"

 function MyApp({ Component, pageProps }) {
  return (
    <Provider>
+      <ChakraProvider>
        <Head>
          <title>Cath Dashboard</title>
        </Head>
-      <Navbar/>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <Header/>
        <div className='page-container'>
          <Component {...pageProps} />
        </div>
+      </ChakraProvider>
    </Provider>
  )
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -10,7 +10,7 @@ body {
  margin: 0;
  font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  background: #121212;
+  background: #1a202c;
 }

 .page-container {
--- a/yarn.lock
+++ b/yarn.lock