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
              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-of-type(-n + 4))': {
                      display: { xs: 'none', md: 'flex' }
                    },
                    '&:nth-last-of-type(-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} />
    </>
  );
}