Hide sidebar on small screens when button is clicked

[TildaDares]

When the chevron-down icon is clicked, the #sidebar section is supposed to be hidden but currently it doesn't work. This only applies to sm and md screens.

You can see a demonstration of this in https://publiclab.org/questions/warren/01-04-2018/how-good-is-the-purpleair-sensor-and-what-does-it-detect

The relevant code needed for this change can be found in

plots2/app/assets/javascripts/sidebar.js

Lines 1 to 9 in 99f3520

	function toggle_sidebar() {
	if ($('#sidebar').hasClass('hidden-sm')) {
	$('#sidebar').removeClass('hidden-sm')
	.removeClass('hidden-xs')
	} else {
	$('#sidebar').addClass('hidden-sm')
	.addClass('hidden-xs')
	}
	}

plots2/app/views/sidebar/_question.html.erb

Lines 5 to 7 in 99f3520

	<a style="margin-top:-16px;margin-bottom:0;" class="btn btn-sm btn-block btn-link d-lg-none" href="javascript:void()" onClick="toggle_sidebar()"><i class="fa fa-chevron-down"></i></a>
	<div id="sidebar" class="d-lg-inline">

[ShivamJhaa]

Hey @TildaDares Can I work on this issue?

[TildaDares]

Sure @ShivamJhaa

[ShivamJhaa]

Hello @TildaDares , I have a small doubt
" #sidebar .hidden-sm,
#sidebar .hidden-md {
display: block !important;
} "
I only need to add this in style.css, or something else?

[TildaDares]

Hi @ShivamJhaa, have you tried using that style and it worked?

[TildaDares]

@ShivamJhaa I think the reason why the .hidden-sm, .hidden-md classes don't work is because bootstrap removed them https://getbootstrap.com/docs/4.1/migration/#responsive-utilities

[ShivamJhaa]

Hi @ShivamJhaa, have you tried using that style and it worked?

I am using gitpod so I am not able to test this.

[ShivamJhaa]

@ShivamJhaa I think the reason why the .hidden-sm, .hidden-md classes don't work is because bootstrap removed them https://getbootstrap.com/docs/4.1/migration/#responsive-utilities

So do I have to replace them with "d-sm-block, d-md-block"?

[TildaDares]

@ShivamJhaa I'm not familiar with gitpod but there should be a way to view your changes on the browser or you can just tweak the CSS with Chrome dev tools.