Сначала преобразовать максимальную ширину в мобильную - PullRequest
Новая
       177

Сначала преобразовать максимальную ширину в мобильную

0 голосов
/ 06 августа 2020

Я загрузил отличное руководство с компонентами gatsby и стилями. В этом руководстве используется подход, ориентированный на настольные ПК.

Я пытаюсь сначала перейти с настольных компьютеров на мобильные устройства, версия для настольных ПК работает так, как предполагалось, но мое преобразование в сначала мобильные устройства не работает .

Это файл Navbar.jsx, я считаю, что этот файл не нужно было изменять и импортирует фактический блок меню 

import React, { useState } from 'react'
import styled from 'styled-components'
import RightNav from './RightNav'

const StyledBurger = styled.div`
      width: 2rem;
      height: 2rem;
      position: fixed;
      top: 15px;
      right: 20px;
      z-index: 20;
      display: none;
    
      @media (max-width: 768px) {
        display: flex;
        justify-content: space-around;
        flex-flow: column nowrap;
      } 
    
      div {
        width: 2rem;
        height: 0.25rem;
        background-color: ${({ open }) => (open ? '#ccc' : '#333')};
        border-radius: 10px;
        transform-origin: 1px;
        transition: all 0.3s linear;
    
        &:nth-child(1) {
          transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
        }
    
        &:nth-child(2) {
          transform: ${({ open }) => (open ? 'translateX(100%)' : 'translateX(0)')};
          opacity: ${({ open }) => (open ? 0 : 1)};
        }
    
        &:nth-child(3) {
          transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
        }
      }
    `
    
    const Burger = () => {
      const [open, setOpen] = useState(false)
    
      return (
        <>
          <StyledBurger open={open} onClick={() => setOpen(!open)}>
            <div />
            <div />
            <div />
          </StyledBurger>
          <RightNav open={open} />
        </>
      )
    }
    
    export default Burger

Это моя попытка преобразовать его в mobile-first с минимальной шириной, исходный код находится в блоке комментариев: 

import React, { useState } from 'react'
import styled from 'styled-components'
import RightNav from './RightNav'

const StyledBurger = styled.div`
  /* width: 2rem;
  height: 2rem;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 20;
  display: none;

  @media (max-width: 768px) {
    display: flex;
    justify-content: space-around;
    flex-flow: column nowrap;
  } */

  display: flex;
  justify-content: space-around;
  flex-flow: column nowrap;

  @media (min-width: 350px) {
    width: 2rem;
    height: 2rem;
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 20;
    display: none;
  }

  div {
    width: 2rem;
    height: 0.25rem;
    background-color: ${({ open }) => (open ? '#ccc' : '#333')};
    border-radius: 10px;
    transform-origin: 1px;
    transition: all 0.3s linear;

    &:nth-child(1) {
      transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
    }

    &:nth-child(2) {
      transform: ${({ open }) => (open ? 'translateX(100%)' : 'translateX(0)')};
      opacity: ${({ open }) => (open ? 0 : 1)};
    }

    &:nth-child(3) {
      transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
    }
  }
`

const Burger = () => {
  const [open, setOpen] = useState(false)

  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>
      <RightNav open={open} />
    </>
  )
}

export default Burger

This it меню файла RightNav.jsx, импортированное в Burger.jsx 

import React from 'react'
import styled from 'styled-components'

const Ul = styled.ul`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0d2538;
    position: fixed;
    transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  }   

`

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav

И это моя попытка в файле RightNav.jsx сделать его мобильным, исходный код находится в блоке комментариев: 

import React from 'react'
import styled from 'styled-components'

const Ul = styled.ul`
  /* list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0d2538;
    position: fixed;
    transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  } */
  
    display:flex;
    list-style: none;
    flex-flow: column nowrap;
    background-color: #0d2538;
    position: fixed;
    transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }

  @media (min-width: 350px) {
    flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }
  }  

`

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav

1 Ответ

0 голосов
/ 06 августа 2020

Я считаю, что ваша проблема заключается в медиа-запросе в вашем min-width образце: 

@media (min-width: 350px) {
    ...
    display: none;
}

Вы никогда не устанавливаете его в режим видимого отображения после этой строки CSS

Если вы хотите скрыть его на рабочем столе, вам нужно увеличить значение min-width до 768px или где-то в этом районе. Как и сейчас, вы увидите меню, только если размер экрана меньше 350px

...