保持按钮在侧边栏的边缘

Question

我正在处理React模板，并且我想要一个侧边栏导航组件。我正在努力扩展部分。因此，当导航组件展开时，我希望内容缩小，并且“展开/折叠”按钮保持在菜单边缘。

已关闭

打开

我的想法是使用react-bootstrap及其Col组件，但这没有用。我的下一个想法是跟踪侧边栏菜单的宽度，并相应地调整内容和按钮。对于这个想法，我想我需要将width状态拉到我的顶层组件，但这似乎是草图。我试图弄清楚如何在组件扩展和缩小时获得其宽度。我的经验很差，这是我第一次在自己的React项目上工作。

App.js（顶级组件）

Collection<? extends B<R>> cOfBs

SidebarContainer

import React, { Component } from "react";
import { Route, NavLink, HashRouter } from "react-router-dom";
import Home from "./Home";
import SidebarContainer from "./Sidebar/SidebarContainer";
import Row from "react-bootstrap/Row";

export default class App extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <Row>
            <div className="header">
              <span>Company Name</span>
              <span>App Name Goes Here</span>
              <span>Hello Username</span>
            </div>
          </Row>

          <Row>
            <SidebarContainer/>
            <div className="content">
              <Route exact path="/" component={Home} />
            </div>
          </Row>
        </div>
      </HashRouter>
    );
  }
}

侧边栏菜单

import React, { Component } from "react";
import ToggleButton from './ToggleButton';
import SidebarMenu from './SidebarMenu';

export default class SidebarContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      SidebarOpen: false
    };
    this.toggleSidebar = this.toggleSidebar.bind(this);
  }

  toggleSidebar(){
      this.setState({
          SidebarOpen: !this.state.SidebarOpen
      });
    }

    render(){
        return (
            <div>
                <ToggleButton onClick = {this.toggleSidebar} menuVisibility = {this.state.SidebarOpen}/>
                <SidebarMenu menuVisibility = {this.state.SidebarOpen}/>

            </div>
        )
    }
}

按钮

import React, { Component } from "react";
import "./SidebarMenu.css";
import FeedbackButton from "./FeedbackButton";

export default class SidebarMenu extends Component {
    render() {
        let visibility = "hide";
        if(this.props.menuVisibility){
            visibility = "show";
        }

      return (
        <div id="SidebarMenu" className= {visibility}>
        <h2><a href="#">Home</a></h2>
        <h2><a href="#">About</a></h2>
        <h2><a href="#">Contact</a></h2>
        <h2><a href="#">Search</a></h2>
        <FeedbackButton/>
        </div>
      )
    }
};