navbar

src/components/Dashboard/Menu/Item.tsx

@@ -10,6 +10,8 @@ export const DashboardMenuItem = ({
   isActive = false,
   onToggle,
   hasChildren = false,
+  variant,
+  ...props
 }: {
   label: string
   route?: string
@@ -18,19 +20,22 @@ export const DashboardMenuItem = ({
   isActive?: boolean
   onToggle?: () => void
   hasChildren?: boolean
+  variant?: string
+  [key: string]: any
 }) => (
   <Button
     as={route ? ReactRouterLink : undefined}
     to={route ? generatePath(route) : undefined}
     onClick={hasChildren ? onToggle : undefined}
     isActive={hasChildren ? (isOpen ? true : false) : false} // Set active state
     justifyContent='start'
-    variant={isActive && !hasChildren ? 'underline' : 'transparent'}
+    variant={variant ? variant : isActive && !hasChildren ? 'underline' : 'transparent'}
     w='full'
     colorScheme='gray'
     leftIcon={icon ? <Icon as={icon} /> : undefined}
     rightIcon={hasChildren ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined}
     mb={hasChildren && 1}
+    {...props}
   >
     {label}
   </Button>

src/components/Layout/ColorModeSwitcher.tsx

@@ -1,6 +1,6 @@
-import { Icon, IconButton, IconButtonProps, MenuItem, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import { Icon, IconButton, IconButtonProps, MenuItem, Text, useColorMode, useColorModeValue } from '@chakra-ui/react'
 import * as React from 'react'
-import { Trans } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { IoMdMoon, IoMdSunny } from 'react-icons/io'
 
 type ColorModeSwitcherProps = Omit<IconButtonProps, 'aria-label'>
@@ -27,15 +27,16 @@ export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = (props) => {
   )
 }
 
-export const DropdownColorModeSwitcher = (props) => {
+export const DropdownColorModeSwitcher = ({ ...props }) => {
+  const { t } = useTranslation()
   const { toggleColorMode } = useColorMode()
   const isLightMode = useColorModeValue(true, false)
   const SwitchIcon = useColorModeValue(IoMdMoon, IoMdSunny)
 
   return (
-    <MenuItem onClick={toggleColorMode} closeOnSelect={true} {...props}>
+    <MenuItem onClick={toggleColorMode} {...props}>
       <Icon as={SwitchIcon} />
-      {!isLightMode ? <Trans i18nKey='light_mode'>Light mode</Trans> : <Trans i18nKey='dark_mode'>Dark mode</Trans>}
+      <Text as='span'>{isLightMode ? t('dark_mode') : t('light_mode')}</Text>
     </MenuItem>
   )
 }

src/components/Navbar/LanguagesList.tsx

@@ -85,6 +85,7 @@ export const LanguagesListAccordion = () => {
           _hover={{ bgColor: 'transparent' }}
           display={'flex'}
           alignItems={'center'}
+          justifyContent={'start'}
           fontSize={'md'}
           leftIcon={<FaGlobeAmericas />}
         >

src/components/Navbar/index.tsx

@@ -1,44 +1,184 @@
-import { Button, ButtonProps, Flex, List, ListItem } from '@chakra-ui/react'
-import { useTranslation } from 'react-i18next'
-import { generatePath, Link as ReactRouterLink } from 'react-router-dom'
+import { HamburgerIcon } from '@chakra-ui/icons'
+import {
+  Box,
+  Button,
+  ButtonProps,
+  Divider,
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  Flex,
+  Icon,
+  IconButton,
+  List,
+  ListItem,
+  Text,
+  useBreakpointValue,
+  useColorMode,
+  useColorModeValue,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { LogOut01 } from '@untitled-ui/icons-react'
+import { Trans, useTranslation } from 'react-i18next'
+import { IoMdMoon, IoMdSunny } from 'react-icons/io'
+import { IoPricetagOutline } from 'react-icons/io5'
+import { RiContactsBook3Line } from 'react-icons/ri'
+import { generatePath, Link as ReactRouterLink, Link as RouterLink } from 'react-router-dom'
 import { useAuth } from '~components/Auth/useAuth'
+import { DashboardMenuItem } from '~components/Dashboard/Menu/Item'
 import { ColorModeSwitcher } from '~components/Layout/ColorModeSwitcher'
 import Logo from '~components/Layout/Logo'
 import { Routes } from '~src/router/routes'
-import { LanguagesMenu } from './LanguagesList'
-
-const Navbar = () => (
-  <Flex
-    width='full'
-    m='0 auto'
-    maxW='1920px'
-    px={{
-      base: '10px',
-      sm: '20px',
-      md: '80px',
-    }}
-    w='full'
-    mx='auto'
-    py={{ base: '12px', md: '24px' }}
-    position='relative'
-  >
-    <Flex justifyContent='space-between' alignItems='center' zIndex={1} w='100%'>
-      <Logo />
-      <List as='nav' display='flex' alignItems='center' gap={4}>
-        <ListItem>
-          <DashboardButton />
-        </ListItem>
-        <ListItem>
-          <LanguagesMenu />
-        </ListItem>
-        <ListItem>
-          <ColorModeSwitcher />
-        </ListItem>
-      </List>
+import LanguagesListAccordion, { LanguagesMenu } from './LanguagesList'
+
+type MenuItem = {
+  icon: any
+  label: string
+  route?: string
+}
+
+const Navbar = () => {
+  return (
+    <Flex
+      width='full'
+      m='0 auto'
+      maxW='1920px'
+      px={{
+        base: 2,
+        sm: 4,
+        lg: 6,
+      }}
+      w='full'
+      mx='auto'
+      py={{ base: 4, md: 6 }}
+      position='relative'
+    >
+      <Flex justifyContent='space-between' alignItems='center' zIndex={1} w='100%'>
+        <Logo />
+        <DesktopNav display={{ base: 'none', xl: 'flex' }} />
+        <Mobile />
+      </Flex>
     </Flex>
-  </Flex>
-)
+  )
+}
+
+const DesktopNav = ({ display }: { display?: any }) => {
+  return (
+    <>
+      <NavMenu display={display} />
+      <Flex alignItems={'center'} display={display ? display : 'flex'}>
+        <DashboardButton />
+        <LanguagesMenu />
+        <ColorModeSwitcher />
+      </Flex>
+    </>
+  )
+}
+
+const Mobile = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { logout } = useAuth()
+  return (
+    <>
+      <IconButton
+        icon={<HamburgerIcon />}
+        onClick={onOpen}
+        aria-label='Open menu'
+        display={{ base: 'block', xl: 'none' }}
+      />
+      <Drawer isOpen={isOpen} placement='right' onClose={onClose}>
+        <DrawerOverlay />
+        <DrawerContent bg='dashboard.sidebar.bg.light' _dark={{ bg: 'dashboard.sidebar.bg.dark' }}>
+          <DrawerContent bg='dashboard.sidebar.bg.light' _dark={{ bg: 'dashboard.sidebar.bg.dark' }}>
+            <Box p={4} display='flex' flexDirection='column' gap={4}>
+              <NavMenu>
+                <Divider />
+                <DashboardButton />
+                <Divider />
+                <ListItem>
+                  <LanguagesListAccordion />
+                </ListItem>
+                <ListItemColorModeSwitcher />
+                <Divider />
+                <ListItem onClick={logout} display={'flex'} alignItems={'center'} gap={2} fontWeight={'semibold'}>
+                  <Icon as={LogOut01} />
+                  <Trans i18nKey='logout'>Logout</Trans>
+                </ListItem>
+                <Divider />
+                <ListItem fontSize={'xs'} fontWeight={'semibold'} as={RouterLink} to={Routes.terms}>
+                  <Trans i18nKey='menu.terms'>Terms</Trans>
+                </ListItem>
+                <ListItem fontSize={'xs'} fontWeight={'semibold'} as={RouterLink} to={Routes.privacy}>
+                  <Trans i18nKey='menu.privacy'>Privacy</Trans>
+                </ListItem>
+              </NavMenu>
+            </Box>
+          </DrawerContent>
 
+          {/* <DashboardButton variant={'unstyled'} /> */}
+        </DrawerContent>
+      </Drawer>
+    </>
+  )
+}
+
+const NavMenu = ({ display, children }: { display?: any; children?: any }) => {
+  const { t } = useTranslation()
+  const isMobile = useBreakpointValue({ base: true, xl: false })
+  const menuItems: MenuItem[] = [
+    {
+      icon: <IoPricetagOutline />,
+      label: t('navbar.pricing', { defaultValue: 'Pricing' }),
+      route: Routes.plans,
+    },
+    {
+      icon: <RiContactsBook3Line />,
+      label: t('navbar.contact', { defaultValue: 'Contact Us' }),
+      route: Routes.contact,
+    },
+  ]
+  return (
+    <List as='nav' display={display ? display : 'flex'} flexDirection={{ base: 'column', xl: 'row' }} gap={4}>
+      {menuItems.map((item, index) => (
+        <ListItem key={index}>
+          <DashboardMenuItem
+            label={item.label}
+            route={item.route}
+            variant='unstyled'
+            fontWeight='semibold'
+            display='flex'
+            alignItems='center'
+            fontSize={'md'}
+            h={'fit-content'}
+            leftIcon={isMobile ? item.icon : undefined}
+          />
+        </ListItem>
+      ))}
+      <>{children}</>
+    </List>
+  )
+}
+const ListItemColorModeSwitcher = ({ ...props }) => {
+  const { t } = useTranslation()
+  const { toggleColorMode } = useColorMode()
+  const isLightMode = useColorModeValue(true, false)
+  const SwitchIcon = useColorModeValue(IoMdMoon, IoMdSunny)
+
+  return (
+    <ListItem
+      onClick={toggleColorMode}
+      display={'flex'}
+      justifyContent={'start'}
+      alignItems={'center'}
+      gap={2}
+      fontWeight={'semibold'}
+      {...props}
+    >
+      <Icon as={SwitchIcon} />
+      <Text as='span'>{isLightMode ? t('dark_mode') : t('light_mode')}</Text>
+    </ListItem>
+  )
+}
 const DashboardButton = (props?: ButtonProps) => {
   const { t } = useTranslation()
   const { isAuthenticated } = useAuth()
@@ -57,5 +197,4 @@ const DashboardButton = (props?: ButtonProps) => {
     </Button>
   )
 }
-
 export default Navbar