From d2163c87ec7a14d351fcf09eda6ea441551a2e5c Mon Sep 17 00:00:00 2001 From: janpaulo Date: Thu, 3 Feb 2022 10:45:18 +0800 Subject: [PATCH] Enhance ui for sidenav --- .../sidenav_component.html.erb | 53 +++++++---- ...bjects_sidenav_sub_menu_component.html.erb | 52 +++++------ app/javascript/src/application/sidenav.scss | 91 +++++++++++++++++++ app/views/layouts/application.html.erb | 2 +- 4 files changed, 154 insertions(+), 44 deletions(-) diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb index bfef1e8..87c3c43 100644 --- a/app/components/sidenav_component/sidenav_component.html.erb +++ b/app/components/sidenav_component/sidenav_component.html.erb @@ -1,29 +1,48 @@ <% if @current_user.present? %> -
-
<%= link_to "Home", root_path, class: "accordion-link text-decoration-none text-dark" %>
-
<%= link_to "Search", documents_path, class: "accordion-link text-decoration-none text-dark" %>
- -
-
- -
+
+
    + + PJET + +
    +
  • + <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %> +
    • +
  • + <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100" %> +
    • +
  • +
    +
    + +
    <%= 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" })) %>
    -
    +
  • +
    -
    <%= 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" })) %> -
    +
+ + +
  • + <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %> +
    • +
  • + <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %> +
    • + +
    + -
    <%= link_to "Desicions", decisions_path, class: "accordion-link text-decoration-none text-dark" %>
    -
    <%= link_to "Logout", destroy_user_session_path, class: "accordion-link text-decoration-none text-dark" %>
    -
    + <% end %> diff --git a/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb b/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb index eb2163d..6846e7b 100644 --- a/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb +++ b/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb @@ -2,14 +2,14 @@
    <% Cdao::Subject.roots.each do |root| %>
    -
    -
    +
    +
    <% if root.children.present? %> - <% else %> -
    <%= link_to root.name, index_url(root.id), class: "accordion-link text-decoration-none text-dark clickable-link" %>
    + <%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %> <% end %>
    @@ -18,14 +18,14 @@
    <% root.children.each do |sub1| %>
    -
    -
    +
    +
    <% if sub1.children.present? %> - <% else %> -
    <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-decoration-none text-dark clickable-link" %>
    + <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %> <% end %>
    @@ -33,39 +33,39 @@
    <% sub1.children.each do |sub2| %>
    -
    -
    +
    +
    <% if sub2.children.present? %> - <% else %> -
    <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-decoration-none text-dark clickable-link" %>
    + <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %> <% end %> -
    +
    <% sub2.children.each do |sub3| %>
    -
    -
    +
    +
    <% if sub3.children.present? %> - <% else%> -
    <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-decoration-none text-dark clickable-link" %>
    + <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %> <% end %> -
    +
    <% sub3.children.each do |sub4| %> -
    -
    - <%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> -
    +
    +
    + <%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub5 clickable-link" %> +
    <% end if sub3.children.present? %>
    diff --git a/app/javascript/src/application/sidenav.scss b/app/javascript/src/application/sidenav.scss index ea4c457..5346530 100644 --- a/app/javascript/src/application/sidenav.scss +++ b/app/javascript/src/application/sidenav.scss @@ -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; +} + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d99eb13..8733160 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -15,7 +15,7 @@
    <% if current_user.present? %> -
    +
    <%= render(SidenavComponent.new(current_user: current_user))%>
    <% end %>