syncfusion-angular-sidebar

Syncfusion Angular Sidebar コンポーネントの実装

Sidebar は、メインコンテンツの横にメインまたは補助コンテンツを表示するサイドコンテナーとして機能する、展開と折りたたみが可能なナビゲーションコンポーネントです。柔軟な表示／非表示の動作、複数の配置モード（左、右、上、下）、さまざまな展開タイプ（Push、Slide、Over、Auto）、コンパクト状態でのドッキング、タッチジェスチャー、アニメーション、レスポンシブ動作、TreeView や ListView を含む豊富なコンテンツに対応しています。

このスキルを使用する場面

• 折りたたみ可能なナビゲーションメニューやサイドバーを実装する
• 画面サイズに合わせて変化するレスポンシブなナビゲーションを作成する
• アイコンのみのドッキング状態を持つ展開可能なパネルを構築する
• タッチデバイスでジェスチャーによるサイドバーの切り替えを追加する
• サイドバーをさまざまな方向（左、右、上、下）に配置する
• サイドバーのコンテンツに集中できるよう、背景オーバーレイを実装する
• TreeView または ListView を使って複数階層のナビゲーションを作成する
• 自動で閉じる動作を使ってサイドバーの表示状態を管理する
• show()、hide()、toggle() メソッドで切り替えボタンを構築する
• サイドバーにアニメーションと RTL 対応を適用する

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• Angular CLI のセットアップとプロジェクトの初期化（推奨）
• Syncfusion パッケージのインストール（Ivy 版と ngcc 版）
• モジュールと CSS スタイルのインポート
• 基本的なサイドバーコンポーネントの作成
• ViewChild のセットアップと初期化

SystemJS のセットアップ（代替方法）

📄 参照： references/systemjs-setup.md

• SystemJS の構成とインストール
• Syncfusion のマッピングを含む systemjs.config.js のセットアップ
• UMD バンドルの構成
• SystemJS を使った Sidebar の作成
• 開発サーバーとアプリケーションの実行
• SystemJS と Angular CLI の比較

Sidebar の配置と動作

📄 参照： references/sidebar-positioning.md

• Sidebar の種類：Push、Slide、Over、Auto
• 配置：左、右、上、下
• 固定サイドバーのための固定配置
• enableDock プロパティと dockSize プロパティを使ったドッキング
• 同じページ上に複数のサイドバーを配置する
• 動的なプロパティ更新のための dataBind()

Sidebar の操作と制御

📄 参照： references/sidebar-interactions.md

• 制御メソッド：show()、hide()、toggle()
• レスポンシブ動作のための mediaQuery を使った自動クローズ
• 外部クリックを処理する closeOnDocumentClick
• showBackdrop を使った背景オーバーレイ
• enableGestures を使ったタッチジェスチャー対応
• 開くイベントと閉じるイベントの処理

Sidebar のコンテンツとコンポーネント

📄 参照： references/sidebar-content.md

• リスト形式のコンテンツのための ListView 統合
• 階層型メニューのための TreeView 統合
• カスタム HTML コンテンツとメニュー項目
• ターゲット要素の構成
• コンテンツ構造とレイアウトパターン

アニメーションとスタイル設定

📄 参照： references/animations-and-styles.md

• animate プロパティを使ったアニメーション制御
• アニメーションの種類とバリエーション
• Material3 などのテーマを使った CSS テーマ設定
• enableRtl を使った RTL（右から左）対応
• レスポンシブデザインのパターン
• CRG（Custom Resource Generator）の使用

高度な機能とパターン

📄 参照： references/advanced-features.md

• enablePersistence を使った状態の永続化
• RTL の実装詳細
• アクセシビリティ機能
• ルーティングを使ったサイドバーの非表示
• パフォーマンスの最適化
• エッジケースとトラブルシューティング

