add BottomNav control

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.27.2",
     "framer-motion": "^4.1.17",
     "i18next": "^21.8.0",
+    "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.9",

src/components/BottomNav.js

@@ -1,11 +1,25 @@
-import React from "react"
-import { Stack } from "@chakra-ui/react"
+import { ChakraBottomNav, ChakraBottomNavItem } from './ChakraBottomNav'
+import { FiHome, FiTrendingUp } from 'react-icons/fi'
+import { useTranslation } from 'react-i18next'
 
-export const BottomNav = () => {
+export const BottomNav = (props) => {
+    const { t } = useTranslation()
 
     return (
-        <Stack>
+        <ChakraBottomNav {...props}>
+            <ChakraBottomNavItem
+                icon={FiHome}
+                text={t('home')}
+                navPath="/home"
+                index="1"
+            />
 
-        </Stack>
+            <ChakraBottomNavItem
+                icon={FiTrendingUp}
+                text={t('farm')}
+                navPath="/farm"
+                index="2"
+            />
+        </ChakraBottomNav>
     )
 }

src/components/Carousel.js

@@ -1,6 +1,5 @@
 import {
     Box,
-    useBreakpointValue,
     useColorModeValue,
     Stack,
     Container,

src/components/ChakraBottomNav.js

@@ -0,0 +1,121 @@
+import React from "react"
+import { Text, Icon, Stack, useColorModeValue } from "@chakra-ui/react"
+import { Placeholder } from "./Placeholder"
+import { PropTypes } from 'prop-types'
+import { useNavigate } from "react-router-dom"
+
+const BottomNavContext = React.createContext([])
+
+const BottomNavProvider = ({ children }) => {
+    const [active, setActive] = React.useState(0)
+
+    return (
+        <BottomNavContext.Provider value={{
+            active,
+            setActive,
+        }}>
+            {children}
+        </BottomNavContext.Provider>
+    )
+}
+
+export const ChakraBottomNavItem = ({ index, icon, text,
+    bgNormal = null, bgHover = null, bgActive = null, navPath = "", onClick = null, ...rest }) => {
+
+    const ctx = React.useContext(BottomNavContext)
+
+    const _normal = useColorModeValue('white', 'gray.700')
+    const _bgNormal = bgNormal || _normal
+    const _hover = useColorModeValue('blue.100', 'gray.100')
+    const _bgHover = bgHover || _hover
+    const _active = useColorModeValue('blue.300', 'gray.300')
+    const _bgActive = bgActive || _active
+
+    const [bg, setBg] = React.useState(_bgNormal)
+    const navigateTo = useNavigate()
+
+    const onClickThis = () => {
+        setBg(_bgActive)
+        ctx.setActive(index)
+        navPath && navigateTo(navPath)
+        onClick && onClick()
+    }
+
+    const onHover = () => {
+        setBg(_bgHover)
+    }
+
+    const onLeave = () => {
+        setBg(_bgNormal)
+    }
+
+    const actived = () => ctx.active === index
+
+    return (
+        <Stack
+            direction="column"
+            p="4"
+            bg={actived() ? _bgActive : bg}
+            fontFamily="monospace"
+            fontSize="18"
+            fontWeight="700"
+            color={actived() ? 'white' : 'black'}
+            flex="1"
+            cursor="pointer"
+            align="center"
+            justify="center"
+            onClick={onClickThis}
+            onMouseEnter={onHover}
+            onMouseLeave={onLeave}
+            {...rest}
+
+        >
+            <Icon as={icon} />
+            <Text
+            >
+                {text}
+            </Text>
+        </Stack>
+    )
+}
+
+ChakraBottomNavItem.propTypes = {
+    index: PropTypes.string.isRequired,
+}
+
+const BottomNavImpl = ({ children, ...rest }) => {
+
+    const bg = useColorModeValue('white', 'gray.700')
+
+    return (
+        <Stack
+            w="full"
+            position="fixed"
+            bottom="0"
+            left="0"
+            direction="row"
+            justify="space-around"
+            align="center"
+            bg={bg}
+            borderTop="1px"
+            borderColor="gray.200"
+            boxShadow="lg"
+            {...rest}
+        >
+            {children}
+        </Stack>
+    )
+}
+
+export const ChakraBottomNav = (props) => {
+
+    return (
+        <>
+            {/* TODO: I didnt use `useDimensions` here, caz it would waste my time to adjust it.  */}
+            <Placeholder h="20" display={props.display || 'relative'} />
+            <BottomNavProvider>
+                <BottomNavImpl {...props} />
+            </BottomNavProvider>
+        </>
+    )
+}

src/components/Layout.js

@@ -5,12 +5,14 @@ import {
 import React from 'react'
 import { SideBar } from './SideBar'
 import { AppBar } from './AppBar'
+import { BottomNav } from './BottomNav'
 
 /**
  * This component was not composed for more widely using but just for this project.
  */
 export const Layout = ({ children }) => {
     const { isOpen: isDrawerOpening, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+
     const bg = useColorModeValue('gray.100', 'gray.900')
 
     return (
@@ -34,7 +36,6 @@ export const Layout = ({ children }) => {
                 <DrawerContent>
                     <SideBar onCloseDrawer={onCloseDrawer} />
                 </DrawerContent>
-
             </Drawer>
 
             <AppBar onOpenDrawer={onOpenDrawer} />
@@ -47,6 +48,9 @@ export const Layout = ({ children }) => {
             >
                 {children}
             </Box>
+
+            <BottomNav display={{ base: 'flex', md: 'none' }} />
+
         </Box>
     )
 }

src/components/Logo.js

@@ -1,7 +1,6 @@
-import { config } from '../config'
 import { Box, Image } from '@chakra-ui/react'
-import { Images } from '../data'
 import { useApp } from '../AppContext'
+
 // we have know which picture we are using
 export const Logo = (props) => {
 

src/components/NumCard.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, Flex, Stack, Icon, Heading, Text, VStack, HStack } from "@chakra-ui/react"
+import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
 
 /**
  * 

src/components/Panel.js

@@ -1,4 +1,4 @@
-import { Box, Stack } from "@chakra-ui/react"
+import { Stack } from "@chakra-ui/react"
 
 
 export const Panel = ({ children, ...rest }) => {

src/components/Placeholder.js

@@ -0,0 +1,11 @@
+import { Box } from "@chakra-ui/react"
+
+export const Placeholder = (props) => {
+    return (
+        <Box
+            {...props}
+        >
+
+        </Box>
+    )
+}

src/components/SideBar.js

@@ -71,7 +71,7 @@ export const SideBar = ({ onCloseDrawer, ...rest }) => {
     const app = useApp()
 
     const bg = useColorModeValue('white', 'gray.900')
-    const { t, i18n } = useTranslation()
+    const { t } = useTranslation()
     // const colorBorderRight = useColorModeValue('gray.200', 'gray.700')
 
     const menuItems = [

src/components/index.js

@@ -7,4 +7,6 @@ export * from './Partners'
 export * from './Auditors'
 export * from './FarmCoinCard'
 export * from './ColorModeSwitcher'
+export * from './Placeholder'
+export * from './Panel'
 export * from './alert'

src/hooks/useLocalStorage.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 
 function getStorageJson(name, default_value) {
     if (!localStorage) {

src/index.js

@@ -1,4 +1,3 @@
-import { ColorModeScript } from '@chakra-ui/react'
 import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import i18n from './i18'