[j4] Closing sidebar in list view

[micker]

Here's a quick tip for improving UX on the items/fields category pages in J4 FLEXIContent.

When the page loads, we can automatically add a JavaScript snippet to shrink the Side Menu to its compressed state. It makes navigating those category pages a bit easier. Here's the code snippet:

<script> document.addEventListener('DOMContentLoaded', function() { var sidebar = document.querySelector('#sidebar-wrapper'); var wrapper = document.querySelector('#wrapper'); if (sidebar) { wrapper.classList.add('closed'); // Add the class that shrinks your sidebar } }); </script>

[micker]

hello @iamrobert i tested your code for sidebar . its interesting but it change joomla core behavior user can't use official button to open and close this sidebar ... Maybe the solution can be

adding an option in flexicontent to set this
update script to respect current user click
adding script with option condition

[micker]

@iamrobert i open a different issue for that

[iamrobert]

I'm not seeing this in my code at the bottom of /views/

administrator\components\com_flexicontent\views\items\tmpl\default.php

https://youtu.be/ZKl0v0b0mTU

</div><!-- #flexicontent end -->
<script>
	document.addEventListener('DOMContentLoaded', function() {
  var sidebar = document.querySelector('#sidebar-wrapper'); 
  var wrapper = document.querySelector('#wrapper'); 
  if (sidebar) {
    wrapper.classList.add('closed'); // Add the class that shrinks your sidebar
  }
});
</script>

[iamrobert]

@micker

Thanks for testing out the sidebar code!I reread your DM and want to clarify the other points.

I get what you mean about it changing Joomla's core behavior, and that's a fair point.

If you can make this an optional feature without altering the core functionality, go right ahead! ! I'm scrambling to address FLEXIcontent's less-than-ideal screen fit on Joomla 4. My aim? To roll out a quick, efficient solution for my clients.

Just to give you some background, my code is geared towards my clients' admin template. It's not a one-size-fits-all kind of thing. It's specialized, not a catch-all. Our clients want straightforward, user-friendly marketing websites, not a maze of endless options. I'm still stuck with Admin Menu not working.

What is a client template?

[micker]

Yes 👍 i understand but for accessebilty always closing menu isnt a good solution. It important to keep and respect an admin for all

[iamrobert]

Perhaps this is more bulletproof.

We can use local storage to store the value of open or close. It closes by default if not set:

document.addEventListener('DOMContentLoaded', function() {
  var sidebar = document.querySelector('#sidebar-wrapper');
  var wrapper = document.querySelector('#wrapper');
  var menuCollapse = document.querySelector('#menu-collapse');
  var menuIcon = document.querySelector('#menu-collapse-icon');
  var navLogo = document.querySelector('#header .logo');
  // Retrieve sidebar state from localStorage
  var sidebarState = localStorage.getItem('sidebar');
  console.log(sidebarState);


// Apply initial sidebar state
if (sidebarState === 'closed') {
  wrapper.classList.add('closed');
  menuIcon.classList.remove('icon-toggle-on');
  menuIcon.classList.add('icon-toggle-off');
  navLogo.classList.add('small');
} else if (sidebarState === 'open') {
  wrapper.classList.remove('closed');
  menuIcon.classList.remove('icon-toggle-off');
  menuIcon.classList.add('icon-toggle-on');
  navLogo.classList.remove('small');
} else {
  wrapper.classList.add('closed');
  menuIcon.classList.remove('icon-toggle-on');
  menuIcon.classList.add('icon-toggle-off');
  navLogo.classList.add('small');
}


  // Handle menu click
  menuCollapse.addEventListener('click', function() {
    // Toggle wrapper class
   
    // Update icon
    if (wrapper.classList.contains('closed')) {
      menuIcon.classList.remove('icon-toggle-on');
      menuIcon.classList.add('icon-toggle-off');
	  navLogo.classList.add('small');
      localStorage.setItem('sidebar', 'closed');
    } else {
      menuIcon.classList.remove('icon-toggle-off');
      menuIcon.classList.add('icon-toggle-on');
      localStorage.setItem('sidebar', 'open');
	  navLogo.classList.remove('small');
    }
  });
});

Each view you put it on will display the same.

[micker]

@iamrobert
hello i think i will create an option in global config 'Sidebar behavior" : Open (like joomla core) | Closing (respect user choice)
and add option arround your code. What do you think ?

[micker]

[micker]

@iamrobert commited a51fec9