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

Enhance ui for sidenav

pull/13/head
janpaulo 4 years ago
parent
b7fe818b8f
commit
d2163c87ec
No known key found for this signature in database
GPG Key ID: 50CA753050F1541C
4 changed files with 154 additions and 44 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. 53
      app/components/sidenav_component/sidenav_component.html.erb
  2. 52
      app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
  3. 91
      app/javascript/src/application/sidenav.scss
  4. 2
      app/views/layouts/application.html.erb

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

@ -1,29 +1,48 @@
<% if @current_user.present? %>
<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: "accordion-link text-decoration-none text-dark" %> </h5> </div>
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Search", documents_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
<h5> <%= link_to "Subject Index", "#", class: "accordion-link text-decoration-none text-dark" %> </h5>
</button>
</div>
<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 "Subject Index", "#", 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>
<div class="accordion-item">
<li class="nav-link ">
<div class="accordion-item bg-transparent accordion-body">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
<h5> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none text-dark" %> </h5>
<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>
</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 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 class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Desicions", decisions_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Logout", destroy_user_session_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div>
</div>
<% end %>

52
app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
Unescape View File

@ -2,14 +2,14 @@
<div class="accordion-body pb-0 pe-0 pt-0">
<% Cdao::Subject.roots.each do |root| %>
<div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
<div class="accordion-item">
<div class="accordion-header">
<div class="accordion-item bg-transparent">
<div class="accordion-header bg-transparent">
<% if root.children.present? %>
<button class="<%= root.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], root.id].join %>">
<h5> <%= link_to root.name, index_url(root.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<button class="<%= root.children.present? ? 'accordion-button' : '' %> collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], root.id].join %>">
<%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
</button>
<% else %>
<h5> <%= link_to root.name, index_url(root.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
<% end %>
</div>
@ -18,14 +18,14 @@
<div class="accordion-body pb-0 pe-0 pt-0">
<% root.children.each do |sub1| %>
<div class="accordion accordion-flush ps-20" id="secondLevelSubMenu">
<div class="accordion-item">
<div class="accordion-header">
<div class="accordion-item bg-transparent">
<div class="accordion-header bg-transparent">
<% if sub1.children.present? %>
<button class="<%= sub1.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], sub1.id].join %>">
<h5> <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<button class="<%= sub1.children.present? ? 'accordion-button' : '' %> collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], sub1.id].join %>">
<%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %>
</button>
<% else %>
<h5> <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %>
<% end %>
</div>
@ -33,39 +33,39 @@
<div class="accordion-body pb-0 pe-0 pt-0">
<% sub1.children.each do |sub2| %>
<div class="accordion accordion-flush" id="thirdLevelSubMenu">
<div class="accordion-item">
<h5 class="accordion-header">
<div class="accordion-item bg-transparent">
<div class="accordion-header bg-transparent">
<% if sub2.children.present? %>
<button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], sub2.id].join %>">
<h5> <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], sub2.id].join %>">
<%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %>
</button>
<% else %>
<h5> <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %>
<% end %>
</h5>
<div class="accordion-collapse collapse" id="<%= [opts[:fourth_sub_menu], sub2.id].join %>" data-bs-parent="#thirdLevelSubMenu">
<div class="accordion-body pb-0 pe-0 pt-0">
<% sub2.children.each do |sub3| %>
<div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu">
<div class="accordion-item">
<h5 class="accordion-header">
<div class="accordion-item bg-transparent">
<div class="accordion-header">
<% if sub3.children.present? %>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>">
<h5> <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>">
<%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %>
</button>
<% else%>
<h5> <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5>
<%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %>
<% end %>
</h5>
<div class="accordion-collapse collapse" id="<%= [opts[:fifth_sub_menu], sub3.id].join %>" data-bs-parent="#fourthLevelSubMenu">
<div class="accordion-body pb-0 pe-0 pt-0">
<% sub3.children.each do |sub4| %>
<div class="accordion-item">
<h5 class="accordion-header">
<%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-decoration-none text-dark clickable-link" %>
</h5>
<div class="accordion-item bg-transparent">
<div class="accordion-header">
<%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub5 clickable-link" %>
</div>
</div>
<% end if sub3.children.present? %>
</div>

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

@ -144,3 +144,94 @@
transform: translateX(50%);
}
}
.side-navbar {
width: 180px;
height: 100%;
position: fixed;
margin-left: -300px;
background-color: #100901;
transition: 0.5s;
}
.nav-link:active,
.nav-link:focus,
.nav-link:hover {
background-color: #ffffff26;
}
.my-container {
transition: 0.4s;
}
.active-nav {
margin-left: 0;
}
/* for main section */
.active-cont {
margin-left: 180px;
}
#menu-btn {
background-color: #100901;
color: #fff;
margin-left: -62px;
}
.accordion-body {
border: none !important;
padding: 0 !important;
}
.accordion-body .accordion-button {
border: none !important;
padding: 0 !important;
}
.accordion-button:focus {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.sub1 {
padding-left: 22px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub2 {
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub3 {
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub4 {
padding-left: 80px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub5 {
padding-left: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
.sidebar-body {
height: 100%;
overflow: scroll;
}
.sidebar-body svg {
color: #ffbca7 !important;
}

2
app/views/layouts/application.html.erb
Unescape View File

@ -15,7 +15,7 @@
<div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0' : 'row h-100 justify-content-center align-items-center' %>">
<% if current_user.present? %>
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
<%= render(SidenavComponent.new(current_user: current_user))%>
</div>
<% end %>

Write Preview
Loading…
Cancel
Save