@page "/"
@rendermode InteractiveServer

<div class="d-flex flex-row vh-100">
  <div class="sidebar">

    @* Sidebar Element 1 *@
    <div class="sidebar-element">

      @* Sidebar Item - A *@
      <div class="card bg-primary p-2">
        <p>A</p>
      </div>

      @* Sidebar Sub items *@
      <div class="sidebar-items-container">
        @* Sidebar Item - Page A *@
        <div class="sidebar-item card bg-primary p-2">
          <p>Page A</p>
        </div>

        @* Sidebar Item Sub items *@
        @* RECURSION *@
        <div class="sidebar-items">
          @* Sidebar Item - A.1 *@
          <div class="sidebar-item">
            <div class="sidebar-item parent card bg-primary p-2">
              <p>Page A.1</p>
            </div>

            @* Sidebar Sub items *@
            <div class="sidebar-items-container">
              @* Sidebar Item - Page A *@
              <div class="sidebar-item card bg-primary p-2">
                <p>Page A.1</p>
              </div>

              @* RECURSION *@
              <div class="sidebar-items">
                <div class="d-flex flex-column">

                  @* Sidebar Item - A.1.1 *@
                  <div class="sidebar-item">
                    <div class="sidebar-item parent card bg-primary p-2">
                      <p>Page A.1.1</p>
                    </div>

                    @* Sidebar Sub items *@
                    <div class="sidebar-items-container">
                      @* Sidebar Item - Page A *@
                      <div class="sidebar-item card bg-primary p-2">
                        <p>Page A.1</p>
                      </div>

                      @* RECURSION *@
                      <div class="sidebar-items">
                        <div class="d-flex flex-column">

                          @* Sidebar Item - A.1.1 *@
                          <div class="sidebar-item">
                            <div class="sidebar-item parent card bg-primary p-2">
                              <p>Page A.1.1</p>
                            </div>

                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>