Commit e84fc14e authored by Tobias Schmidt's avatar Tobias Schmidt

Merge pull request #365 from prometheus/hide-inactive-menus

Collapse inactive navigation menus
parents a61a48f0 26063c1d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="col-md-3 side-nav-col"> <div class="col-md-3 side-nav-col">
<ul class="nav navbar-nav side-nav"> <ul class="nav navbar-nav side-nav">
<% @items['/docs/'].children.sort_by { |i| i[:sort_rank] || 0 }.each do |i| %> <% @items['/docs/'].children.sort_by { |i| i[:sort_rank] || 0 }.each do |i| %>
<%= nav(i, @item) %> <%= nav(i) %>
<% end %> <% end %>
</ul> </ul>
</div> </div>
......
...@@ -45,11 +45,8 @@ ...@@ -45,11 +45,8 @@
<link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!--[if lt IE 9]> <script src="/assets/docs.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head> </head>
<body> <body>
......
def nav_title_of(i) def nav(root_item, buffer='', layer=0)
i[:nav_title] || i[:title] || ''
end
def nav(root_item, focused_item, buffer='', layer=0)
# Skip non-written or hidden items
return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden] return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden]
# Open list element children = nav_children(root_item)
is_active = @item_rep && @item_rep.path == root_item.path
if is_active if nav_active?(root_item)
buffer << "<li class=\"active\">" buffer << "<li class=\"active\">"
else else
buffer << "<li>" buffer << "<li>"
...@@ -16,29 +11,36 @@ def nav(root_item, focused_item, buffer='', layer=0) ...@@ -16,29 +11,36 @@ def nav(root_item, focused_item, buffer='', layer=0)
title = nav_title_of(root_item) title = nav_title_of(root_item)
if layer == 0 if layer == 0
# Add section header. buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> <span>#{title}</span></span>"
buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> #{title}</span>"
else else
# Add link.
buffer << link_to(title, root_item.path) buffer << link_to(title, root_item.path)
end end
# Add children to sitemap, recursively if children.any?
visible_children = root_item.children.select { |child| !child[:is_hidden] && child.path } buffer << %(<ul class="nav #{nav_active?(root_item) ? 'active' : ''}">)
visible_children = visible_children.sort_by { |child| child[:sort_rank] || 0 }
if visible_children.size > 0
buffer << '<ul class="nav">'
visible_children.each do |child| children.each do |child|
nav(child, focused_item, buffer, layer + 1) nav(child, buffer, layer + 1)
end end
buffer << '</ul>' buffer << '</ul>'
end end
# Close list element
buffer << '</li>' buffer << '</li>'
# Return sitemap
buffer buffer
end end
def nav_active?(item)
active = @item_rep.respond_to?(:path) && @item_rep.path == item.path
active || nav_children(item).any? { |child| nav_active?(child) }
end
def nav_title_of(i)
i[:nav_title] || i[:title] || ''
end
def nav_children(item)
item.children
.select { |child| !child[:is_hidden] && child.path }
.sort_by { |child| child[:sort_rank] || 0 }
end
...@@ -90,6 +90,7 @@ a.sc-logo img { ...@@ -90,6 +90,7 @@ a.sc-logo img {
} }
.side-nav .fa { .side-nav .fa {
width: 20px;
color: #555; color: #555;
} }
...@@ -102,14 +103,18 @@ a.sc-logo img { ...@@ -102,14 +103,18 @@ a.sc-logo img {
} }
.side-nav .nav-header { .side-nav .nav-header {
color: #e6522c;
text-transform: uppercase;
font-size: 16px;
display: block; display: block;
margin: 20px auto 15px auto; margin: 20px auto 15px auto;
font-size: 16px;
}
.side-nav .nav-header a, .side-nav .nav-header span {
color: #e6522c;
text-transform: uppercase;
text-decoration: none;
} }
.side-nav .active { .side-nav ul.active li.active {
border-left: 3px solid #e6522c; border-left: 3px solid #e6522c;
margin-left: -2px; margin-left: -2px;
font-weight: bold; font-weight: bold;
......
// Use CSS to hide elements without a delay during page load.
$('head').append('<style type="text/css"> \
.side-nav ul { display: none; } \
.side-nav ul.active { display: block; } \
</style>');
$(document).ready(function() {
var navToggle = function(event) {
event.preventDefault();
var visible = $(this).closest('li').children('ul.nav').is(':visible');
$(this).closest('ul').find('ul.nav').slideUp(200);
if (!visible) {
$(this).closest('li').children('ul.nav').slideDown(200);
}
};
$('.nav-header span').each(function() {
var link = $('<a href="#">').text($(this).text()).click(navToggle);
$(this).replaceWith(link);
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment