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 } = 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

              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 }, index) => {

                  const Icon = ICON_OPTIONS[index];

                  return (

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

                      <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={showDrawer}>

                  <Menu />

                </NavigationItem>

              </ul>

            </Box>

          </Toolbar>

        </Container>

      </AppBar>

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

    </>

  );

}