Closed micker closed 9 months ago
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
@iamrobert i open a different issue for that
I'm not seeing this in my code at the bottom of /views/
administrator\components\com_flexicontent\views\items\tmpl\default.php
</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>
@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.
Yes 👍 i understand but for accessebilty always closing menu isnt a good solution. It important to keep and respect an admin for all
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.
@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 ?
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: