Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { AppBar, Box, Container, Link, Toolbar } from '@mui/material';
import Login from '@mui/icons-material/Login';
import PersonAdd from '@mui/icons-material/PersonAdd';
import { useSelector } from 'react-redux';

import NavigationItem from '../common/navbar/navigation-item';

function AuthNavbar() {
  const { logo_url } = useSelector((state) => state.auth);

  return (
    <AppBar sx={{ position: 'sticky', mb: 3 }}>
      <Container
        sx={{
          paddingLeft: { xs: 1, md: 2 },
          paddingRight: { xs: 1, md: 2 }
        }}
      >
        <Toolbar
          sx={{
            gap: 2,
            minHeight: 'none',
            paddingLeft: 0,
            paddingRight: 0,
            justifyContent: 'space-between',
            '& a > img': {
              width: 'auto',
              height: '50px'
            }
          }}
        >
          <Link to='/'>
            <img src={logo_url} alt='Logo' />
          </Link>

          <Box sx={{ '& ul': { display: 'flex', alignItems: 'center', gap: 1 } }}>
            <ul>
              <NavigationItem url='/signin'>
                <Login />
                Iniciar sesion
              </NavigationItem>

              <NavigationItem url='/signup'>
                <PersonAdd />
                Registrarse
              </NavigationItem>
            </ul>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default AuthNavbar;