Commit 254a63dc authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Improve collapsing sidebar

parent ded30e3e
......@@ -27,10 +27,15 @@ $(window).resize ->
$(document).on("click", '.toggle-nav-collapse', (e) ->
e.preventDefault()
if $('.page-with-sidebar').hasClass('collapsed')
$('.page-with-sidebar').removeClass('collapsed')
collapsed = 'page-sidebar-collapsed'
expanded = 'page-sidebar-expanded'
if $('.page-with-sidebar').hasClass(collapsed)
$('.page-with-sidebar').removeClass(collapsed).addClass(expanded)
$('.toggle-nav-collapse i').removeClass('fa-angle-right').addClass('fa-angle-left')
$.cookie("collapsed_nav", "false", { path: '/' })
else
$('.page-with-sidebar').addClass('collapsed')
$('.page-with-sidebar').removeClass(expanded).addClass(collapsed)
$('.toggle-nav-collapse i').removeClass('fa-angle-left').addClass('fa-angle-right')
$.cookie("collapsed_nav", "true", { path: '/' })
)
.page-with-sidebar {
background: #F5F5F5;
......@@ -101,16 +99,14 @@
}
@mixin expanded-sidebar {
.page-with-sidebar {
padding-left: $sidebar_width;
}
.sidebar-wrapper {
width: $sidebar_width;
.nav-sidebar {
margin-top: 20px;
position: relative;
position: fixed;
top: 45px;
width: $sidebar_width;
}
......@@ -122,9 +118,7 @@
}
@mixin folded-sidebar {
.page-with-sidebar {
padding-left: 50px;
}
.sidebar-wrapper {
width: 52px;
......@@ -150,47 +144,33 @@
}
}
.collapse-nav {
position: relative;
top: 50px;
width: 230px;
text-align: right;
padding-right: 21px;
.collapse-nav a {
position: fixed;
bottom: 15px;
padding: 10px;
background: #DDD;
}
.page-with-sidebar.collapsed {
.collapse-nav {
width: 53px;
@media (max-width: $screen-md-max) {
.page-sidebar-collapsed {
@include folded-sidebar;
}
padding-left: 50px;
.sidebar-wrapper {
width: 52px;
overflow-x: hidden;
.nav-sidebar {
width: 52px;
.page-sidebar-expanded {
@include folded-sidebar;
}
.nav-sidebar li a > span {
.collapse-nav {
display: none;
}
}
}
@media (max-width: $screen-md-max) {
@media(min-width: $screen-md-max) {
.page-sidebar-collapsed {
@include folded-sidebar;
}
}
@media(min-width: $screen-md-max) {
.page-sidebar-expanded {
@include expanded-sidebar;
}
@media (max-width: $screen-md-max) {
.collapse-nav {
display: none;
}
}
......@@ -315,4 +315,12 @@ module ApplicationHelper
profile_key_path(key)
end
end
def nav_sidebar_class
if nav_menu_collapsed?
"page-sidebar-collapsed"
else
"page-sidebar-expanded"
end
end
end
- if nav_menu_collapsed?
= link_to icon('plus-square'), '#', class: 'toggle-nav-collapse'
= link_to icon('angle-right'), '#', class: 'toggle-nav-collapse'
- else
= link_to icon('minus-square'), '#', class: 'toggle-nav-collapse'
= link_to icon('angle-left'), '#', class: 'toggle-nav-collapse'
- if defined?(sidebar)
.page-with-sidebar{:class => ("collapsed" if nav_menu_collapsed?)}
.page-with-sidebar{ class: nav_sidebar_class }
= render "layouts/broadcast"
.sidebar-wrapper
= render(sidebar)
.collapse-nav
= render :partial => 'layouts/collapse_button'
= render partial: 'layouts/collapse_button'
.content-wrapper
.container-fluid
.content
......
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