Как выровнять навигационную панель гамбургера React в столбце с помощью тегов NavLink

#javascript #css #reactjs #hyperlink #navbar

#язык JavaScript #CSS #реагирует на #гиперссылка #навигационная панель

Вопрос:

 ```import React from 'react'  /*import {  NavLink,  NavMenu,  NavBtn,  NavBtnLink  } from './NavbarElements';*/  import { NavLink as Link } from 'react-router-dom';  import styled from 'styled-components'```  

Я добавил этот NavbarContainer, const NavbarContainer = () =gt; { const navLinkStyle = { I tried to do flex-flow inline css here flexFlow: 'column nowrap' }; return ( lt;divgt; lt;Nav style={navLinkStyle}gt; потому что думал, что это поможет, но я все еще не могу получить нужный вид столбца на навигационной панели со стороны гамбургера, когда навигационная панель опускается и сдвигается вправо, Навигационная ссылка и NavMenu-это то, что, по моему мнению, меня смущает. Я сделал два разных урока, чтобы создать это, и именно это создает мне проблемы «` Маргарет C Рокита CPA MST

 lt;NavLink to='/about' activeStylegt;  About  lt;/NavLinkgt;  lt;NavLink to='/services' activeStylegt;  Services  lt;/NavLinkgt;  lt;NavLink to='/contact-us' activeStylegt;  Contact Us  lt;/NavLinkgt;  lt;NavLink to='/sign-up' activeStylegt;  Sign Up  lt;/NavLinkgt;  lt;/NavMenugt;  lt;NavBtngt;  lt;NavBtnLink to='/signin'gt;Sign Inlt;/NavBtnLinkgt;  lt;/NavBtngt;  lt;/Navgt;  lt;/divgt;  )  }    export default NavbarContainer    export const Nav = styled.nav`    background: red;  height: 80px;  display: flex;  justify-content: space-between;  padding: 0.5rem calc((100vw - 1000px) / 2);  z-index: 10;  color: #3451d2;  @media (max-width: 768px) {  /*position: absolute;  top: 50%; left: 50%;  transform: translate(-50%,-50%);  width: 200px;  height: 200px;*/ ```  Here I also tried to do flex-flow: column  ```flex-flow: column nowrap;  top: 0;  right: 0;  height: 100vh;  width: 300px;  padding-top: 0.5rem;  padding-bottom: 32.5rem;  width: 10px    padding-top: 0rem;  top: 00;  right: 0;  transform: translate(-100%, 75%);  font-size: 0.88em;  cursor: pointer;    border-radius: 10px;  transform-origin: 1px;  transition: all 0.3s linear;  position: fixed;  height: 100vh;  width: 10px  display: block;   padding-top: 3.5rem;  top: 0;  right: 0;  transform: translate(-100%, 75%);  font-size: 1.15em;  cursor: pointer;  background-color: ${({ open }) =gt; open ? 'teal' : 'green'};  border-radius: 10px;  transform-origin: 1px;  transition: all 0.3s linear;