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 from '@mui/icons-material/Menu';

import Chat from '@mui/icons-material/Chat';

import Home from '@mui/icons-material/Home';

import Sell from '@mui/icons-material/Sell';

import School from '@mui/icons-material/School';

import People from '@mui/icons-material/People';

import Groups from '@mui/icons-material/Groups';

import BusinessCenter from '@mui/icons-material/BusinessCenter';

import Search from '@mui/icons-material/Search';

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 } = useNavbar();

  const {

    menu = [],

    image = '',

    fullName,

    linkAdmin,

    linkImpersonate,

    linkKnowledgeArea,

    routeKnowledgeArea,

    routeAbuseReport,

    urlImpersonate,

    urlAdmin,

    defaultNetwork

  } = menuData;

  const [showMenu, setShowMenu] = 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 showDrawer = () => setShowMenu(true);

  const hideDrawer = () => setShowMenu(false);

  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

              component='ul'

              sx={{

                display: 'flex',

                flex: 1,

                justifyContent: 'space-evenly',

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

                listStyle: 'none',

                padding: 0,

                margin: 0,

                alignItems: 'center'

              }}

            >

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

                const Icon = ICON_OPTIONS[index];

                return (

                  <Box

                    component='li'

                    key={index}

                    sx={{

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

                    }}

                  >

                    <NavigationItem url={href} childs={childs}>

                      <Icon />

                      {label}

                    </NavigationItem>

                  </Box>

                );

              })}

              <UserOptions

                image={image}

                name={fullName}

                adminUrl={linkAdmin}

                impersonateUrl={linkImpersonate}

                defaultNetwork={defaultNetwork}

                knowledgeAuth={linkKnowledgeArea}

                routeKnowledge={routeKnowledgeArea}

                routeAdmin={urlAdmin}

                routeImpersonate={urlImpersonate}

                routeAbuseReport={routeAbuseReport}

              />

              <Box

                component='li'

                sx={{

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

                }}

              >

                <NavigationItem onClick={showDrawer}>

                  <Menu />

                </NavigationItem>

              </Box>

            </Box>

          </Toolbar>

        </Container>

      </AppBar>

      <MenuDrawer items={menu} show={showMenu} onClose={hideDrawer} />

    </>

  );

}