Keep sidebar from loading as expanded on Dashboard Template

Bootstrap Studio Help
1

I am using the dashboard template with the collapsible side bar. When I switch pages the sidebar expands and takes half the screen. How can you set it so that when the page loads on mobile, the side bar starts as collapsed?

2

Pretty sure you just add collapsed class to the body

1 Like
3

Add the class “toggled” to the navbar.

You might also want to add some js to control a cookie for the state of the sidebar.

Something like: if cookie set to true then add class toggle

1 Like
4

Thank you! Is it possible to only add this class below a certain size with a media query? I want the mobile version to load with “toggled” and the desktop version to load without it.

5

You can try to add this before the window resize EventListerner in the theme.js

window.addEventListener('load', () => sidebar.classList.toggle("toggled", window.innerWidth <= 768 ));
1 Like
6

Worked perfectly, ty for the xmas present :+1:

7

@dassoop

Scroll to top

If you want the scrollToTop button to work as supposed you can replace the scrollToTop function in the theme.js with this

const scrollToTop = document.querySelector('.scroll-to-top');
if (scrollToTop) {
	scrollToTop.classList.add('d-none');
	window.addEventListener('scroll', () => scrollToTop.classList.toggle("d-none", window.pageYOffset < 100));
}

Unused function

This is never used so you can surely remove it from the theme.js

// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
  
var fixedNaigation = document.querySelector('body.fixed-nav .sidebar');

if (fixedNaigation) {
fixedNaigation.on('mousewheel DOMMouseScroll wheel', function(e) {
  var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);

  if (vw > 768) {
	var e0 = e.originalEvent,
	  delta = e0.wheelDelta || -e0.detail;
	this.scrollTop += (delta < 0 ? 1 : -1) * 30;
	e.preventDefault();
  }
});
}

If it had been used it would not work anyway.

The Register page

on the register page the inputs firstname and lastname has the same id
password and repeat password has not autocomplete set to off