Implemented find offers modal for tutor navBar (#1414)

* implemented navBar find offers modal for tutor * refactor
ita-social-projects · Nov 17, 2023 · b747f8d · b747f8d
1 parent 453df21
commit b747f8d
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 28 deletions.
diff --git a/src/constants/translations/en/header.json b/src/constants/translations/en/header.json
@@ -2,7 +2,8 @@
   "what-сan-you-do": "What can you do",
   "how-it-works": "How it works",
   "who-we-are": "Who we are",
-  "findOffers": "Offers",
+  "findOffers": "Find Offer",
+  "allOffers": "All offers",
   "subjects": "Subjects",
   "categories": "Categories",
   "homePage": "Home page",

diff --git a/src/constants/translations/ua/header.json b/src/constants/translations/ua/header.json
@@ -2,7 +2,8 @@
   "what-сan-you-do": "Що ти можеш",
   "how-it-works": "Як це працює",
   "who-we-are": "Про нас",
-  "findOffers": "Пропозиції",
+  "findOffers": "Знайти Пропозицію",
+  "allOffers": "Всі пропозиції",
   "subjects":"Предмети",
   "categories": "Категорії",
   "homePage": "Домашня сторінка",

diff --git a/src/containers/layout/navbar/NavBar.styles.ts b/src/containers/layout/navbar/NavBar.styles.ts
@@ -1,5 +1,13 @@
 import { TypographyVariantEnum } from '~/types'
 
+const navItem = {
+  typography: TypographyVariantEnum.Subtitle2,
+  whiteSpace: 'nowrap',
+  color: 'primary.900',
+  cursor: 'pointer',
+  '&:hover': { color: 'primary.500' }
+}
+
 export const styles = {
   header: {
     display: 'flex',
@@ -16,17 +24,22 @@ export const styles = {
     display: { xs: 'none', md: 'flex' },
     alignItems: 'center'
   },
-  navItemText: (isActive: boolean) => ({
-    typography: TypographyVariantEnum.Subtitle2,
-    whiteSpace: 'nowrap',
-    color: 'primary.900',
+  listItem: { py: '5px' },
+  navItemText: (isActive = false) => ({
+    ...navItem,
     textDecoration: isActive ? 'underline' : 'none',
-    '&:hover': {
-      color: 'primary.500'
-    },
-    '&:focus': {
-      textDecoration: 'underline'
-    }
+    '&:focus': { textDecoration: 'underline' }
+  }),
+  findOfferMenuItem: {
+    ...navItem,
+    p: '8px 14px'
+  },
+  arrowIcon: (open: boolean) => ({
+    width: '18px',
+    height: '18px',
+    ml: '2px',
+    color: 'primary.900',
+    transform: `rotate(${open ? 180 : 0}deg)`
   }),
   divider: {
     color: 'primary.900',

diff --git a/src/containers/layout/navbar/NavBar.tsx b/src/containers/layout/navbar/NavBar.tsx
@@ -1,22 +1,28 @@
 import { Fragment, useMemo } from 'react'
-import { matchPath, useLocation } from 'react-router-dom'
+import { matchPath, useLocation, Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
+import MenuItem from '@mui/material/MenuItem'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 
 import HashLink from '~/components/hash-link/HashLink'
 import Logo from '~/containers/logo/Logo'
 import Sidebar from '~/containers/layout/sidebar/Sidebar'
 import NavigationIcons from '~/containers/navigation-icons/NavigationIcons'
 import AppDrawer from '~/components/app-drawer/AppDrawer'
+import useMenu from '~/hooks/use-menu'
 import { useDrawer } from '~/hooks/use-drawer'
 import { useAppSelector } from '~/hooks/use-redux'
 import { guestRoutes } from '~/router/constants/guestRoutes'
-import { tutorRoutes } from '~/router/constants/tutorRoutes'
+import {
+  tutorRoutes,
+  findOffersChildRoutes
+} from '~/router/constants/tutorRoutes'
 import { studentRoutes } from '~/router/constants/studentRoutes'
 import { authRoutes } from '~/router/constants/authRoutes'
 
@@ -26,13 +32,18 @@ import { styles } from '~/containers/layout/navbar/NavBar.styles'
 const Navbar = () => {
   const { userRole } = useAppSelector((state) => state.appMain)
   const { openDrawer, closeDrawer, isOpen } = useDrawer()
+  const { openMenu, renderMenu, closeMenu, anchorEl } = useMenu()
   const { pathname } = useLocation()
   const { t } = useTranslation()
 
   const homePath = userRole
     ? guestRoutes[userRole].path
     : guestRoutes.welcome.path
 
+  const isChildRouteActive = findOffersChildRoutes.some((childRoute) =>
+    Boolean(matchPath(childRoute.path, pathname))
+  )
+
   const navigationItems = useMemo(() => {
     if (userRole === UserRoleEnum.Student) {
       return Object.values(studentRoutes.navBar)
@@ -51,21 +62,42 @@ const Navbar = () => {
     openDrawer()
   }
 
+  const findOffersMenu = findOffersChildRoutes.map((childRoute) => (
+    <MenuItem
+      component={Link}
+      key={childRoute.route}
+      onClick={closeMenu}
+      sx={styles.findOfferMenuItem}
+      to={childRoute.path}
+    >
+      {t(`header.${childRoute.route}`)}
+    </MenuItem>
+  ))
+
   const navigationList = navigationItems.map((item, idx, array) => {
     const isLast = array.length - 1 === idx
     const isActive = Boolean(matchPath(item.path, pathname))
 
     return (
       <Fragment key={item.route}>
-        <ListItem>
-          <Typography
-            component={HashLink}
-            sx={styles.navItemText(isActive)}
-            to={item.path}
-          >
-            {t(`header.${item.route}`)}
-          </Typography>
-        </ListItem>
+        {item.route === tutorRoutes.navBar.findOffers.route ? (
+          <ListItem onClick={openMenu} sx={styles.listItem}>
+            <Typography sx={styles.navItemText(isChildRouteActive)}>
+              {t(`header.${item.route}`)}
+            </Typography>
+            <KeyboardArrowDownIcon sx={styles.arrowIcon(Boolean(anchorEl))} />
+          </ListItem>
+        ) : (
+          <ListItem>
+            <Typography
+              component={HashLink}
+              sx={styles.navItemText(isActive)}
+              to={item.path}
+            >
+              {t(`header.${item.route}`)}
+            </Typography>
+          </ListItem>
+        )}
         {!isLast && <Typography sx={styles.divider}>{'/'}</Typography>}
       </Fragment>
     )
@@ -81,6 +113,7 @@ const Navbar = () => {
       >
         <Logo />
       </Button>
+      {renderMenu(findOffersMenu, { autoFocus: false })}
       <List sx={styles.navList}>{navigationList}</List>
       <NavigationIcons setSidebarOpen={handleOpenSidebar} />
       <AppDrawer onClose={closeDrawer} open={isOpen}>

diff --git a/src/hooks/use-menu.jsx b/src/hooks/use-menu.jsx
@@ -13,8 +13,13 @@ const useMenu = () => {
     setAnchorEl(null)
   }
 
-  const renderMenu = (menuItems) => (
-    <Menu anchorEl={anchorEl} onClose={closeMenu} open={Boolean(anchorEl)}>
+  const renderMenu = (menuItems, menuProps) => (
+    <Menu
+      anchorEl={anchorEl}
+      onClose={closeMenu}
+      open={Boolean(anchorEl)}
+      {...menuProps}
+    >
       {menuItems}
     </Menu>
   )

diff --git a/src/router/constants/tutorRoutes.ts b/src/router/constants/tutorRoutes.ts
@@ -1,10 +1,17 @@
 import { authRoutes } from '~/router/constants/authRoutes'
 
+export const findOffersChildRoutes = [
+  { route: 'categories', path: authRoutes.categories.path },
+  { route: 'subjects', path: authRoutes.subjects.path },
+  { route: 'allOffers', path: authRoutes.findOffers.path }
+]
+
 export const tutorRoutes = {
   navBar: {
-    categories: { route: 'categories', path: authRoutes.categories.path },
-    subjects: { route: 'subjects', path: authRoutes.subjects.path },
-    findOffers: { route: 'findOffers', path: authRoutes.findOffers.path },
+    findOffers: {
+      route: 'findOffers',
+      path: authRoutes.findOffers.path
+    },
     myResources: {
       route: 'my-resources',
       path: authRoutes.myResources.root.path