skysan's programming notebook

コーディングして思ったことなどを気ままに

ドラッグで幅可変なサイドメニューを作った

はじめに

  • SlackやVisual Studio Codeのようにサイドメニューの幅をドラッグで調整できるサンプルを作った。

先に結果

f:id:skysan:20210406213437g:plain

開発環境

  • Vue 3
  • Tailwind

仕様

  1. サイドメニューとメインコンテンツの間に仕切りを用意
  2. サイドメニューとメインコンテンツと仕切りの幅はGridで指定
  3. 仕切りをドラッグした時に、サイドメニューの幅を変更
  4. 今回はpageX(ブラウザ画面のX軸座標)を幅としている

ソースコード

VueTailwind resizeable sidemenu