Implement `OffCanvas` for `Subject`

app/components/sidenav_component/sidenav_component.html.erb

@@ -88,10 +88,14 @@
                 <%= link_to '<i class="fas fa-search me-2"></i>Search'.html_safe, documents_path, class: "nav-link"  %>
               </li>
               <li class="nav-item p-2">
-                <%= link_to '<i class="fas fa-indent me-2"></i> Subjects'.html_safe, "#", class: "nav-link" %>
+                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" data-controller="subjects">
+                  <i class="fas fa-indent me-2"></i> Subjects
+                </a>
               </li>
               <li class="nav-item p-2">
-                <%= link_to ' <i class="fas fa-book me-2"></i> Doctrines'.html_safe, "#", class: "nav-link"%>
+                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas">
+                  <i class="fas fa-book me-2"></i> Doctrines
+                </a>
               </li>
               <li class="nav-item p-2">
                 <%= link_to '<i class="fas fa-map-signs me-2"></i> Desicions'.html_safe, decisions_path, class: "nav-link" %>

app/components/subject_accordion_component.rb

@@ -1,8 +1,10 @@
 class SubjectAccordionComponent < BaseComponent
-    attr_reader :parent
+    attr_reader :parent, :subjects, :opts
   
-    def initialize(current_user:, parent:)
+    def initialize(current_user:, parent:, subjects: nil, opts: {})
       @parent = parent
+      @subjects = subjects
+      @opts = opts
     end
   end
   

app/components/subject_accordion_component/subject_accordion_component.html.erb

@@ -1,4 +1,95 @@
-<% parent.children.order(name: :asc).each do |sub1| %>
+<% if opts[:is_offcanvas].present? %>
+  <% Cdao::Subject.roots.order(name: :asc).each do |root| %>
+    <div class="accordion accordion-flash" id="mainPanel<%= root.id %>">
+      <div class="accordion-item">
+        <div class="accordion-header d-flex justify-content-between">
+          <% if root.children.present? %>
+            <div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"> 
+              <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+            </div>
+          <% else %>
+            <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+          <% end %>
+        </div>
+
+        <div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
+          <div class="accordion-body pt-1 pb-1">
+            <% root.children.order(name: :asc).each do |sub1| %>
+              <div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
+                <div class="accordion-item">
+                  <div class="accordion-header d-flex justify-content-between">
+                    <% if sub1.children.present? %>
+                      <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>"> 
+                        <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
+                      </div>
+                    <% else %>
+                      <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
+                    <% end %>
+                  </div>
+
+                  <div class="accordion-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
+                    <div class="accordion-body pt-1">
+                      <% sub1.children.order(name: :asc).each do |sub2| %>
+                        <div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
+                          <div class="accordion-item">
+                            <div class="accordion-header d-flex justify-content-between">
+                              <% if sub1.children.present? %>
+                                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>"> 
+                                  <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
+                                </div>
+                              <% else %>
+                                <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
+                              <% end %>
+                            </div>
+
+                            <div class="accordion-collapse collapse" id="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>">
+                              <div class="accordion-body pt-1">
+                                <% sub2.children.order(name: :asc).each do |sub3| %>
+                                  <div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
+                                    <div class="accordion-item">
+                                      <div class="accordion-header d-flex justify-content-between">
+                                        <% if sub3.children.present? %>
+                                          <div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>"> 
+                                            <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
+                                          </div>
+                                        <% else %>
+                                          <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
+                                        <% end %>
+                                      </div>
+
+                                      <div class="accordion-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
+                                        <div class="accordion-body pt-1">
+                                          <% sub3.children.order(name: :asc).each do |sub4| %>
+                                            <div class="accordion accordion-flush ps-20">
+                                              <div class="accordion-item d-flex justify-content-between">
+                                                <div> 
+                                                  <%= link_to sub4.name, subject_index_path(sub4.id), class: "accordion-link text-decoration-none text-dark d-block sub5 clickable-link" %>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          <% end %>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                <% end %>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% else %>
+  <% parent.children.order(name: :asc).each do |sub1| %>
     <div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
       <div class="accordion-item">
         <div class="accordion-header d-flex justify-content-between">
@@ -73,4 +164,5 @@
         </div>
       </div>
     </div>
+  <% end %>
 <% end %>

app/components/subject_index_form_component.rb

@@ -7,10 +7,6 @@ class SubjectIndexFormComponent < BaseComponent
 		@parent_id = @opts[:parent_id]
 	end
 
-	def all_subjects
-		Cdao::Subject.all.order(name: :asc)
-	end
-
 	def current_library
 		Cdao::Library.first
 	end

app/components/subjects_offcanvas_component.rb

@@ -0,0 +1,11 @@
+class SubjectsOffcanvasComponent < BaseComponent
+  attr_reader :opts
+
+  def initialize(current_user:, opts: {})
+    @opts = opts
+  end
+
+  def render?
+    opts[:is_render].present?
+  end
+end

app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb

@@ -0,0 +1,31 @@
+<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Subjects</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+
+  <div class="offcanvas-body" id="subjectsAccordion">
+    <% Cdao::Subject.roots.order(name: :asc).each do |root| %>
+      <div class="accordion accordion-flash" id="mainPanel<%= root.id %>">
+        <div class="accordion-item">
+          <div class="accordion-header d-flex justify-content-between">
+            <% if root.children.present? %>
+              <div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"> 
+                <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+              </div>
+            <% else %>
+              <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+            <% end %>
+          </div>
+
+          <div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
+            <div class="accordion-body pt-1 pb-1">
+              
+              <%= render(SubjectAccordionComponent.new(current_user: current_user, parent: root)) %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -13,6 +13,18 @@
 
   <body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize">
     <%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%>
+
+    <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+
+      <div class="offcanvas-body" id="subjectsAccordion">
+        <%= render(SubjectAccordionComponent.new(current_user: current_user, parent: nil, opts: { is_offcanvas: true })) %>
+      </div>
+    </div>
+
     <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
       <div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">
       <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>