Add `sub_menu` in `sidenav`

app/components/sidenav_component/sidenav_component.html.erb

@@ -1,12 +1,29 @@
 <% if @current_user.present? %>
-  <nav class="navbar navbar-light bg-light flex-column align-items-stretch p-3 sidenav">
+  <div class="accordion accordion-flush flex-column align-items-stretch p-3 overflow-auto sidenav" id="sidenav">
-    <nav class="nav nav-pills flex-column">
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Home", root_path, class: "text-dark" %> </h5> </div>
-      <a class="nav-link" href="<%= root_path %>"> Home </a>
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Search", "#", class: "text-dark" %> </h5> </div>
-      <a class="nav-link" href="#"> Search </a>
+
-      <a class="nav-link" href="<%= decisions_path %>"> Desicions </a>
+    <div class="accordion-item">
-      <a class="nav-link" href="<%= case_doctrines_path %>"> Case Doctrines </a>
+      <h5 class="accordion-header">
-      <a class="nav-link" href="<%= subject_indexes_path %>"> Subject Indexes </a>
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
-      <a class="nav-link" href="<%= destroy_user_session_path %>"> Log Out </a>
+          <%= link_to "Subject Index", subject_indexes_path, class: "accordion-link text-dark" %>
-    </nav>
+        </button>
-  </nav>
+      </h5>
+
+      <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
+    </div>
+
+    <div class="accordion-item">
+      <h5 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
+          <%= link_to "Doctrines", case_doctrines_path, class: "accordion-link text-dark" %>
+        </button>
+      </h5>
+
+      <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
+    </div>
+
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Desicions", decisions_path, class: "text-dark" %> </h5> </div>
+    <div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Logout", destroy_user_session_path, class: "text-dark" %> </h5> </div>
+  </div>
 <% end %>

app/components/subjects_sidenav_sub_menu_component.rb

@@ -0,0 +1,7 @@
+class SubjectsSidenavSubMenuComponent < BaseComponent
+  attr_reader :opts
+
+  def initialize(current_user:, opts:)
+    @opts = opts
+  end
+end

app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.erb

@@ -0,0 +1,75 @@
+<div class="accordion-collapse collapse" id="<%= opts[:main_sub_menu] %>" data-bs-parent="#sidenav">
+  <div class="accordion-body pb-0 pe-0 pt-0">
+    <% Cdao::Subject.roots.each do |subject| %>
+      <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
+        <div class="accordion-item">
+          <h5 class="accordion-header">
+            <button class="<%= subject.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], subject.id].join %>">
+              <%= link_to subject.name, subject_index_path(subject.id), class: "accordion-link text-dark" %>
+            </button>
+          </h5>
+
+          <div class="accordion-collapse collapse" id="<%= [opts[:second_sub_menu], subject.id].join %>" data-bs-parent="#firstLevelSubMenu">
+            <div class="accordion-body pb-0 pe-0 pt-0">
+              <% subject.children.each do |second_subject| %>
+                <div class="accordion accordion-flush ps-20" id="secondLevelSubMenu">
+                  <div class="accordion-item">
+                    <h5 class="accordion-header">
+                      <button class="<%= second_subject.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], second_subject.id].join %>">
+                        <%= link_to second_subject.name, subject_index_path(second_subject.id), class: "accordion-link text-dark" %>
+                      </button>
+                    </h5>
+
+                    <div class="accordion-collapse collapse" id="<%= [opts[:third_sub_menu], second_subject.id].join %>" data-bs-parent="#secondLevelSubMenu">
+                      <div class="accordion-body pb-0 pe-0 pt-0">
+                        <% second_subject.children.each do |third_subject| %>
+                          <div class="accordion accordion-flush" id="thirdLevelSubMenu">
+                            <div class="accordion-item">
+                              <h5 class="accordion-header">
+                                <button class="<%= third_subject.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], third_subject.id].join %>">
+                                  <%= link_to third_subject.name, subject_index_path(third_subject.id), class: "accordion-link text-dark" %>
+                                </button>
+                              </h5>
+
+                              <div class="accordion-collapse collapse" id="<%= [opts[:fourth_sub_menu], third_subject.id].join %>" data-bs-parent="#thirdLevelSubMenu">
+                                <div class="accordion-body pb-0 pe-0 pt-0">
+                                  <% third_subject.children.each do |fourth_level| %>
+                                    <div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu">
+                                      <div class="accordion-item">
+                                        <h5 class="accordion-header">
+                                          <button class="<%= third_subject.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], fourth_level.id].join %>">
+                                            <%= link_to fourth_level.name, subject_index_path(fourth_level.id), class: "accordion-link text-dark" %>
+                                          </button>
+                                        </h5>
+                                        
+                                        <div class="accordion-collapse collapse" id="<%= [opts[:fifth_sub_menu], fourth_level.id].join %>" data-bs-parent="#fourthLevelSubMenu">
+                                          <div class="accordion-body pb-0 pe-0 pt-0">
+                                            <% fourth_level.children.each do |fifth_level| %>
+                                              <div class="accordion-item">
+                                                <p class="accordion-header">
+                                                  <%= link_to fifth_level.name, subject_index_path(fifth_level.id), class: "accordion-link text-dark" %>
+                                                </p>
+                                              </div>
+                                            <% end %>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  <% end %>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        <% end %>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/javascript/packs/application.js

@@ -29,4 +29,12 @@ $(document).ready(function () {
     $('#sidenav').toggleClass('active');
   });
 
+  $(".accordion-link").on("click", function (e) {
+    e.preventDefault();
+
+    let $href = $(this).attr("href");
+    if ($href !== undefined) {
+      window.location.href = $href;
+    }
+  });
 });

app/javascript/src/application/sidenav.scss

@@ -1,5 +1,5 @@
 .sidenav {
-  background-color: #ff4d4d;
+  background-color: #e6e6e6;
   left: 0 !important;
   position: fixed;
   padding-top: 120px;
@@ -9,6 +9,12 @@
   top: 0;
   transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
   transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
+  width: inherit;
+
+  .accordion-item, button {
+    background-color: #e6e6e6;
+    border-color: #e6e6e6;
+  }
 }
 
 .wrapper {