cdao-pjet/app/components/sidenav_component/sidenav_component.html.erb

<% if current_user.present? %>
  <% if opts[:is_sidenav].present? %>
    <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
      <div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
        <ul class="nav flex-column text-white w-100">
          <a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
            PJET
          </a>
          <hr/>

          <li class="nav-link d-flex align-items-center d-flex align-items-center">
              <i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %>
          </li> 

          <li class="nav-link d-flex align-items-center">
            <i class="fas fa-search"></i> <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100"  %>
          </li>

          <li class="nav-link">
            <div class="accordion-item accordion-body bg-transparent ">
              <div class="accordion-header bg-transparent">
                <button class="accordion-button collapsed  bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
                  <i class="fas fa-indent"></i> <%= link_to "Subjects", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
                </button>
              </div>

              <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
            </div>
          </li>

          <li class="nav-link ">
            <div class="accordion-item accordion-body bg-transparent">
              <div class="accordion-header">
                <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
                  <i class="fas fa-book"></i> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
                </button>
              </div>

              <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
            </div>
          </li>

          <li class="nav-link d-flex align-items-center">
            <i class="fas fa-map-signs"></i> <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
          </li>

          <li class="nav-link">
            <div class="accordion-item accordion-body bg-transparent ">
              <div class="accordion-header bg-transparent">
                <button class="accordion-button collapsed  bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#settings">
                  <i class="fas fa-cog"></i> <%= link_to "Settings", "#", class: "accordion-link text-decoration-none mx-2 text-white" %>
                </button>
              </div>

              <div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav">
                <div class="accordion-body pb-0 pe-0 pt-0"> 
                  <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
                    <div class="accordion-item bg-transparent">
                      <div class="accordion-header bg-transparent">
                        <%= link_to "Subjects", subject_indexes_path, class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li class="nav-link d-flex align-items-center">
            <i class="fas fa-sign-out-alt"></i> <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %>
          </li>
        </ul>
      </div>
    </div>
  <% elsif opts[:is_nav_bar].present? %>
    <nav class="navbar navbar-expand-lg navbar-light bg-light p-0 navbar-body">
      <div class="container-fluid">
        <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
          <div>
            <a class="navbar-brand" href="#"><%= image_pack_tag 'application/cdasiaonline_logo.png', class:"nav-bar-app-logo" %></a>
          </div>
          <form class="d-flex">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item p-2">
                <%= link_to ' <i class="fas fa-home me-2"></i>Home'.html_safe, root_path, class: "nav-link" %>
              </li>
              <li class="nav-item p-2">
                <%= 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">
                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" 
                   data-controller="subjects" data-accordion-target="#subjectsOffCanvasAccordionBody" 
                   data-action="click->subjects#loadSubjectsOffcanvasAccordion">
                  <i class="fas fa-indent me-2"></i> Subjects
                </a>
              </li>
              <li class="nav-item p-2">
                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas" 
                   data-controller="subjects" data-accordion-target="#doctrinesOffCanvasAccordionBody" 
                   data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
                  <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> Decisions'.html_safe, decisions_path, class: "nav-link" %>
              </li>
              <li class="nav-item p-2">
                <%= link_to '<i class="fas fa-cog me-2"></i>Settings'.html_safe, subject_indexes_path, class: "nav-link" %>
              </li>
              <li class="nav-item p-2">
                <%= link_to '<i class="fa-solid fa-file-lines"></i>Reports'.html_safe, reports_path, class: "nav-link" %>
              </li>
              <li class="nav-item p-2 active-red">
               <%= link_to '<i class="fas fa-sign-out-alt"></i> Sign Out'.html_safe, destroy_user_session_path, class:" text-white nav-link" %>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </nav>
  <% end %>
<% end %>