initial setup for subject index offcnavas

app/components/subject_accordion_component/subject_accordion_component.html.erb

@@ -14,7 +14,7 @@
     </div>
 
     <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
-      <div class="accordion-body pt-1 pb-1" id="<%= accordion_body_id %>">
+      <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-1" id="<%= accordion_body_id %>">
         <div class="text-center">
           <div class="spinner-border text-danger" role="status">
             <span class="visually-hidden">Loading...</span>

app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb

@@ -1,4 +1,4 @@
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="<%= opts[:element_id] %>" data-controller="subjects">
+<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>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>

app/javascript/src/application.scss

@@ -5,6 +5,7 @@
 @import "./application/table";
 @import "./application/nav-bar";
 @import "./application/document-search";
+@import "./application/offcanvas";
 
 .tableFixHead { 
     overflow: auto;

app/javascript/src/application/offcanvas.scss

@@ -0,0 +1,22 @@
+.offcanvas-contents {
+    width: auto !important;
+    min-width: 400px !important;
+}
+
+.offcanvas-contents .accordion, .accordion-item {
+    border: none !important;
+}
+
+.offcanvas-contents .accordion-button:not(.collapsed) {
+    color: #0c63e4;
+    background-color: #fff;
+    box-shadow: none;
+}
+
+
+.sub-body1{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 500px;
+}