Final offcanvas subjects and doctirines

app/components/subject_accordion_component/subject_accordion_component.html.erb

@@ -2,7 +2,7 @@
   <div class="accordion-item">
     <div class="accordion-header d-flex justify-content-between">
       <% if search_result["has_children?"].present? %>
-        <div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
+        <div class="accordion-button collapsed m-0 p-0 sub-label<%= search_result["heirarchy_level"] + 1 %>" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
              data-controller="subjects" data-accordion-id="<%= children_accordion_id %>" 
              data-accordion-for="<%= opts[:accordionFor] %>" data-subject-parent-id="<%= search_result["id"] %>" 
              data-accordion-target="#<%= accordion_body_id %>" data-action="click->subjects#loadSubjectsAccordion"> 

app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb

@@ -1,6 +1,7 @@
 <div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="<%= opts[:element_id] %>" data-controller="subjects">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title">Subjects</h5>
+    <h5 class="offcanvas-title"> <%=opts[:header_title]%> </h5>
+    <hr class="m-0">
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
 

app/javascript/src/application/offcanvas.scss

@@ -1,6 +1,7 @@
 .offcanvas-contents {
     width: auto !important;
     min-width: 400px !important;
+    box-shadow: 0 0 15px -5px #000 !important;
 }
 
 .offcanvas-contents .accordion, .accordion-item {
@@ -8,15 +9,113 @@
 }
 
 .offcanvas-contents .accordion-button:not(.collapsed) {
-    color: #0c63e4;
     background-color: #fff;
-    box-shadow: none;
+    a {
+        color: darkred !important;
+        font-weight: 600;
+    }
 }
 
+// .for-body-grid.sub-body1{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 500px;
+//     padding-left: 10px !important;
+// }
+
+// .for-body-grid.sub-body2{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 600px;
+//     padding-left: 20px!important;
+// }
+
+// .for-body-grid.sub-body3{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 700px;
+//     padding-left: 30px!important;
+// }
+
+// .for-body-grid.sub-body4{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 800px;
+//     padding-left: 40px!important;
+// }
+
+// .for-body-grid.sub-body5{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 900px;
+//     padding-left: 50px!important;
+// }
+
+// .for-body-grid.sub-body6{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 1000px;
+//     padding-left: 60px!important;
+// }
+
+// .for-body-grid.sub-body7{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 1000px;
+//     padding-left: 70px!important;
+// }
 
 .sub-body1{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    column-gap: 10px;
-    max-width: 500px;
+    width: auto;
+    max-width: 1000px;
+    padding-left: 10px !important;
+}
+
+.sub-body2{
+    width: auto;
+    max-width: 1000px;
+    min-width: 400px;
+    padding-left: 20px!important;
+}
+
+.sub-body3{
+    width: auto;
+    max-width: 800px;
+    padding-left: 30px!important;
+}
+
+.sub-body4{
+    width: auto;
+    max-width: 800px;
+    padding-left: 40px!important;
+}
+
+.sub-body5{
+    width: auto;
+    max-width: 900px;
+    padding-left: 50px!important;
+}
+
+.sub-body6{
+    width: auto;
+    max-width: 1000px;
+    padding-left: 60px!important;
+}
+
+.sub-body7{
+    width: auto;
+    max-width: 1000px;
+    padding-left: 70px!important;
+}
+
+.offcanvas-header {
+    border-bottom: 1px solid #0000004d;
+    color: #00000099 !important;
 }

app/javascript/src/application/sidenav.scss

@@ -197,33 +197,47 @@
 }
 
 .sub1 {
-  padding-left: 22px;
-  padding-top: 10px;
+  padding-left: 10px;
+  font-weight: 500;
+  padding-right: 10px;
   padding-bottom: 10px;
+  font-size: 1.1rem;
 }
 
 .sub2 {
-  padding-left: 40px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sub3 {
-  padding-left: 60px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sub4  {
-  padding-left: 80px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sub5  {
-  padding-left: 100px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
+}
+
+.sub6  {
+  padding-left: 10px;
+  padding-bottom: 10px;
+  padding-right: 10px;
+}
+
+.sub7  {
+  padding-left: 10px;
+  padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sidebar-body {

app/views/layouts/application.html.erb

@@ -14,8 +14,8 @@
   <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 }))%>
 
-    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, element_id: "subjectsOffCanvas", accordion_body_id: "subjectsAccordionBody" })) %>
-    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesAccordionBody" })) %>
+    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Subjects", element_id: "subjectsOffCanvas", accordion_body_id: "subjectsAccordionBody" })) %>
+    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesAccordionBody" })) %>
 
     <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' %>">