Создайте желтый div над ссылкой, если адрес страницы соответствует ссылке - PullRequest
Новая
       25

Создайте желтый div над ссылкой, если адрес страницы соответствует ссылке

0 голосов
/ 28 апреля 2020

У меня есть панель навигации с неупорядоченным списком и несколькими элементами, которые содержат ссылки для отдельных страниц.

Я хочу, чтобы наверху ссылки отображалось желтое поле, если я нахожусь на этой текущей странице. Я сделал желтые прямоугольники, как вы можете видеть, и я пытаюсь придумать, как лучше всего отобразить прямоугольник на параллельной странице, есть идеи?

enter image description here

Часть, о которой я говорю: 

const linkStyle = css`
    text-decoration: none;
    font-family: "Montserrat";
    position: relative;
    font-weight: 300;
    font-style: normal;
    color: ${theme.colors.text};
    &::after {
      background-color: ${theme.colors.primary};
      width: 150%;
      height: 40px;
      content: "";
      position: absolute;
      transform: translateX(-50%);
      top: -50px;
      left: 50%;
   }
  `;

Полный файл Header.jsx 

import React from "react";
import { css } from "emotion";
import { useTheme } from "emotion-theming";

const Header = () => {
  const theme = useTheme();
  const headerStyle = css`
    position: absolute;
    top: 0;
    right: 0;
  `;

  const navStyle = css`
    width: 1093px;
    position: relative;
    background-color: ${theme.colors["bg-nav"]};
    display: flex;
    justify-content: right;
    height: 109px;
  `;
  const accountStyle = css`
    width: 428px;
    height: 109px;
    background-color: ${theme.colors["alt-red"]};
  `;

  const ulStyle = css`
    box-sizing: border-box;
    padding: 0;
    display: flex;
    margin: 0;
    font-size: 1rem;
    align-items: center;
    list-style: none;
  `;

  const itemStyle = css`
    box-sizing: border-box;
    padding: 0 30px;
  `;

  const linkStyle = css`
    text-decoration: none;
    font-family: "Montserrat";
    position: relative;
    font-weight: 300;
    font-style: normal;
    color: ${theme.colors.text};
    &::after {
      background-color: ${theme.colors.primary};
      width: 150%;
      height: 40px;
      content: "";
      position: absolute;
      transform: translateX(-50%);
      top: -50px;
      left: 50%;
    }
  `;

  return (
    <header className={headerStyle}>
      <nav className={navStyle}>
        <ul className={ulStyle}>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Home
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Menu
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Gallery
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Testiminials
            </a>
          </li>
          <li className={itemStyle}>
            <a className={linkStyle} href="/">
              Contact Us
            </a>
          </li>
        </ul>
        <div className={accountStyle}></div>
      </nav>
    </header>
  );
};

export default Header;

1 Ответ

0 голосов
/ 28 апреля 2020

Я думаю, это зависит от того, какую библиотеку вы используете для маршрутизации, потому что каждая из них делает это по-своему. Предполагая, что вы используете самую популярную (afaik) библиотеку React Router, тогда это будет случай использования <NavLink> вместо <Link>. Когда текущий URL-адрес соответствует <NavLink>, вы можете добавить пользовательский класс к activeClassName.

Вот ссылка на то, на что я ссылаюсь: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

Имея это в виду, вот упрощенная версия того, что вам нужно сделать: 

import React from "react";
import { css } from "emotion";
import { useTheme } from "emotion-theming";
import { NavLink } from 'react-router-dom';

const Header = () => {
  const activeClass = css`
    /* active css styles go here */
  `;

  return (
    <header>
      <nav>
        <ul>
          <li>
            <NavLink exact to="/" className={linkStyle} activeClassName={activeClass}>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/menu" className={linkStyle} activeClassName={activeClass}>
              Menu
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;
...