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;