alexdbondoc17
/
cdao-pjet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add `sub_menu` in `sidenav`

pull/6/head
Alexander D. Bondoc 4 years ago committed by Angel Aviel Domaoan
parent
37a26bcb2c
commit
59112abf17
5 changed files with 124 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      app/components/sidenav_component/sidenav_component.html.erb
  2. 7
      app/components/subjects_sidenav_sub_menu_component.rb
  3. 75
      app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.erb
  4. 8
      app/javascript/packs/application.js
  5. 8
      app/javascript/src/application/sidenav.scss

37
app/components/sidenav_component/sidenav_component.html.erb
Unescape View File

@ -1,12 +1,29 @@
<% if @current_user.present? %>
<nav class="navbar navbar-light bg-light flex-column align-items-stretch p-3 sidenav">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="<%= root_path %>"> Home </a>
<a class="nav-link" href="#"> Search </a>
<a class="nav-link" href="<%= decisions_path %>"> Desicions </a>
<a class="nav-link" href="<%= case_doctrines_path %>"> Case Doctrines </a>
<a class="nav-link" href="<%= subject_indexes_path %>"> Subject Indexes </a>
<a class="nav-link" href="<%= destroy_user_session_path %>"> Log Out </a>
</nav>
</nav>
<div class="accordion accordion-flush flex-column align-items-stretch p-3 overflow-auto sidenav" id="sidenav">
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Home", root_path, class: "text-dark" %> </h5> </div>
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Search", "#", class: "text-dark" %> </h5> </div>
<div class="accordion-item">
<h5 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
<%= link_to "Subject Index", subject_indexes_path, class: "accordion-link text-dark" %>
</button>
</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 %>

7
app/components/subjects_sidenav_sub_menu_component.rb
Unescape View File

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

75
app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.erb
Unescape View File

@ -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>

8
app/javascript/packs/application.js
Unescape View File

@ -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;
}
});
});

8
app/javascript/src/application/sidenav.scss
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save