Sidebar dashboard

package.json

@@ -7,6 +7,7 @@
     "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^2.10.4",
     "@chakra-ui/react-utils": "^2.0.11",
+    "@date-io/date-fns": "1.x",
     "@emailjs/browser": "^4.1.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -22,6 +23,7 @@
     "@lexical/rich-text": "^0.18.0",
     "@lexical/selection": "^0.18.0",
     "@lexical/utils": "^0.18.0",
+    "@material-ui/pickers": "^3.3.11",
     "@rainbow-me/rainbowkit": "^1.1.3",
     "@stripe/react-stripe-js": "^2.7.0",
     "@stripe/stripe-js": "^3.3.0",

src/components/Account/Menu.tsx

@@ -1,4 +1,3 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
 import {
   Avatar,
   Box,
@@ -15,6 +14,9 @@ import {
 } from '@chakra-ui/react'
 import { LogOut01, Paperclip, UserSquare } from '@untitled-ui/icons-react'
 import { Trans } from 'react-i18next'
+import { HiDotsVertical, HiOutlineDotsHorizontal } from 'react-icons/hi'
+import { MdHelpCenter, MdSpeakerNotes } from 'react-icons/md'
+import { RiSpeakFill } from 'react-icons/ri'
 import { Link as RouterLink } from 'react-router-dom'
 import { useAuth } from '~components/Auth/useAuth'
 import { DropdownColorModeSwitcher } from '~components/Layout/ColorModeSwitcher'
@@ -25,8 +27,11 @@ import { Routes } from '~src/router/routes'
 const AccountMenu: React.FC<BoxProps> = (props) => {
   const { logout } = useAuth()
   const { data: profile, isLoading } = useProfile()
+  const org = localStorage.getItem('signerAddress')
 
-  if (isLoading) {
+  const selectedOrg = profile?.organizations.filter((el) => el.organization.address === org)
+
+  if (isLoading || !selectedOrg) {
     return (
       <Box {...props}>
         <Spinner minH='35px' minW='35px' />
@@ -48,15 +53,26 @@ const AccountMenu: React.FC<BoxProps> = (props) => {
                   size='sm'
                 />
               }
-              rightIcon={<Icon as={isOpen ? ChevronUpIcon : ChevronDownIcon} boxSize={4} />}
+              rightIcon={
+                isOpen ? <Icon as={HiDotsVertical} boxSize={4} /> : <Icon as={HiOutlineDotsHorizontal} boxSize={4} />
+              }
               aria-label='User menu'
               display={'flex'}
+              justifyContent={'start'}
               alignItems={'center'}
               variant={'unstyled'}
+              w='full'
+              bgColor={'account_menu_bg.light'}
+              p={2}
+              minH={'50px'}
+              _dark={{ bg: 'account_menu_bg.dark' }}
             >
-              <Text fontSize='xs' fontWeight='light'>
+              <Text fontSize='xs' maxW={'180px'} w='fit-content' fontWeight='light' isTruncated>
                 {profile.email}
               </Text>
+              <Text fontSize='xs' maxW={'180px'} w='fit-content' textTransform={'capitalize'} fontWeight={'bold'}>
+                {selectedOrg[0].role}
+              </Text>
             </MenuButton>
             <MenuList>
               <MenuItem as={RouterLink} to={Routes.dashboard.profile} closeOnSelect={true}>
@@ -68,6 +84,19 @@ const AccountMenu: React.FC<BoxProps> = (props) => {
                 <Trans i18nKey='menu.documentation'>Documentation</Trans>
               </MenuItem>
               <MenuDivider />
+              <MenuItem as={RouterLink} to='' target='_blank' closeOnSelect={true}>
+                <Icon as={MdSpeakerNotes} />
+                <Trans i18nKey='menu.contact_us'>Contact us</Trans>
+              </MenuItem>
+              <MenuItem as={RouterLink} to='' target='_blank' closeOnSelect={true}>
+                <Icon as={RiSpeakFill} />
+                <Trans i18nKey='menu.feedback'>Give Feedback</Trans>
+              </MenuItem>
+              <MenuItem as={RouterLink} to='' target='_blank' closeOnSelect={true}>
+                <Icon as={MdHelpCenter} />
+                <Trans i18nKey='menu.help'>Help & Docs</Trans>
+              </MenuItem>
+              <MenuDivider />
               <MenuItem as='div' role='button' tabIndex={0} closeOnSelect={false}>
                 <LanguagesListAccordion />
               </MenuItem>

src/components/Dashboard/Menu/Item.tsx

@@ -35,7 +35,7 @@ export const DashboardMenuItem = ({
     leftIcon={icon ? <Icon as={icon} mt='0px' /> : undefined}
     rightIcon={hasChildren ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined}
     mb={hasChildren && 1}
-    fontWeight={isActive ? '600' : '100'}
+    fontWeight={isActive ? '600' : 'light'}
     fontSize='md'
     fontFamily='basier'
     {...props}

src/components/Dashboard/Menu/Options.tsx

@@ -1,123 +1,130 @@
-import { Box, Collapse } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
+import { Box, Flex, Text, useMediaQuery } from '@chakra-ui/react'
+import { LogOut01, Paperclip, UserSquare } from '@untitled-ui/icons-react'
 import { useTranslation } from 'react-i18next'
+import { IconType } from 'react-icons'
 import { HiHome, HiSquares2X2 } from 'react-icons/hi2'
-import { IoIosSettings } from 'react-icons/io'
+import { IoIosWallet } from 'react-icons/io'
+import { MdPeopleAlt, MdSpeakerNotes, MdWavingHand } from 'react-icons/md'
+import { RiOrganizationChart, RiPriceTag2Fill, RiSpeakFill } from 'react-icons/ri'
 import { matchPath, useLocation } from 'react-router-dom'
+import { DropdownColorModeSwitcherItem } from '~components/Layout/ColorModeSwitcher'
+import LanguagesListAccordion from '~components/Navbar/LanguagesList'
 import { Routes } from '~src/router/routes'
 import { DashboardMenuItem } from './Item'
 import { OrganizationSwitcher } from './OrganizationSwitcher'
 
-type MenuItem = {
-  label: string
-  icon?: any
+type MenuItemBase = {
+  component?: JSX.Element
+  label?: any
+  icon?: IconType
   route?: string
-  children?: MenuItem[]
+  styles?: any
+}
+
+type MenuSection = {
+  title: string
+  items: MenuItemBase[]
+  desktop?: boolean
 }
 
 export const DashboardMenuOptions = () => {
   const { t } = useTranslation()
   const location = useLocation()
-  const [openSection, setOpenSection] = useState<string | null>(null)
-  const menuItems: MenuItem[] = [
+  const [isDesktop] = useMediaQuery('(min-width: 80em)')
+  // const { subscription } = useSubscription()
+
+  const menuItems: MenuSection[] = [
+    {
+      title: 'General',
+      items: [
+        {
+          label: t('organization.dashboard'),
+          icon: HiHome,
+          route: Routes.dashboard.base,
+        },
+        {
+          label: t('voting_processes'),
+          icon: HiSquares2X2,
+          route: Routes.dashboard.processes,
+        },
+      ],
+      desktop: true,
+    },
     {
-      label: t('organization.dashboard'),
-      icon: HiHome,
-      route: Routes.dashboard.base,
+      title: 'Settings',
+      items: [
+        { label: t('organization.organization'), icon: RiOrganizationChart, route: Routes.dashboard.organization },
+        { label: t('team.title'), icon: MdPeopleAlt, route: Routes.dashboard.team },
+        { label: t('subscription.title'), icon: IoIosWallet, route: Routes.dashboard.subscription },
+      ],
+      desktop: true,
     },
     {
-      label: t('voting_processes'),
-      icon: HiSquares2X2,
-      route: Routes.dashboard.processes,
+      title: 'Subscription',
+      items: [
+        {
+          label: (
+            <Flex w='100%' justify='space-between' align='center'>
+              <Text>Free Plan</Text>
+              {/* <Text color='gray'>{subscription.plan.organization.maxCensus} max</Text> */}
+            </Flex>
+          ),
+          icon: RiPriceTag2Fill,
+          route: Routes.plans,
+          styles: { as: 'span', _hover: { bg: 'none' }, _active: { bg: 'nonr' } },
+        },
+      ],
+      desktop: true,
     },
-    // {
-    //   label: t('organization.census'),
-    //   icon: GiHamburgerMenu,
-    //   route: '#census',
-    // },
-    // {
-    //   label: t('user_management'),
-    //   icon: HiMiniPencil,
-    //   route: '#user-management',
-    // },
     {
-      label: t('settings'),
-      icon: IoIosSettings,
-      children: [
-        { label: t('organization.organization'), route: Routes.dashboard.organization },
-        { label: t('team.title'), route: Routes.dashboard.team },
-        // { label: t('billing'), route: '#billing' },
-        { label: t('subscription.title'), route: Routes.dashboard.subscription },
-        { label: t('profile.title'), route: Routes.dashboard.profile },
+      title: 'Others',
+      items: [
+        { label: t('profile.title'), icon: UserSquare, route: Routes.dashboard.profile },
+        { label: t('menu.documentation'), icon: Paperclip, route: 'https://developer.vocdoni.io/' },
+        { label: t('contact_us'), icon: MdSpeakerNotes, route: 'https://developer.vocdoni.io/' },
+        { label: t('feedback'), icon: RiSpeakFill, route: 'https://developer.vocdoni.io/' },
+        { label: t('help_docs'), icon: MdWavingHand, route: 'https://developer.vocdoni.io/' },
+        { component: <LanguagesListAccordion fontWeight={'normal'} variant='transparent' m='default' p='default' /> },
+        { component: <DropdownColorModeSwitcherItem /> },
+        { label: 'Logout', icon: LogOut01, route: Routes.dashboard.team },
+        { label: 'Terms', route: Routes.terms },
+        { label: 'Privacy', route: Routes.privacy },
       ],
+      desktop: false,
     },
-    // {
-    //   label: t('help_and_support'),
-    //   icon: FaPhoneAlt,
-    //   route: '#support',
-    // },
   ]
-
-  // Check if any child route is active, and open its section
-  useEffect(() => {
-    menuItems.forEach((item) => {
-      if (
-        item.children &&
-        item.children.some((child) => matchPath({ path: child.route || '', end: true }, location.pathname))
-      ) {
-        setOpenSection((prev) => (prev !== item.label ? item.label : prev))
-      }
-    })
-  }, [location.pathname])
-
-  const handleToggle = (label: string) => {
-    setOpenSection((prev) => (prev === label ? null : label))
-  }
-
+  // if (!subscription) return
   return (
     <Box>
+      <Text color={'gray'} mb={2}>
+        Workspace
+      </Text>
       <OrganizationSwitcher />
-
-      {menuItems.map((item, index) => (
-        <Box key={index}>
-          {item.children ? (
-            <>
-              <DashboardMenuItem
-                label={item.label}
-                icon={item.icon}
-                route={item.route}
-                isOpen={openSection === item.label}
-                isActive={item.children.some((child) =>
-                  matchPath({ path: child.route || '', end: true }, location.pathname)
-                )}
-                onToggle={() => handleToggle(item.label)}
-                hasChildren
-              />
-              <Collapse in={openSection === item.label}>
-                <Box pl={6}>
-                  {item.children.map((child, childIndex) => (
+      <Box py={4}>
+        {menuItems
+          .filter((el) => !isDesktop || el.desktop)
+          .map((el, idx) => (
+            <Box key={idx} mb={4}>
+              <Text color={'gray'}>{el.title}</Text>
+              {el.items.map((item, index) => (
+                <>
+                  {item.component ? (
+                    item.component
+                  ) : (
                     <DashboardMenuItem
-                      key={childIndex}
-                      label={child.label}
-                      route={child.route}
-                      icon={null}
-                      isActive={Boolean(matchPath({ path: child.route || '', end: true }, location.pathname))}
+                      key={index}
+                      label={item.label}
+                      route={item.route}
+                      icon={item.icon}
+                      isActive={Boolean(matchPath({ path: item.route || '', end: true }, location.pathname))}
+                      {...item.styles}
                     />
-                  ))}
-                </Box>
-              </Collapse>
-            </>
-          ) : (
-            <DashboardMenuItem
-              label={item.label}
-              route={item.route}
-              icon={item.icon}
-              isActive={Boolean(matchPath({ path: item.route || '', end: true }, location.pathname))}
-              onToggle={() => setOpenSection(null)}
-            />
-          )}
-        </Box>
-      ))}
+                  )}
+                </>
+              ))}
+            </Box>
+          ))}
+      </Box>
     </Box>
   )
 }