🌓

React + CSSでサイドバーの表示/非表示を実装したいんダ！！！！

2024/04/09に公開

CSS

こんな感じのサイドバーが欲しい！！！

ソースコード

App.jsx

import { useState } from 'react';
import './App.css';

function App() {
  // 表示/非表示を切り替える状態変数
  const [showSidebar, setShowSidebar] = useState(false)

  // 表示/非表示を切り替える関数
  function handleClick() {
    setShowSidebar(!showSidebar)
  }

  return (
    <div>
      {/* コンテント */}
      <div className='content'>
        <h2>Content</h2>
        <button onClick={() => handleClick()}>サイドバーを表示</button>
      </div>

      {/* サイドバー */}
      {/* 三項演算子で、「showSidebar」がtrueの時は「sidebar-show」
                                      falseの時は「sidebar-hidden」*/}
      <div className={showSidebar ? 'sidebar sidebar-show' : 'sidebar sidebar-hidden'}>
        <h2>Sidebar</h2>
      </div>
    </div>
  );
}

export default App;

↑
共通の「sidebar」と、表示時に適用する「sidebar-show」
非表示に適用する「sidebar-hidden」というクラス名を割り当てるようにしています。

App.css

body {
  margin: 0;
  overflow-x: hidden;
}

.content {
  background-color: #c2d7bb;
  height: 800px;
}

h2 {
  margin: 0;
}


/* サイドバーのスタイル指定 */
.sidebar {
  width: 600px;
  position: absolute;
  top: 0; 
  height: 100%;
  background-color: rgb(155, 135, 173);
}
/* サイドバー表示時 */
.sidebar-show {
  right: 0;
  transition: 0.5s;
}
/* サイドバー非表示時 */
.sidebar-hidden {
  right: -600px;
  transition: 0.5s;
}

↑
overflow-x: hidden;
この指定をしないと、サイドバーが画面右に表示されてしまいます

「position: absolute」を記述することで、サイドバーの位置を絶対値で指定できるようになります。
ここでは、「top: 0;」を指定し、「height: 100%;」とすることで、画面の上下いっぱいにサイドバーを表示しています。

また、サイドバー表示時と、非表示時で「right」の値を変えることで、画面右端からの距離を変えられるので、右からサイドバーが出てくるようになっています。
サイドバーの幅の値によって、非表示時の「right」の値を変えてください。

「transition: 0.5s」は、アニメーションの速度です。
0.5秒で表示/非表示が切り替えられるようになっています。

こんな感じのサイドバーが欲しい！！！

ソースコード

Discussion