text: import styled from 'styled-components'
  import { Link } from 'react-router-dom'
  import { motion } from 'framer-motion'
  import { useLocation } from 'react-router-dom'
  
  const Nav = () => {
      const {pathname} = useLocation ()
  
      return (
          <StyledNav>
              <h1>
                  <Link id="logo" to="/">Ossandón Studio</Link>
              </h1>
              <ul>
                  <li>
                      <Link to="/">1. Nosotros</Link>
                      <Line 
                          transition={{  duration: 0.75}} 
                          initial={{ width: "0%" }} 
                          animate={{ width: pathname === "/" ? "100%" : "0%" }} 
                      />
                  </li>
                  <li>
                      <Link to="/work">2. Nuestro Trabajo</Link>
                      <Line 
                          transition={{  duration: 0.75}} 
                          initial={{ width: "0%" }} 
                          animate={{ width: pathname === "/work" ? "100%" : "0%" }} 
                      />
                  </li>
                  <li>
                      <Link to="/contact">3. Contacto</Link>
                      <Line 
                          transition={{  duration: 0.75}} 
                          initial={{ width: "0%" }} 
                          animate={{ width: pathname === "/contact" ? "100%" : "0%" }} 
                      />
                  </li>
              </ul>
          </StyledNav>
      )
  }
  
  const StyledNav = styled.nav`
      min-height: 10vh;
      display: flex;
      margin: auto;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 10rem;
      background-color: #282828;
      position: sticky;
      top: 0;
      z-index: 999;
  
      a {
          color: #fff;
          text-decoration: none;
      }
  
      ul {
          display: flex;
          list-style: none;
      }
  
      #logo {
          font-size: 1.5rem;
          font-family: "Lobster", cursive;
          font-weight: lighter;
      }
  
      li {
          margin-left: 9rem;
          position: relative;
      }
  
      @media (max-width: 1000px) {
          flex-direction: column;
          padding: 1.5rem 1rem;
  
          #logo {
              display: inline-block;
              padding: 2rem;
          }
  
          ul {
              padding: 2rem 1rem;
              justify-content: space-around;
              width: 100%;
  
              li {
                  margin: 0;
              }
          }
      }
  `
  
  const Line = styled(motion.div)`
      height: 0.3rem;
      background: #23d997;
      width: 0%;
      position: absolute;
      bottom: -50%;
      left: 0%;
  `
  
  export default Nav