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

Initial setup navBar

pull/43/head
janpaulo 4 years ago
parent
0c47f0c29b
commit
c4e7701ef1
No known key found for this signature in database
GPG Key ID: 50CA753050F1541C
4 changed files with 98 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      app/components/sidenav_component/sidenav_component.html.erb
  2. 1
      app/javascript/src/application.scss
  3. 3
      app/javascript/src/application/nav-bar.scss
  4. 9
      app/views/layouts/application.html.erb

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

@ -1,74 +1,114 @@
<% if current_user.present? %> <% if current_user.present? %>
<% if opts[:is_sidenav].present? %> <% if opts[:is_sidenav].present? %>
<div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100"> <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
<ul class="nav flex-column text-white w-100"> <div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
<a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100"> <ul class="nav flex-column text-white w-100">
PJET <a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
</a> PJET
<hr/> </a>
<hr/>
<li class="nav-link d-flex align-items-center d-flex align-items-center"> <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" %> <i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %>
</li> </li>
<li class="nav-link d-flex align-items-center"> <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" %> <i class="fas fa-search"></i> <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100" %>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<div class="accordion-item accordion-body bg-transparent "> <div class="accordion-item accordion-body bg-transparent ">
<div class="accordion-header 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"> <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 " %> <i class="fas fa-indent"></i> <%= link_to "Subjects", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
</button> </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>
</li>
<%= 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" })) %> <li class="nav-link ">
</div> <div class="accordion-item accordion-body bg-transparent">
</li> <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>
<li class="nav-link "> <%= 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 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> </div>
</li>
<%= 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" })) %> <li class="nav-link d-flex align-items-center">
</div> <i class="fas fa-map-signs"></i> <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
</li> </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"> <li class="nav-link">
<div class="accordion-item accordion-body bg-transparent "> <div class="accordion-item accordion-body bg-transparent ">
<div class="accordion-header 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"> <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" %> <i class="fas fa-cog"></i> <%= link_to "Settings", "#", class: "accordion-link text-decoration-none mx-2 text-white" %>
</button> </button>
</div> </div>
<div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav"> <div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav">
<div class="accordion-body pb-0 pe-0 pt-0"> <div class="accordion-body pb-0 pe-0 pt-0">
<div class="accordion accordion-flush ps-20" id="firstLevelSubMenu"> <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
<div class="accordion-item bg-transparent"> <div class="accordion-item bg-transparent">
<div class="accordion-header 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" %> <%= 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> </div>
</div> </div>
</div> </div>
</div> </li>
</li>
<li class="nav-link d-flex align-items-center"> <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" %> <i class="fas fa-sign-out-alt"></i> <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<% elsif opts[:is_nav_bar].present? %>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid d-flex justify-content-end">
<div>
<a class="navbar-brand" href="#"><%= image_pack_tag 'application/cdasiaonline_logo.png', class:"nav-bar-app-logo" %></a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div> </div>
<form class="d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Doctrines</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Decisions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" href="#">Sign Out</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
<% end %> <% end %>
<% end %> <% end %>

1
app/javascript/src/application.scss
Unescape View File

@ -3,6 +3,7 @@
@import "./application/sessions"; @import "./application/sessions";
@import "./application/pagination"; @import "./application/pagination";
@import "./application/table"; @import "./application/table";
@import "./application/nav-bar";
.tableFixHead { .tableFixHead {
overflow: auto; overflow: auto;

3
app/javascript/src/application/nav-bar.scss
Unescape View File

@ -0,0 +1,3 @@
img.nav-bar-app-logo {
width: 220px;
}

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

@ -12,15 +12,8 @@
</head> </head>
<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"> <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 }))%>
<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? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
<% if current_user.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;">
<%= render(SidenavComponent.new(current_user: current_user, opts: { is_sidenav: true }))%>
</div>
<% end %>
<div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>"> <div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">
<%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %> <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
</div> </div>

Write Preview
Loading…
Cancel
Save