クイックスタートの例

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [SidebarModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-sidebar #sidebar id="default-sidebar">
              <div class="title">Sidebar Content</div>
            </ejs-sidebar>
            <div>
              <div class="title">Main Content</div>
              <button (click)="toggleSidebar()">Toggle Sidebar</button>
            </div>`,
  styles: [`
    .title { padding: 20px; font-weight: bold; }
  `]
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  toggleSidebar() {
    this.sidebar?.toggle();
  }
}

Target プロパティの動作

サイドバーの target プロパティは、サイドバーの展開／折りたたみによって影響を受ける要素を制御します。2 つの異なるモードがあります。

暗黙的なターゲット指定（推奨 — デフォルトの動作）

target プロパティは指定されていません。 サイドバーは自動的に次の兄弟 <div> 要素をターゲットにします。

<ejs-sidebar id="sidebar" type="Push"></ejs-sidebar>
<div>  
  <div class="content">Main Content</div>
</div>

✅ 利点：

• シンプルで読みやすいコード
• ラッパー要素が不要
• 直感的なレイアウトに最適
• ほとんどのアプリケーションでこちらを使用してください

---

明示的なターゲット指定（上級 — 制御が必要な場合）

[target]="'#selector'" プロパティを使用して、影響を与える要素を明示的に指定します。

<ejs-sidebar [target]="'#content-area'" type="Push"></ejs-sidebar>
<div id="content-area">              
  <div>                              
    <div class="content">Main Content</div>
  </div>
</div>

⚠️ 重要： 明示的に target を指定する場合、CSS の変換が正しく動作するように、ターゲットコンテナー内に内側のラッパー <div> を必ず含めてください。

明示的なターゲット指定を使用する場合：

• 特定の要素（ヘッダー、フッター）をサイドバーの効果から除外したい場合
• 複数のセクションを含む複雑なレイアウトを使用している場合
• 変換を細かく制御する必要がある場合

---

各モードの使い分け

モード	使用する場面	複雑さ	ラッパーの要否
暗黙的（target なし）	ほとんどのレイアウトのデフォルト	シンプル	❌ 不要
明示的（target あり）	複雑なレイアウト、選択的なターゲット指定	上級	✅ 必要（内側）

詳しい例は references/sidebar-positioning.md をご覧ください。

---

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

Sidebar コンポーネントには、動作や外観を制御する以下のプロパティが用意されています。

animate

型： boolean | デフォルト： true

サイドバーを展開または折りたたむ際のアニメーション遷移を有効または無効にします。

// Example: Disable animations for instant toggle
<ejs-sidebar [animate]="false"></ejs-sidebar>

// Example: Enable animations (default)
<ejs-sidebar [animate]="true"></ejs-sidebar>

---

closeOnDocumentClick

型： boolean | デフォルト： false

メインコンテンツ領域のサイドバー外をクリックしたときに、サイドバーを閉じるかどうかを指定します。

// Example: Auto-close sidebar on document click
<ejs-sidebar [closeOnDocumentClick]="true"></ejs-sidebar>

// Example: In component
this.closeOnClick = true;

---

dockSize

型： string | number | デフォルト： 'auto'

ドック状態（折りたたまれているものの、アイコンが表示されている状態）のサイドバーの幅を指定します。

// Example: Set dock size to 72 pixels
<ejs-sidebar [dockSize]="'72px'" [enableDock]="true"></ejs-sidebar>

// Example: Set as number
<ejs-sidebar [dockSize]="72" [enableDock]="true"></ejs-sidebar>

// Example: In component
public dockSize: string = '72px';

---

enableDock

型： boolean | デフォルト： false

サイドバーにアイコンのみを表示し、ホバーまたはクリックで展開するドック状態を有効にします。

// Example: Enable docking for icon-only sidebar
<ejs-sidebar [enableDock]="true" [dockSize]="'72px'">
  <div class="sidebar-item" title="Home">
    <i class="e-icons e-home"></i>
  </div>
  <div class="sidebar-item" title="Settings">
    <i class="e-icons e-settings"></i>
  </div>
</ejs-sidebar>

// Example: In component
public enableDock = true;
public dockSize = '72px';

---

enableGestures

型： boolean | デフォルト： true

タッチデバイスでスワイプによってサイドバーを開閉するタッチジェスチャーを有効にします。

// Example: Enable gesture support (default)
<ejs-sidebar [enableGestures]="true"></ejs-sidebar>

// Example: Disable gestures for specific use cases
<ejs-sidebar [enableGestures]="false"></ejs-sidebar>

---

enablePersistence

型： boolean | デフォルト： false

localStorage を使用して、ページの再読み込み後もサイドバーの状態（開閉状態、位置、種類）を保持できるようにします。

// Example: Enable persistence to remember sidebar state
<ejs-sidebar [enablePersistence]="true"></ejs-sidebar>

// Persisted states:
// 1. Position (Left/Right)
// 2. Type (Push/Slide/Over/Auto)
// 3. Open/Closed state

---

enableRtl

型： boolean | デフォルト： false

サイドバーを右から左へ読むレイアウトにします。アラビア語やヘブライ語など、RTL 言語に便利です。

// Example: Enable RTL layout
<ejs-sidebar [enableRtl]="true"></ejs-sidebar>

// Example: Dynamically set based on language
public isRtl = document.documentElement.lang === 'ar';
<ejs-sidebar [enableRtl]="isRtl"></ejs-sidebar>

---

isOpen

型： boolean | デフォルト： false

サイドバーが開いた（展開した）状態か、閉じた（折りたたまれた）状態かを取得または設定します。

// Example: Initially open sidebar
<ejs-sidebar [isOpen]="true"></ejs-sidebar>

// Example: Initially closed (default)
<ejs-sidebar [isOpen]="false"></ejs-sidebar>

// Example: Toggle state from component
@ViewChild('sidebar') sidebar?: SidebarComponent;

toggleOpen() {
  this.sidebar!.isOpen = !this.sidebar!.isOpen;
}

// Note: When sidebar type is 'Auto', this property is ignored on mobile devices

---

mediaQuery

型： string | MediaQueryList | デフォルト： null

クエリが一致したときにサイドバーを自動的に開くメディアクエリー文字列を指定します。

// Example: Open sidebar on screens wider than 600px
<ejs-sidebar [mediaQuery]="'(min-width: 600px)'"></ejs-sidebar>

// Example: Using MediaQueryList object
public mediaQuery = window.matchMedia('(min-width: 768px)');
<ejs-sidebar [mediaQuery]="mediaQuery"></ejs-sidebar>

// Example: Common breakpoints
// Mobile: '(max-width: 600px)'
// Tablet: '(min-width: 601px) and (max-width: 1024px)'
// Desktop: '(min-width: 1025px)'

---

position

型： SidebarPosition | デフォルト： 'Left'

サイドバーの位置を指定します。'Left' または 'Right' を指定できます。

// Example: Position sidebar on the left (default)
<ejs-sidebar [position]="'Left'"></ejs-sidebar>

// Example: Position sidebar on the right
<ejs-sidebar [position]="'Right'"></ejs-sidebar>

// Example: Set position dynamically
public sidebarPosition: SidebarPosition = 'Left';
<ejs-sidebar [position]="sidebarPosition"></ejs-sidebar>

使用できる値：

• 'Left' — サイドバーを左側に表示します
• 'Right' — サイドバーを右側に表示します

---

showBackdrop

型： boolean | デフォルト： false

サイドバーが開いているときに、メインコンテンツ上にオーバーレイの背景を表示するかどうかを指定します。

// Example: Show backdrop overlay
<ejs-sidebar [showBackdrop]="true"></ejs-sidebar>

// Example: Backdrop with auto-close on click
<ejs-sidebar [showBackdrop]="true" [closeOnDocumentClick]="true"></ejs-sidebar>

// Example: Combine with other properties
<ejs-sidebar 
  [showBackdrop]="true" 
  [closeOnDocumentClick]="true"
  [type]="'Over'">
</ejs-sidebar>

---

target

型： HTMLElement | string | デフォルト： null

サイドバーが影響を与える要素（押し出し／スライド／変換）を指定します。上記の「ターゲットプロパティの動作」セクションをご覧ください。

⚠️ 重要： 変換タイプ（Push／Slide）で明示的に target を指定する場合は、ターゲットコンテナー内に内側のラッパー <div> を含めてください。

// ✅ Example: Explicit targeting with ID selector (CORRECT - with wrapper)
<ejs-sidebar [target]="'#content-area'" [type]="'Push'"></ejs-sidebar>
<div id="content-area">
  <div>  
    <div>Content here</div>
  </div>
</div>

// ✅ Example: Explicit targeting with CSS class (CORRECT - with wrapper)
<ejs-sidebar [target]="'.main-content'" [type]="'Push'"></ejs-sidebar>
<div class="main-content">
  <div>  
    <div>Content here</div>
  </div>
</div>

// ✅ Example: Pass HTMLElement directly
@ViewChild('targetDiv') targetElement?: ElementRef;
<ejs-sidebar [target]="targetElement?.nativeElement" [type]="'Push'"></ejs-sidebar>
<div #targetDiv>
  <div>  
    <div>Content here</div>
  </div>
</div>

---

type

Type: SidebarType | Default: 'Auto'

サイドバーの展開方法を指定します。'Push'、'Slide'、'Over'、または 'Auto' を指定できます。

// Example: Push type - sidebar pushes content aside
<ejs-sidebar [type]="'Push'"></ejs-sidebar>

// Example: Slide type - sidebar slides over and translates content
<ejs-sidebar [type]="'Slide'"></ejs-sidebar>

// Example: Over type - sidebar floats over content
<ejs-sidebar [type]="'Over'"></ejs-sidebar>

// Example: Auto type - Over on mobile, Push on desktop
<ejs-sidebar [type]="'Auto'"></ejs-sidebar>

使用可能な値：

• 'Push' - サイドバーがメインコンテンツを横に押し出します
• 'Slide' - サイドバーがスライドし、メインコンテンツを移動させます
• 'Over' - サイドバーがメインコンテンツの上に重なって表示されます
• 'Auto' - レスポンシブ（モバイルでは Over、デスクトップでは Push）

---

width

Type: string | number | Default: '280px'

展開時のサイドバーの幅を指定します。ピクセル、パーセンテージ、または em 単位で設定できます。

// Example: Set width in pixels
<ejs-sidebar [width]="'300px'"></ejs-sidebar>

// Example: Set width as number (treated as pixels)
<ejs-sidebar [width]="300"></ejs-sidebar>

// Example: Set width in percentage
<ejs-sidebar [width]="'50%'"></ejs-sidebar>

// Example: Set width in em units
<ejs-sidebar [width]="'20em'"></ejs-sidebar>

// Example: Responsive width
public sidebarWidth = window.innerWidth < 768 ? '100%' : '300px';
<ejs-sidebar [width]="sidebarWidth"></ejs-sidebar>

---

zIndex

Type: string | number | Default: 1000

サイドバーの z-index を指定します。サイドバーのタイプが 'Over' の場合、またはモバイルで 'Auto' の場合にのみ適用されます。

// Example: Set z-index for layering
<ejs-sidebar [zIndex]="1000"></ejs-sidebar>

// Example: High z-index to appear above other modals
<ejs-sidebar [zIndex]="9999" [type]="'Over'"></ejs-sidebar>

---

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

Sidebar コンポーネントには、プログラムから制御するための以下のメソッドが用意されています。

show(e?: Event)

説明： 現在閉じている場合、サイドバーを表示します。

パラメーター：

• e（省略可能） - 表示アクションを発生させるイベント（MouseEvent | Event）

戻り値： void

例：

import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar #sidebar></ejs-sidebar>
    <button (click)="openSidebar()">Open Sidebar</button>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  // Method 1: Show without event
  openSidebar() {
    this.sidebar?.show();
  }

  // Method 2: Show with event
  openSidebarWithEvent(event: MouseEvent) {
    this.sidebar?.show(event);
  }
}

---

hide(e?: Event)

説明： 現在開いている場合、サイドバーを非表示にします。

パラメーター：

• e（省略可能） - 非表示アクションを発生させるイベント（MouseEvent | Event）

戻り値： void

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar #sidebar></ejs-sidebar>
    <button (click)="closeSidebar()">Close Sidebar</button>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  // Method 1: Hide without event
  closeSidebar() {
    this.sidebar?.hide();
  }

  // Method 2: Hide with click event
  closeSidebarOnClick(event: MouseEvent) {
    this.sidebar?.hide(event);
  }
}

---

toggle()

説明： サイドバーの開閉状態を切り替えます。

戻り値： void

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar #sidebar id="sidebar" [isOpen]="false">
      <button (click)="toggleMenu()">Close</button>
    </ejs-sidebar>
    <button (click)="toggleMenu()">☰ Menu</button>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  toggleMenu() {
    this.sidebar?.toggle();
  }
}

---

destroy()

説明： DOM からサイドバーのコントロールを削除し、すべてのイベントハンドラーと属性を切り離します。

戻り値： void

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar #sidebar></ejs-sidebar>
    <button (click)="destroySidebar()">Destroy Sidebar</button>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  // Destroy and remove the sidebar
  destroySidebar() {
    this.sidebar?.destroy();
  }
}

---

dataBind()

説明： 保留中のプロパティ変更をサイドバーコンポーネントに適用します。サイドバーのプロパティを動的に変更した後、このメソッドを使用すると、変更がすぐに描画されます。

戻り値： void

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar 
      #sidebar 
      [width]="sidebarWidth"
      [type]="sidebarType">
    </ejs-sidebar>
    <button (click)="changeSidebarProperties()">Change Properties</button>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  sidebarWidth = '280px';
  sidebarType = 'Push';

  // Change sidebar properties dynamically
  changeSidebarProperties() {
    // Modify properties
    this.sidebarWidth = '350px';
    this.sidebarType = 'Slide';
    
    // Apply changes to the component
    (this.sidebar as SidebarComponent).dataBind();
  }

  // Another example: Toggle width on docked state
  updateDockSize() {
    (this.sidebar as SidebarComponent).dockSize = '100px';
    (this.sidebar as SidebarComponent).dataBind();
  }
}

---

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

Sidebar コンポーネントは、ライフサイクルおよび操作中に以下のイベントを発生させます。

open

説明： サイドバーが開いたときに発生します。

イベント引数： EventArgs

EventArgs のプロパティ：

• cancel (boolean) - true に設定すると、開く動作を防止します
• element (HTMLElement) - サイドバーの DOM 要素
• event (MouseEvent | Event) - 元のブラウザーイベント
• isInteracted (boolean) - ユーザーの操作によって開いたかどうか
• model (SidebarModel) - サイドバーのモデルインスタンス

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar 
      #sidebar
      (open)="onOpen($event)">
    </ejs-sidebar>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  onOpen(event: any) {
    console.log('Sidebar opened');
    console.log('Event:', event.event);
    console.log('Element:', event.element);
    console.log('Is Interacted:', event.isInteracted);
    
    // Prevent opening if needed
    // event.cancel = true;
  }
}

---

close

説明： サイドバーが閉じたときに発生します。

イベント引数： EventArgs

EventArgs のプロパティ：

• cancel (boolean) - true に設定すると、閉じる動作を防止します
• element (HTMLElement) - サイドバーの DOM 要素
• event (MouseEvent | Event) - 元のブラウザーイベント
• isInteracted (boolean) - ユーザーの操作によって閉じたかどうか
• model (SidebarModel) - サイドバーのモデルインスタンス

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar 
      #sidebar
      (close)="onClose($event)">
    </ejs-sidebar>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  onClose(event: any) {
    console.log('Sidebar closed');
    console.log('Is Interacted:', event.isInteracted);
    
    // Prevent closing if needed
    // event.cancel = true;
  }
}

---

change

説明： サイドバーの状態が開閉間で変化したときに発生します。

イベント引数： ChangeEventArgs

ChangeEventArgs のプロパティ：

• element (HTMLElement) - サイドバーの DOM 要素
• name (string) - イベント名：'change'

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar 
      #sidebar
      (change)="onChange($event)">
    </ejs-sidebar>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  onChange(event: any) {
    console.log('Sidebar state changed');
    console.log('Event name:', event.name);
    console.log('Element:', event.element);
  }
}

---

created

説明： サイドバーコンポーネントが作成され、初期化されたときに発生します。

イベント引数： Object

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar 
      #sidebar
      (created)="onCreated($event)"
      style="visibility: hidden">
    </ejs-sidebar>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  onCreated(event: any) {
    console.log('Sidebar created and initialized');
    // Make sidebar visible after creation
    (this.sidebar as SidebarComponent).element.style.visibility = '';
  }
}

---

destroyed

説明： サイドバーコンポーネントが破棄されたときに発生します。

イベント引数： Object

例：

@Component({
  selector: 'app-root',
  template: `
    <ejs-sidebar 
      #sidebar
      (destroyed)="onDestroyed($event)">
    </ejs-sidebar>
  `
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  onDestroyed(event: any) {
    console.log('Sidebar destroyed');
    // Cleanup any additional resources
  }
}

---

一般的なパターン

パターン 1：トグルボタン付きサイドバー

toggle() メソッドを使用して、ボタンのクリックでサイドバーを開閉します。モバイルナビゲーションやレスポンシブレイアウトに最適です。

// In component.ts
toggleSidebar() {
  this.sidebar?.toggle();
}

// In template
<button (click)="toggleSidebar()">Toggle</button>

パターン 2：レスポンシブな自動クローズ

mediaQuery プロパティを使用して、小さな画面でサイドバーを自動的に折りたたみます。

public mediaQuery = window.matchMedia('(max-width: 600px)');
// In template
<ejs-sidebar [mediaQuery]="mediaQuery" [isOpen]="true">

パターン 3：アイコン付きドック型ナビゲーション

クリックすると展開する、アイコンのみのコンパクトなドック状態を作成します。

public enableDock = true;
public dockSize = '72px';
// In template
<ejs-sidebar [enableDock]="enableDock" [dockSize]="dockSize">

パターン 4：フォーカス用の背景オーバーレイ

背景オーバーレイを使用してメインコンテンツに重ね、サイドバーにフォーカスします。

// In template
<ejs-sidebar [showBackdrop]="true" [closeOnDocumentClick]="true">

主なプロパティ

プロパティ	型	デフォルト	目的
type	Push | Slide | Over | Auto	Auto	展開の動作とコンテンツとの連動
position	Left | Right	Left	サイドバーの方向と配置
width	string | number	280px	展開時のサイドバーの幅
dockSize	string | number	auto	ドック／折りたたみ時の幅
enableDock	boolean	false	コンパクトなドック状態を有効にする
isOpen	boolean	false	初期の開閉状態
animate	boolean	true	展開／折りたたみのアニメーションを有効にする
showBackdrop	boolean	false	メインコンテンツ上にオーバーレイを表示する
closeOnDocumentClick	boolean	false	外側をクリックしたときに閉じる
enableGestures	boolean	true	タッチによるスワイプジェスチャーを有効にする
mediaQuery	string | MediaQueryList	null	画面サイズが一致したときに自動で閉じる
enableRtl	boolean	false	右から左へのレイアウトをサポートする
enablePersistence	boolean	false	ページの再読み込み後も状態を保持する

一般的な使用例

1. アプリのナビゲーションメニュー - トグルボタン付きのトップレベルナビゲーション
2. モバイルメニュー - 小さい画面で自動的に閉じるレスポンシブなサイドバー
3. 設定パネル - アイコンベースのドック型パネルを展開してオプションを表示
4. 階層型ナビゲーション - TreeView ベースの入れ子構造のメニュー
5. コンテンツサイドバー - メインコンテンツの横に常時表示されるサイドバー
6. メールアプリケーション - メール一覧を備えたフォルダーツリー（ListView + TreeView）
7. ダッシュボードレイアウト - 折りたたみ可能なウィジェットパネル
8. RTL アプリケーション - アラビア語／ヘブライ語のインターフェース向け右から左へのサイドバー

関連項目

• Syncfusion Angular Sidebar のドキュメント
• Sidebar API リファレンス
• コンポーネントのイベントとプロパティ