Can I default to a hidden sidebar?

support
1

When I enable the sidebar navigation, the sidebar shows by default and the first time a user clicks the menu icon, it will hide the sidebar.

Can I reverse this setup, so the landing page shows in full width on initial page load and when a user clicks the menu icon it will reveal the sidebar?

2

This is somewhat similar as the sidebar seems to be controlled by aria-expanded attribute

1 Like
3

Thanks for sharing this! That would be this approach:

<script>
    $(document).ready(function(){ 
        jQuery(function(){
            jQuery('button.btn-sidebar-toggle).click();
        });
    }) 
</script>

Which effects the sidebar to slide to the hidden state. So there’s an automatic animation on document ready which is not that ideal.

I actually also thought that the sidebar is controlled by the aria attribute, so I had tried this:

<script>
  $(document).ready(function(){ 
    $("button.btn-sidebar-toggle").attr("aria-expanded","false");    
  }) 
</script>

But the attribute is not controlling the state, it’s only indicating it. So that snippet will change the attribute, but not the state :upside_down_face:

1 Like
4

Hello Nolo,

I’ve made a component to achieve this. I hope it helps :slightly_smiling_face:

4 Likes
5

Oh yes that helps indeed! :smile: That’s what I fumbled with but couldn’t get it to work…

Thanks so much for sharing @Don :star2:

2 Likes
6

Thank you, Don! It’s brilliant!

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.