Can I default to a hidden sidebar?

Support

AI-generated summary

The discussion revolves around the possibility of defaulting to a hidden sidebar in Discourse. nolo asks if it’s possible to show the landing page in full width on initial page load and only reveal the sidebar when the menu icon is clicked. hiddenseal suggests that the sidebar is controlled by the aria-expanded attribute and shares a related link. nolo attempts to use this approach but encounters issues with an automatic animation and realizes that the aria-expanded attribute only indicates the state, not controls it. Don provides a solution by sharing a custom component on GitHub that achieves the desired functionality, which is appreciated by nolo and vikiedavie.

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

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:

4

Hello Nolo,

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

https://github.com/VaperinaDEV/closed-sidebar-by-default

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:

6

Thank you, Don! It’s brilliant!