Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { Link, useNavigate } from 'react-router-dom'

import { useSelector } from 'react-redux'

import { AppBar, Box, Container, Toolbar } from '@mui/material'

import {

  Menu,

  Chat,

  Home,

  Sell,

  School,

  People,

  Groups,

  BusinessCenter,

  Search

} from '@mui/icons-material'

import { useNavbar } from '@hooks'

import MenuDrawer from './Drawer'

import NavigationItem from './navigation-item'

import UserOptions from './user-options'

import Input from '@components/UI/inputs/Input'

export default function Navbar() {

  const { menuData, totalMessages, totalNotifications } = useNavbar()

  const {

    menu = [],

    image = '',

    fullName,

    linkAdmin,

    linkImpersonate,

    linkKnowledgeArea,

    routeKnowledgeArea,

    routeAbuseReport,

    urlImpersonate,

    urlAdmin,

    defaultNetwork

  } = menuData

  const [showDrawer, setShowDrawer] = useState(false)

  const logo = useSelector(({ auth }) => auth.navbar_url)

  const labels = useSelector(({ intl }) => intl.labels)

  const navigate = useNavigate()

  const userAgent = navigator.userAgent

  const isIphone = /iPad|iPhone|iPod|Mac/.test(userAgent)

  const ICON_OPTIONS = [

    Home,

    People,

    BusinessCenter,

    Groups,

    Sell,

    Chat,

    School

  ]

  const handleSearch = ({ key, target }) => {

    if (key !== 'Enter') {

      return

    }

    navigate(`/search/entity/user?keyword=${target.value}`)

    target.value = ''

    target.blur()

  }

  return (

    <>

      <AppBar

        sx={{

          position: 'sticky',

          paddingTop: isIphone ? '50px' : '0',

          boxShadow: 'none',

          borderBottom: '1px solid var(--border-primary)'

        }}

      >

        <Container>

          <Toolbar

            sx={{

              gap: 2,

              minHeight: 'none',

              paddingLeft: 0,

              paddingRight: 0

            }}

          >

            <Box

              sx={{

                display: 'flex',

                alignItems: 'center',

                gap: { xs: 0, md: 2 },

                flexGrow: 1,

                '& img': {

                  display: { xs: 'none', md: 'block' },

                  height: { xs: '50px', md: '60px' },

                  width: { xs: '50px', md: '60px' }

                }

              }}

            >

              <Link to='/'>

                <img src={logo} alt='Logo' />

              </Link>

              <Input

                placeholder={labels.search}

                icon={<Search />}

                variant='search'

                onKeyDown={handleSearch}

              />

            </Box>

            <Box

              sx={{

                alignItems: 'center',

                display: 'flex',

                '& > ul': {

                  display: 'flex',

                  flex: 1,

                  justifyContent: 'space-evenly',

                  gap: { xs: 1, md: 2 },

                  '& > li': {

                    position: 'relative',

                    display: 'flex',

                    '&:not(:nth-last-child(-n + 4))': {

                      display: { xs: 'none', md: 'flex' }

                    },

                    '&:nth-last-child(-n + 1)': {

                      display: { xs: 'flex', md: 'none' }

                    }

                  }

                }

              }}

            >

              <ul>

                {menu.map(({ label, href, childs, ajax }, index) => {

                  const totalCount = totalNotifications + totalMessages

                  const Icon = ICON_OPTIONS[index]

                  return (

                    <NavigationItem

                      key={index}

                      url={href}

                      childs={childs}

                      count={label === 'Comunicación' ? totalCount : 0}

                    >

                      <Icon />

                      {label}

                    </NavigationItem>

                  )

                })}

                <UserOptions

                  image={image}

                  name={fullName}

                  adminUrl={linkAdmin}

                  impersonateUrl={linkImpersonate}

                  defaultNetwork={defaultNetwork}

                  knowledgeAuth={linkKnowledgeArea}

                  routeKnowledge={routeKnowledgeArea}

                  routeAdmin={urlAdmin}

                  routeImpersonate={urlImpersonate}

                  routeAbuseReport={routeAbuseReport}

                />

                <NavigationItem onClick={() => setShowDrawer(!showDrawer)}>

                  <Menu />

                </NavigationItem>

              </ul>

            </Box>

          </Toolbar>

        </Container>

      </AppBar>

      <MenuDrawer

        items={menu}

        icons={ICON_OPTIONS}

        isOpen={showDrawer}

        closeDrawer={() => setShowDrawer(false)}

      />

    </>

  )

}