javascript - 根据媒体查询更改 React 导航栏行为和元素

Question

我在这个项目中使用带有 React 的 Styled Components - 我目前有一个导航栏（标准为水平） - 并且在移动设备上使用媒体查询垂直堆叠。

我对基于移动设备添加额外元素的最佳实施方法有点困惑。例如，在移动设备上我只想显示当前页面（以及一个打开的图标来展开菜单），然后在导航栏底部添加一个额外的“选项”来关闭导航栏。我相当确定我不能使用媒体查询来设置属性，isMobileDevice所以不确定如何最好地处理移动设备上的导航栏“打开”和“关闭”状态。

我将附上一些代码，目前分为以下两个组件。任何关于潜在实施的建议或建议阅读将不胜感激！

const StyledList = styled.ul`
  margin-left: -6rem;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  background-color: #f9f9f9;

  @media (max-width: 375px) {
    flex-direction: column;
    margin-left: 0px;
    margin-left: -3rem;
  }
`;

const StyledHeaderBlock = styled.li`
  height: 50px;
  width: 6rem;
  background-color: #007680;
  ${roundedCorners("bottom-left", "", "12px")};

  @media (max-width: 375px) {
    display: none;
  }
`;

/**
 * Navigation tabs
 */
const NavigationTabs = ({ className, items }: Props) => (
  <StyledList className={classNames("nav-tabs", className)}>
    <StyledHeaderBlock />
    {items.map((link) => (
      <NavigationItem key={link.key} link={link} isTab />
    ))}
    <StyledCloseBlock />
  </StyledList>
);

const StyledTabItem = styled.li`
  border-right: 1px;
`;

const StyledLink = styled(Link)`
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #63666a;

  @media (max-width: 375px) {
    width: 100%;
  }

  ${({ isTab, isActive }) =>
    isTab &&
    css`
      text-decoration: none;
      box-shadow: inset 1px 0px 0px 0px rgb(229, 233, 235);
      height: 100%;

      &:hover,
      &:focus {
        color: grey;
        text-decoration: none;
      }

      ${isActive &&
      css`
        text-decoration: none;
        color: white;
        background-color: #27282a;
        box-shadow: none;

        &:hover,
        &:focus {
          color: #f9f9f9;
      `};
    `};
`;

/**
 * Navigation item
 */
const NavigationItem = ({
  className,
  isActive = false,
  isTab = false,
  link,
  pathname,
}: Props) => {
  return (
    <StyledTabItem
      className={classNames("nav-item", className, {
        active: isActiveLink,
      })}
      isTab={isTab}
      isActive={isActiveLink}
    >
      <StyledLink
        dataId={link.key}
        href={link.href}
        isActive={isActiveLink}
        isTab={isTab}
        isNavLink
      >
        {link.label}
      </StyledLink>
    </StyledTabItem>
  );
};

标签： javascriptcssreactjsstyled-components