sidebar
This commit is contained in:
Adrian Hinz
parent
a4bb4281c4
commit
f6f1ed3182
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -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
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<title>PassKeep</title>
|
<title>PassKeep</title>
|
||||||
<%= csrf_meta_tags %>
|
<%= csrf_meta_tags %>
|
||||||
<%= csp_meta_tag %>
|
<%= csp_meta_tag %>
|
||||||
|
<%= favicon_link_tag %>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
|
|
||||||
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||||
|
|
@ -17,115 +18,22 @@
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||||
|
|
||||||
<!-- Sidebar - Brand -->
|
<!-- 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">
|
<div class="sidebar-brand-icon rotate-n-15">
|
||||||
<i class="fas fa-laugh-wink"></i>
|
<i class="fas fa-key"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
|
<div class="sidebar-brand-text mx-3">PassKeep</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Divider -->
|
<!-- Divider -->
|
||||||
<hr class="sidebar-divider my-0">
|
<hr class="sidebar-divider my-0">
|
||||||
|
<%= build_side_menu %>
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- Divider -->
|
<!-- Divider -->
|
||||||
<hr class="sidebar-divider d-none d-md-block">
|
<hr class="sidebar-divider d-none d-md-block">
|
||||||
|
|
||||||
<!-- Sidebar Toggler (Sidebar) -->
|
<!-- Sidebar Toggler (Sidebar) -->
|
||||||
<div class="text-center d-none d-md-inline">
|
<div class="text-center d-none d-md-inline">
|
||||||
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
<!-- End of Sidebar -->
|
<!-- End of Sidebar -->
|
||||||
|
|
||||||
|
|
@ -134,15 +42,12 @@
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div id="content">
|
<div id="content">
|
||||||
|
|
||||||
<!-- Topbar -->
|
<!-- Topbar -->
|
||||||
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||||
|
|
||||||
<!-- Sidebar Toggle (Topbar) -->
|
<!-- Sidebar Toggle (Topbar) -->
|
||||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||||
<i class="fa fa-bars"></i>
|
<i class="fa fa-bars"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Topbar Search -->
|
<!-- 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">
|
<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">
|
<div class="input-group">
|
||||||
|
|
@ -328,7 +233,7 @@
|
||||||
<footer class="sticky-footer bg-white">
|
<footer class="sticky-footer bg-white">
|
||||||
<div class="container my-auto">
|
<div class="container my-auto">
|
||||||
<div class="copyright text-center my-auto">
|
<div class="copyright text-center my-auto">
|
||||||
<span>Copyright © Your Website 2019</span>
|
<span>Copyright © PassKeep 2019</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue