syncfusion-react-sidebar

Syncfusion React Sidebar の実装

Syncfusion React Sidebar は、最新の Web アプリケーション向けに柔軟なレイアウトパターンを実現する、レスポンシブなナビゲーションコンポーネントです。複数の表示モード（Over、Push、Slide、Auto）、レスポンシブブレークポイント、タッチジェスチャー、キーボードナビゲーションに対応し、ListView および TreeView コンポーネントとシームレスに連携します。

このスキルを使う場面

次のような場合は Sidebar を選択してください。

• レスポンシブなナビゲーション - デスクトップ／モバイルのビューポートに合わせて調整されるドロワーメニュー
• マルチモードのレイアウト - Over（フロート）、Push（コンテンツを移動）、Slide（スライド移動）、または Auto（レスポンシブ）の動作
• コンテンツの整理 - ネストされたメニュー、ListView／TreeView との連携、またはマルチパネルレイアウト
• ユーザー操作パターン - 切り替えボタン、背景オーバーレイ、項目クリック時の自動クローズ、またはキーボードショートカット
• アクセシビリティ - ARIA ラベル、キーボードナビゲーション（Tab、Enter、Escape）、スクリーンリーダーのサポート
• カスタマイズ - テーマに沿ったスタイル、アニメーションのバリエーション、RTL サポート、またはカスタムコンテキストコンテナー

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの設定
• 基本的なサイドバーのレンダリング
• CSS のインポートとテーマの設定
• 初期状態の管理
• 最初の動作するサンプル

API リファレンス：プロパティ

📄 参照: references/properties-reference.md

• 型、デフォルト値、サンプルを含む全 18 プロパティ
• 表示プロパティ（type、position、width、animate、showBackdrop、zIndex）
• 動作プロパティ（closeOnDocumentClick、enableGestures、enableRtl、mediaQuery）
• 状態プロパティ（isOpen、enableDock、dockSize、enablePersistence）
• コンテナプロパティ（target）

API リファレンス：メソッド

📄 参照: references/methods-reference.md

• show(e?: Event) - オプションのイベントパラメーターを指定してサイドバーを表示
• hide(e?: Event) - オプションのイベントパラメーターを指定してサイドバーを非表示
• toggle() - 開閉状態を切り替え
• destroy() - DOM からサイドバーを削除
• 各メソッドの詳細なサンプル

API リファレンス：イベント

📄 参照: references/events-reference.md

• change - 状態変更の通知（ユーザー操作またはプログラムによる変更）
• open - サイドバーを開く前（キャンセル可能）
• close - サイドバーを閉じる前（キャンセル可能）
• created - サイドバーの初期化後
• destroyed - サイドバーの削除時
• イベント処理のサンプルとパターン

API リファレンス：イベント引数

📄 参照: references/event-arguments-reference.md

• ChangeEventArgs インターフェイス - element、name、cancel、isInteracted
• EventArgs インターフェイス - cancel、element、event、isInteracted、model
• SidebarModel オブジェクト - 完全な設定スナップショット
• 型定義と使用例

サイドバーの配置と動作

📄 参照: references/sidebar-positioning.md

• サイドバーの種類：Over、Push、Slide、Auto
• 位置：Left または Right
• 幅とドックサイズの設定
• 複数のサイドバーを横並びに配置
• メディアクエリによるレスポンシブ動作

サイドバーを開く／閉じる

📄 参照: references/opening-closing.md

• 切り替え機能
• プログラムによる表示／非表示メソッド
• ドキュメントクリック時の自動クローズ
• Escape キー押下時の自動クローズ
• アニメーション遷移
• 状態変更のイベント処理

コンテンツ連携

📄 参照: references/content-integration.md

• サイドバーと ListView の連携
• 階層型ナビゲーション向けの TreeView 連携
• カスタム HTML コンテンツと構造
• 動的データバインディングのパターン
• メニュー形式のナビゲーション構造

スタイリングとカスタマイズ

📄 参照： references/styling-customization.md

• CSS クラスのカスタマイズ
• テーマスタイル（default、material、bootstrap）
• アニメーションのバリエーションとタイミング
• レスポンシブブレークポイントのパターン
• RTL（右から左）サポート
• カスタムアニメーション

アクセシビリティとベストプラクティス

📄 参照： references/accessibility.md

• WCAG 準拠のガイドライン
• キーボードナビゲーション（Tab、Enter、Escape）
• スクリーンリーダー向けの ARIA 属性
• フォーカス管理
• 背景オーバーレイの操作パターン

クイックスタート

import React, { useState } from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="container">
      {/* Toggle Button */}
      <ButtonComponent 
        cssClass="e-primary" 
        onClick={handleToggle}
      >
        Toggle Sidebar
      </ButtonComponent>

      {/* Sidebar Component */}
      <SidebarComponent
        id="sidebar"
        width="250px"
        type="Over"
        isOpen={isOpen}
        change={() => setIsOpen(!isOpen)}
        showBackdrop={true}
        closeOnDocumentClick={true}
      >
        <div className="sidebar-content">
          <h3>Navigation Menu</h3>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </SidebarComponent>

      {/* Main Content */}
      <div className="main-content">
        <h1>Main Content Area</h1>
        <p>Content shifts when type is "Push"</p>
      </div>
    </div>
  );
}

export default App;

よくあるパターン

パターン 1：レスポンシブな自動サイドバー

ビューポートに応じて、Over（モバイル）モードと Push（デスクトップ）モードを自動的に切り替えます。

<SidebarComponent
  type="Auto"
  width="250px"
  isOpen={true}
  showBackdrop={true}
/>

パターン 2：モバイルドロワーメニュー

背景のクリックまたは Escape キーで閉じるフローティングサイドバーです。

<SidebarComponent
  type="Over"
  width="280px"
  showBackdrop={true}
  closeOnDocumentClick={true}
  position="Left"
/>

パターン 3：ドッキングされたナビゲーションパネル

固定幅で常時表示され、ドッキング時にはアイコンバーとして表示されるサイドバーです。

<SidebarComponent
  enableDock={true}
  dockSize="50px"
  width="250px"
  type="Push"
/>

パターン 4：RTL ナビゲーション（アラビア語／ヘブライ語）

右から左に記述する言語向けの、右寄せサイドバーです。

<SidebarComponent
  position="Right"
  enableRtl={true}
  type="Over"
/>

主なプロパティの概要

プロパティ	型	デフォルト	目的
type	SidebarType	'Auto'	表示モード：Over、Push、Slide、Auto
isOpen	boolean	false	サイドバーの開閉状態を制御します
position	SidebarPosition	'Left'	サイドバーの配置：Left または Right
width	string | number	'auto'	サイドバーの幅（ピクセルまたはパーセンテージ）
target	HTMLElement | string	null	サイドバーを描画するコンテナー
showBackdrop	boolean	false	開いているときにオーバーレイを表示します
closeOnDocumentClick	boolean	false	コンテンツ領域をクリックしたときに閉じます
animate	boolean	true	開閉アニメーションを有効にします
enableDock	boolean	false	ドック／最小化モードを有効にします
dockSize	string | number	'auto'	ドッキング時の幅
enableGestures	boolean	true	タッチスワイプジェスチャー
enableRtl	boolean	false	右から左へのレイアウト

よくある使用例

• 管理ダッシュボードのナビゲーション - 折りたたみ可能なサイドバーメニュー付きの上部ヘッダー
• モバイルアプリのナビゲーション - ドロワーサイドバー付きのハンバーガーメニュー
• EC サイトの商品フィルター - 展開可能なカテゴリ付きの左サイドバー
• ドキュメントサイト - 常時表示される目次サイドバー
• 設定パネル - 設定用のフローティング右サイドバー
• マルチパネルレイアウト - 異なる側に配置された複数のサイドバー

---