Держите кнопку на краю боковой панели

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

закрыто

открыть

Моя идея состояла в том, чтобы использовать react-bootstrap и его компонент Col, но это не сработало. Моя следующая идея состоит в том, чтобы отслеживать ширину меню боковой панели и соответствующим образом корректировать содержимое и кнопку. Для этой идеи я думаю, что мне нужно подтянуть состояние ширины к моему компоненту верхнего уровня, но это похоже на набросок. Я пытаюсь понять, как получить ширину компонента при его расширении и сжатии. Мой опыт довольно низок, это мой первый собственный реактивный проект.

App.js (компонент верхнего уровня)

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>
      )
    }
};

Кнопка

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

export default class ToggleButton extends Component {
    render() {
        let menuStatus = "hidden";
        let direction = ">"
        if (this.props.menuVisibility){
            menuStatus = "open"
            direction = "<"
        }

      return (
          <button id = "toggleButton" className = {menuStatus} onClick = {this.props.onClick}> {direction} </button>
      )
    }
};