Estilando las páginas activas

Si no consiguen el aria-current con Link usando react router, lo que deben hacer es cambiar el import de Link a NavLink. Es un nuevo componente de react router que si incluye esta clase.

Este · es el punto que @midudev usa, si usan este . por los estilos que se utilizan no se va a ver en el navbar. Pasé más tiempo del debido viendo que problemas tenían mis estilos y era sólo el carácter ajajaja

Con react-router hay que utilizar NavLink en lugar de Link en los estilos.

import styled from "styled-components";
import { NavLink as LinkRouter } from "react-router-dom";

Pero además para que se desactive el icono de Home al seleccionar otro item, hay que agregarle exact al elemento Link en el index de NavBar:

<Nav>
            <Link exact to="/">
                <MdHome size={ICON_SIZE} />
            </Link>
            <Link exact to="/favorites">
                <MdFavorite size={ICON_SIZE} />
            </Link>
            <Link exact to="/user">
                <MdPerson size={ICON_SIZE} />
            </Link>
        </Nav>

Fecha: 26-03-22
Para los que usamos react-router-dom no tenemos ese atributo asi que implemente esta solucion:
index.js:

import React from 'react'
import { Link, Nav } from './styles'
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'
import { useLocation } from 'react-router-dom';

const SIZE = '32px';

export const NavBar = () =>{
  const { pathname } = useLocation();
  return (
    <Nav>
      <Link to='/' className={pathname==='/'?'selected':''}><MdHome size={SIZE} /></Link>
      <Link to='/favs' className={pathname==='/favs'?'selected':''} ><MdFavoriteBorder size={SIZE} /></Link>
      <Link to='/user' className={pathname==='/user'?'selected':''} ><MdPersonOutline size={SIZE} /></Link>
    </Nav>
  )
}

styles.js:

import styled from 'styled-components'
import { Link as LinkRouter } from 'react-router-dom'
import { fadeIn } from '../../styles/animation';


export const Nav = styled.nav`
  align-items: center;
  background: #fcfcfc;
  border-top: 1px solid #e0e0e0;
  bottom: 0;
  display: flex;
  height: 50px;
  justify-content: space-around;
  left: 0;
  margin: 0 auto;
  max-width: 500px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1000;
`

export const Link = styled(LinkRouter)`
  align-items: center;
  color: #888;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  &.selected {
    color: #000;
    &:after {
    ${fadeIn({time:'0.5s'})}
      content: '·';
      position: absolute;
      bottom: 0;
      font-size: 34px;
      line-height: 20px;
    }
  }
`

Solo por curiosidad, que desventajas (o ventajas) puede otorgarnos una librería como Materia-UI?. Siendo que ya tiene en su core componentes como el NaBar que estamos diseñando.

En Nextjs no tengo el atributo aria-current. Mi solución fue usar el Router de Nextjs para identificar en cuál dirección estoy y crear una clase “selected”, que luego usé en el styles.js. Recibo sugerencias de como hacer esto de una manera más eficiente!

NavBar.js:

<code>
import React from 'react';
import {Nav, A} from './styles'
import { useRouter } from 'next/router';
import Link from 'next/link';
import {MdHome,MdFavoriteBorder, MdPersonOutline} from 'react-icons/md'
const SIZE='32px'
const NavBar = () => {
      const router = useRouter();
      console.log(router);
    return (
      <Nav>
        <Link href={'/'}>
          <A className={router.route === '/' ? 'selected' : ''}>
            <MdHome size={SIZE} />
          </A>
        </Link>
        <Link href={'/favs'}>
          <A className={router.route === '/favs' ? 'selected' : ''}>
            <MdFavoriteBorder size={SIZE} />
          </A>
        </Link>
        <Link href={'/user'}>
          <A className={router.route === '/user' ? 'selected' : ''}>
            <MdPersonOutline size={SIZE} />
          </A>
        </Link>
      </Nav>
    );
}
 
export default NavBar;

styles.js:

<code>
import styled from 'styled-components'
import { fadeIn } from 'styles/animation';

export const Nav=styled.nav`
    align-items:center;
    background:#fcfcfc;
    border-top:1px solid #e0e0e0;
    bottom:0;
    display:flex;
    height:50px;
    justify-content:space-around;
    left:0;
    margin:0 auto;
    max-width: 500px;
    position:fixed;
    right:0;
    width:100%;
    z-index:1000;
`

export const A = styled.a`
  align-items: center;
  color: #888;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  &.selected {
    color: #000;
    &:after {
    ${fadeIn({time:'0.5s'})}
      content: '·';
      position: absolute;
      bottom: 0;
      font-size: 34px;
      line-height: 20px;
    }
  }
`;

Les dejo mi repositorio con el avance hasta ahora:

https://github.com/danyel117/petgram-platzi/tree/navbar

Estilos

export const Link = styled(LinkRouter)`
  align-items: center;
  color: #888;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;

  &[aria-current] {
    color: #000;

    &:after {
      ${fadeIn({ time: '0.5s' })};
      content: '·';
      position: absolute;
      bottom: 0;
      font-size: 34px;
      line-height: 20px;
    }
  }
`

Para que se desative el icono del Home con react con react router 6 se usa el atributo end en vez de exact y queda asi el código index.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Nav, Link } from "./styles";
import { AiOutlineHome, AiOutlineHeart, AiOutlineUser } from "react-icons/ai";

const SIZE = "32px";

export const NavBar = () => {
  return (
    <BrowserRouter>
    <Nav>
        
      <Link end to="/">
        <AiOutlineHome size={SIZE} />
      </Link>
      <Link end to="/favorites">
        <AiOutlineHeart size={SIZE} />
      </Link>
      <Link end to="/user">
        <AiOutlineUser size={SIZE} />
      </Link>
    
    </Nav>
    </BrowserRouter>
  );
};

codigo:

Atributo aria-current

muy interesante este curso

Muy buen tip el de aria-current , no esta en la escuela de html y css.

con react router dom no coloca el class ‘current-area’, esta fue mi solución para colocarlo usando el hook useLocation que provee la librería:

import React from 'react'
import { useLocation } from 'react-router-dom'
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'
import { Nav, Link } from './styles'

const SIZE = '25px'

export const Navbar = () => {
  const { pathname } = useLocation()
  const setCurrentArea = (path) => {
    return pathname === path ? 'area-current' : ''
  }

  return (
    <Nav>
      <Link className={setCurrentArea('/')} to='/'><MdHome size={SIZE} /></Link>
      <Link className={setCurrentArea('/favs')} to='/favs'><MdFavoriteBorder size={SIZE} /></Link>
      <Link className={setCurrentArea('/user')} to='/user'><MdPersonOutline size={SIZE} /></Link>
    </Nav>
  )
}

❤️

Lo hice de dos formas y obtuve resultados similares con NavLink en vez de Link, o con “&:hover{}”.

Cabe destacar que con hover en version desktop, el icono sera de color negro incluso si se pasa el cursor sin darle Click.

Yo use el caracter ’ . ’ y para que se pudiera ver aumente el bottom

&[aria-current]{

   color: black;

   &:after{ /*Elemento justo despues*/
      content: '.';
      position: absolute;
      bottom: 10px;
      font-size: 34px;
      line-height: 20px;
    }
   
 }

Excelente UX

Me encanto esta seccion, muy util, y Reach Router lo hace mas facil, creo que cada vez mas me convence de utilizar Reach Router.

aria-current no lo conocía pero le da muy buen estilo y mejora la experiencia del usuario, creo que lo usaré en el próximo proyecto 😄

Todos los usos que podemos darle son enfocados en los estilos supongo