ahinz
/
passkeep
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sidebar

This commit is contained in:
Adrian Hinz 2019-04-11 15:30:09 +02:00
parent a4bb4281c4
commit f6f1ed3182
3 changed files with 119 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

113
app/helpers/sidemenu_helper.rb Normal file
View File

@ -0,0 +1,113 @@
# frozen_string_literal: true
# Module for building side menu
module SidemenuHelper
def build_side_menu
ret = nav_link('Home', '/', '', 'fa-home')
ret += divider
ret += heading('Nazwa')
submenu = ['other components:', ['Buttons', '/', '/'],
['Cards', '/home/index', '/home/index']]
ret += nav_link_submenu(['Components', 'fa-cog', 'Comp'],
submenu,
['/', '/home/index'])
ret.html_safe
end
# divider for menu
def divider
# <hr class="sidebar-divider">
tag.hr class: 'sidebar-divider'
end
# heading for menu
def heading(name)
# <div class="sidebar-heading">Addons</div>
content_tag(:div, name, class: 'sidebar-heading')
end
# link without submenu
def nav_link(text, link, for_active, icon)
nav_class = check_link_active(for_active) ? 'nav-item active' : 'nav-item'
content_tag(:li, nav_link_to(text, icon, link), class: nav_class)
end
# link_to for navigation
def nav_link_to(text, icon, link, name = nil, expand = nil)
icon_text = icon.nil? ? '' : "<i class=\"fas fa-fw #{icon}\"></i>"
if name.nil?
link_to(raw("#{icon_text}<span>#{text}</span>"),
link, class: 'nav-link')
else
link_to(raw("#{icon_text}<span>#{text}</span>"),
link, class: "nav-link#{expand ? '' : ' collapsed'}",
data: { toggle: 'collapse', target: "#collapse#{name}" },
aria: { expanded: "#{expand}", controls: "collapse#{name}" })
end
end
# create link with sub_menu
# @params:
# a_name [Array] - [name of menu, icon, div_id]
# submenu [Array] - array of :
# -> [name of link {str}, link{str}, active{str or arr}]
# -> nil - to add divider to menu
# -> 'String' - to add header to menu
# for_active - all links in this submenu
def nav_link_submenu(a_name, submenu, for_active)
content_tag :li, class: 'nav-item' do
expand = check_link_active(for_active)
r = nav_link_to(a_name[0], a_name[1], '#', a_name[2], expand)
r += content_tag(:div, inner_submenu(submenu),
id: "collapse#{a_name[2]}",
class: "collapse#{expand ? ' show' : ''}",
aria: { labelledby: "heading#{a_name[2]}" },
data: { parent: '#accordionSidebar' })
r
end
end
# creates inner_submenu
# submenu [Array] - array of :
# -> [name of link {str}, link{str}, active{str or arr}]
# -> nil - to add divider to menu
# -> 'String' - to add header to menu
def inner_submenu(submenu)
content_tag :div, class: 'bg-white py-2 collapse-inner rounded' do
r = nil
submenu.each do |sub|
r += submenu_element(sub) unless r.nil?
r = submenu_element(sub) if r.nil?
end
r
end
end
def submenu_element(sub)
if sub.nil?
# divider
tag.div class: 'collapse-divider'
elsif sub.class.to_s == 'String'
# header
content_tag :h6, sub, class: 'collapse-header'
elsif sub.class.to_s == 'Array'
# link (menu item)
activecl = check_link_active(sub[2]) ? ' active' : ''
link_to(sub[0], sub[1], class: "collapse-item#{activecl}")
end
end
# check if this link is active
def check_link_active(for_active)
is_active = false
if for_active.class.to_s == 'String'
is_active = controller_path.to_s.include?(for_active)
elsif for_active.class.to_s == 'Array'
for_active.each do |fa|
is_active = true if controller_path.to_s.include?(fa)
break if is_active
end
end
is_active
end
end

107
app/views/layouts/application.html.erb
View File

@ -4,6 +4,7 @@
<title>PassKeep</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= favicon_link_tag %>
<meta name="description" content="">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
@ -17,115 +18,22 @@
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
<i class="fas fa-key"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
<div class="sidebar-brand-text mx-3">PassKeep</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Utilities:</h6>
<a class="collapse-item" href="utilities-color.html">Colors</a>
<a class="collapse-item" href="utilities-border.html">Borders</a>
<a class="collapse-item" href="utilities-animation.html">Animations</a>
<a class="collapse-item" href="utilities-other.html">Other</a>
</div>
</div>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item active" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span></a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span></a>
</li>
<%= build_side_menu %>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
@ -134,15 +42,12 @@
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
@ -328,7 +233,7 @@
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright &copy; Your Website 2019</span>
<span>Copyright &copy; PassKeep 2019</span>
</div>
</div>
</footer>