css - 如何在 React.js 中使用 Reactstrap 将 Navbar Collapse 转换为移动 View 中的侧边栏？

Question

引用下面评论中的图片链接，你知道如何在移动 View 中实现将导航栏折叠成侧边栏的效果吗？如何在不影响和移动 Logo 和按钮的情况下实现它？

//[Home Navbar Desktop View]: /image/THf6k.jpg 
//[Home Navbar Mobile View]: /image/CiJOc.png
//[Home Navbar/Sidebar Extend Mobile View]: /image/HhJxQ.png

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from "./components/home/home";
import About from "./components/about/about";
import Portfolio from "./components/portfolio/portfolio";
import Services from "./components/services/services";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, Button } from 'reactstrap';
import './App.css';
import 'tachyons';

class App extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
        <div className='App'>
        <Navbar className='sticky-top' color="light" light expand="md">
          <NavbarBrand href="/"><b className='logo'>Amecle</b></NavbarBrand>
          <NavbarToggler className="order-first" onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/about">About</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/services">Services</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/portfolio">Portfolio</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
          <Button className="still_on_view" outline color="primary">Request a quote</Button>{' '}
        </Navbar>

Answer 1

这个答案对我有用。

在 <Navbar className='sticky-top' color="light" light expand="md">更改 expand="md"至 expand="lg" (这表示最大 1024 像素(ipad 大小)的媒体将折叠。