[解決済み] react-bootstrapでサイドバーを作る。

質問

この写真のようなBootstrapのサイドバーを作成しようとしています。

react-bootstrapとTwitter Bootstrapのすべてのコードを見ましたが、これをコード化する方法はまだ見つかっていません。基本的に、デスクトップで閲覧している場合はサイドバーを表示し、それ以外の場合は非表示にしたいのです。

ページ上のコンテンツが上下にスクロールする間、サイドバーは静止していなければなりません。

解決方法は？

さて、サイドバーを作りたい人のためのニュースは、悲しいことに、それをすべて自分で作らなければならないということです。

私が行ったのは次のようなものです。

1. の例をご覧ください。 https://github.com/StartBootstrap/startbootstrap-simple-sidebar
2. アプリ内のどこかにsidebar.jsを作成します。

import React from "react";
import {Nav} from "react-bootstrap";
import { withRouter } from "react-router";
import '../pages/style/Dashboard.css'

const Side = props => {
   

    return (
        <>
    
            <Nav className="col-md-12 d-none d-md-block bg-light sidebar"
            activeKey="/home"
            onSelect={selectedKey => alert(`selected ${selectedKey}`)}
            >
                <div className="sidebar-sticky"></div>
            <Nav.Item>
                <Nav.Link href="/home">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-1">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                Disabled
                </Nav.Link>
            </Nav.Item>
            </Nav>
          
        </>
        );
  };
  const Sidebar = withRouter(Side);
  export default Sidebar

1. 私のDashboard.cssには、以下のようなものがあります。

 .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        min-height: 100vh !important;
        z-index: 100;
        padding: 48px 0 0;
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    }
    #sidebar-wrapper{
        min-height: 100vh !important;
        width: 100vw;
        margin-left: -1rem;
        -webkit-transition: margin .25s ease-out;
        -moz-transition: margin .25s ease-out;
        -o-transition: margin .25s ease-out;
        transition: margin .25s ease-out;
    }
    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }
    
    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

そして最後のステップ 表示させたいファイルの中で、次のようにします。

import React from "react";
import {Container, Row, Col, Card, Form, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import Sidebar from "../moduls/sidebar.js";
import './style/Dashboard.css'

const Dash = props => {
   

    return (
        <>
         <Container fluid>
                <Row>
                    <Col xs={2} id="sidebar-wrapper">      
                      <Sidebar />
                    </Col>
                    <Col  xs={10} id="page-content-wrapper">
                        this is a test
                    </Col> 
                </Row>

            </Container>
        </>
        );
  };
  const Dashboard = withRouter(Dash);
  export default Dashboard