DEV Community 日本語
フォロー
バニラJSで、依存関係のないサイドバーをドラッグ&ドロップとマグネティックスナップ機能付きで構築しました。
ac_sidebar は、フレームワーク、ビルドステップ、または外部 CSS ライブラリなしで動作する、サイドバーコンポーネント専用のユニークな JavaScript クラスです。独自の CSS と SVG アイコンセットを直接統合しており、完全に自己完結型です。このコンポーネントは、再帰的な構造を持つ 2 つのメニューレベルとロールベースのフィルタリングを提供し、メニューが空の場合は自動的に非表示にすることができます。左、右、上、下、または磁気スナップを備えたドラッグ可能な「フリー」モードの 5 つの位置をサポートします。サイドバーは、アイコンレールに折りたたむか、バーガーボタンの後ろに隠すことができます。また、エントリごとにカウンターバッジを備え、単一ページに複数のインスタンスをサポートし、localStorage を使用して状態を永続化できます。開発者は、設定オブジェクトで ac_sidebar を直接インスタンス化するか、外部 JSON ファイルからロードできます。注目すべき特徴は、その設定キーと値がフランス語であることで、フランス語圏のクライアント向けに元々開発されたことを反映しています。たとえば、「left」には「gauche」、「light」には「clair」が使用されます。このクラスは、artisan-code.fr によって維持されているスタンドアロンで依存関係のない JS/PHP クラスのコレクションの一部です。フルフレームワークの使用が不要または過剰なプロジェクトのために特別に構築されています。