複数のセクションとサブセクションの階層を管理するUX
各セクションの下のセクションとサブセクションを、それぞれのアイテムリストと一緒に管理する必要があります。
階層は次のようなものです。
セクション1：
セクション1のアイテムのリスト
Sub sections 1
*List of items for sub section 1*
Sub section 2
*List of items for sub section 2*
などなど..
セクション2：
セクション2のアイテムのリスト
Sub sections 1
*List of items for sub section 1*
Sub section 2
*List of items for sub section 2*
などなど..
以下のデザインで表現しましたが、複雑すぎます。誰でも私にこれのための最も簡単なUXを提案できますか？ 
これらのセクションは長く見えます。この特定の部分では、ダイレクトマッピングを使用することをお勧めします。これは、サイドナビゲーションバーを使用して行うことができます。
ブートストラップには美しい例があります here 右側のナビゲーションを参照してください。このシステムを使用して、右側に何かを作成できます。しかし、これには欠点が1つあります。Webのように幅広で作業するのと同じように、モバイルでこの方法を使用することはできません。 
これとは別に、別の方法でそれを示す必要がある場合は、トグルバーを安全なものとして慎重に処理する必要があります圧縮サイズの場合はスペースが少ないため、スキップされる可能性が高くなります。これらのバーを目立たせる必要があります。また、分離して見えるように、他のバーの間にスペースを確保する必要があります。
これは小さい画面のデバイスでもうまく機能する必要があることを念頭に置いて、別のページに分割してみてください。 1つのオプションは、連続する各セクションを別のページで開くことですが、別のページで第3レベルのみを使用することもできます。乱雑さと認知負荷を軽減します。
別のページで3番目のレベルを維持するもう1つの理由は、ユーザーがその特定のリスト（またはセクション）に既に投資しているためであり、ユーザーが選択したサブセクションに集中することをお勧めします。クリックします。
たとえば、この構造を見てみましょう。
