CSS Sidebar by React bootstrap Grid

why

HP Builderで作成された電気屋のHPの改修をやっている

非推奨であるiFrameのSideBarのNavigationをなるべく近いデザインで置き換える際に，Bootstrap Gridを採用したのでここに記す．

これがBootstrap Grid

なおRowとColを包括するタグは，Containerになる．

import {Container, Row, Col} from 'react-bootstrap';
......
  return (
    <Container>
      <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );

簡単なGrid ならこれで組める

html css にクラスをつけるよりかなりわかりやすい．

この公式サンプルの通りに配置すると，上の1/2が下の1/3と同じ位置

上の2/2 が2/3と3/3の間の位置になる

Bootstrap4と言えど流石に最初から水色のいい感じのレイアウトは付いていないので，(Tableではない)

getbootstrap.com

これをみながらclassをつけて修飾する

weblion303.net

MUIの方がPaperなどがあるのが魅力的に見える．

getbootstrap.com

基本的に12分割で設定されている．

でspan3, 3/12枠を取れる感覚だ．

f:id:kei_s_lifehack:20200510105908p:plain

上のmarginを開けるのは

<Container className='my-4'>

であいた

これで

3 col 分の広さで横は揃った，あとは縦

paddingをつけたいが，Rowだけじゃ駄目で，Col一つ一つにつけない

先頭のColだけでもこうなる

[f:id:kei_s_lifehack:20200510112347p:plain]

    <Container className='my-5'>
      <Row>
        <Col className='py-5 bg-danger' 
          xs={3}>1 to 3, top-logo </Col>
        <Col className='py-5 bg-secondary' 
          xs={2}>4 to 5, big-logo</Col>
        <Col className='py-5 bg-danger' 
          xs={7}>6 to 13, text... </Col>
      </Row>
      <Row>
        <Col className='py-3 bg-info' 
          xs={3}>HOME BTN</Col>
        <Col className='py-3 bg-danger' 
          xs={2}>BLANK</Col>
        <Col className='py-3 bg-secondary' 
          xs={7}>BLANK</Col>
      </Row>
      <Row>
        <Col className='py-3 bg-info' 
          xs={3}>NEW INFO</Col>
        <Col className='py-3 bg-secondary' 
          xs={2}>SHOP 1 NAME</Col>
        <Col className='py-3 bg-danger' 
          xs={7}>SHOP 1 TEL</Col>
      </Row>
      <Row>
        <Col className='py-3 bg-info' 
          xs={3}>ABOUT WORK</Col>
        <Col className='py-3 bg-danger' 
          xs={2}>BLANK</Col>
        <Col className='py-3 bg-secondary' 
          xs={7}>BLANK</Col>
      </Row>

ついでに色もつけた

両サイドが空いているのはcontainerだからで

マックスにするにはcontainer-fluidにする必要がある

f:id:kei_s_lifehack:20200510130241p:plain

縦の結合

だが縦の結合ができなかった

素のCSSで書いていた時はclassごとにrow 1/2 col 3/2とかやっていたから, になるとわからん

start とendで合わせるか？

そして公式ドキュメントにはgird colは12がdefltとある

どうやらこのサイトによると

knowledge.cpi.ad.jp

これで列の改行ができて

f:id:kei_s_lifehack:20200510132517p:plain

www.dspt.net

このHTMLのtableのサイトだと結合されたセルにしろとある，だからcol spanをすればいいのか？

    <Col md={{span: 4}}>1 </Col>

のspanもxs={4}も変わらない

だがRowにSpanやxsをつけても盾が広がらない！！

offsetで隙間を開ければ！

      <Row>
        <Col className='py-3 bg-primary' 
          xs={3} offset={9} >HOME BTN</Col>
      </Row>

f:id:kei_s_lifehack:20200510134058p:plain

隙間が空いた！が，入らない！

medium.com

入れ子でcontainerと分ければ作れる！！！

f:id:kei_s_lifehack:20200510141253p:plain

ようやくProgressだ....

Col md 4の中にsidemenuを入れる

Col md 8の中にCardcontainerを入れる

logoの真ん中寄はd-blockでやった

sidebarはmapを駆使してわかりやすく書くことができた

const SideMenu = () => {
  const navText = [
    'NEW INFO', 'ABOUT WORKS', 'PARTS ORDER',
    'AIRCON CLEAN', 'LINKS',
  ];
  const navItems = navText.map((item, key) => 
      <Row>
        <Col className='py-3 bg-info ' >
          <h5 key={item}>{item}</h5>
        </Col>
      </Row>
  );
  return (
    <div>
      {navItems}
    </div>
  );
};
export default SideMenu;

これでmenuが増えた時も簡単に描ける

最終的に

    <Container className='my-5'>
      <Header />
      <Row>
        <Col className='py-3 bg-primary' 
          xs={3} >
          <SideMenu />
        </Col>
        <Col className='py-3 bg-secondary' 
          xs={9} >
          <Body />
        </Col>
      </Row>

2/12, 10/12, でSideMenuとBodyを分割し

import NavData from '../NavDataList'

const SideMenu = () => {
  const navItems = NavData.map((item, key) => 
      <Row key={item} className=''>
        <Col className='py-1 my-1 ' >
          <Button variant="light"
            href={item.link}
            size='lg'
            className='w-100'
            >{item.name}</Button>
        </Col>
      </Row>
  );
  return (
    <div>
      {navItems}
    </div>
  );
};

py-3で下にpaddingをつけながら，一つのColで出力することで

入れ子構造にして，SideMenuが実装できた．

f:id:kei_s_lifehack:20200613123129p:plain