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} />
    </>
  );
}